02前端入门HTML5 +CSS3+电商网页制作

0 来源
1 CSS基础
2 CSS进阶
3 项目演练

0 来源

跳转学习路线介绍

跳转讲解视频

1 CSS基础

1.1 基础认识

cascading style sheets 层叠样式表

1.1.1 css demo

适用于本课件，实际生产环境使用外联式的引入方式
在head中的style标签中,格式：选择器名称 {}

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS体验</title>
    <style>
        /* css位置 */
        p {
            color: brown;
            font-size: 18px;
            background-color: yellow;
            width: 500px;
        }
    </style>    
</head>

1.1.1 css的层叠性

代码最终显示为blue，后层覆盖前层。与后续的属性的连写作区分

p {
            color: brown;
            color: blue;      

        }

拓展
当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。

<div id="test">
<span>Text</span>
</div>

div#test span { color: green; }
div span { color: blue; }
span { color: red; }

无论 css 语句的顺序是什么样的，文本都会是绿色的（green），因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色 blue 的规则都会覆盖红色 red 的规则）

1.2 CSS引入方式

内嵌式
style标签内
外联式
.css文件中，通过link标签属性 href 引入
行内式
具体标签的style中，后期配合js使用

1.3 选择器

标签选择器
标签名{}
全部标签都被应用
类选择器
先定义，后在标签的class 属性中使用
.类名 { css属性名:属性值;}
id选择器
#id属性值{ css属性名：属性值；}
类似类选择器，但是是唯一的，不可重复，后期配合js使用
通配符选择器
* {css属性名：属性值；}
基本不用，用于清除标签的默认间距

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        * {            
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <p class="red">ppppppp</p>
    <p>zhegene</p>
    <div>abal</div>
    <h1>kldhalf</h1>
</body>

1.4 文体和文本样式

1.4.1 文体

font-size
默认16px
font-weight
`font-weight: 700; /* normal 400 bord: 700 *
font-style
normal，italic
font-family
无衬线字体 sans-serif：粗细均匀，网页
衬线字体：笔锋，报刊书籍
等宽字体：宽度相等，程序代码编写
font属性连写（简写）与复合
顺序不能乱，可以省略前两个
可以把单独的属性写在复合属性的下面

/*  选择器{font: font-style  font-weight  font-size/line-height  font-family;} */
font: italic 700 66px  宋体；
font:  300px  宋体；
font-style： nomal

延伸例子

font-family: 微软雅黑，隶书,sans-serif;

tips： 区别css层叠的覆盖

1.4.2 文本样式

文本缩进 text-indent
数字+px：具体像素
数字+em：当前标签、id等字号的两倍
水平对齐方式 text-align:center等
- 文本
- span a input img 标签
文本修饰 text-decoration
underline（常用）
line-through 删除线
overline
none（常用，用于清除超链接默认的下划线）

1.4.3 行高

line-height
数字+px：具体像素
数字：当前标签、id等font-size的倍数

1.4.4 Chrome 调试工具

略

1.4.5 拓展

颜色的属性值：
关键词
rgb
rgba表示法：a表示透明度，用小数表示
十六进制表示法
标签居中
复合写法：0 上下居中，atuo 左右居中
margin:0 auto

2 CSS进阶

2.1 选择器

2.1.1 复合选择器

后代选择器空格
父类选择器子类选择器 {css}。所有后代选择器都会选上

<style>
        div p {
            color: brown;
        }
    </style>
</head>
<body>
    <p>pbiaoqian</p>
    <div><p>div的p选择器</p></div>
</body>

特定子代选择器 >
选择器1>选择器2 {css} 。只选择标记的子代

div>a {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">div里的a</a>
        <p>div的p选择器
            <a href="#">div里的p的a </a>
        </p>
    </div>
    
</body>

2.1.2 并集选择器

，
同时选择多个不同的标签选择器

2.1.3 交集选择器

选择器连写：选择器1选择器2 {css}

 p.box {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        div里的box
    </div>
    <p>pppppp</p>
    <p class="box"> p里的box</p>    
    
</body>

2.1.4 hover伪类选择器

hover：鼠标悬停选择
选择器：hover {css}

a:hover {
            color: red;
            background-color: green;
        }
        div:hover {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">div里的a</a>
        <p>div的p选择器
            <a href="#">div里的p的a </a>
        </p>
    </div>
    
</body>

2.2 emmet语法练习

vscode的代码简写

2.3 背景

2.3.1 背景颜色

bgc：background-color
background-color: pink;
默认为透明

2.3.1 背景图

bgi：background-image
background-image: url(../前端html.png);
背景图平铺
bgr：background-repeat
repeat-x，repeat-y，no-repeat
background-repeat: repeat-x;

2.3.2 背景图位置

bgp：background-position
left-center-right
top-center-bottom
原点，左上角（0,0）

background-position: center bottom;

2.3.3 其他

推荐连写属性顺序，可以颠倒
background：color image repeat position

2.3.4 img和背景图片的区别

img默认有宽高，用来实现项目里重要的图片，body里面
背景图片要元素的宽高的布局，css里设置

2.4 元素显示模式

2.4.1 块级元素

独占一行，可以设置特定数值
div，p，h系列

2.4.2 行级

宽高可以由内容默认撑开
不可以设置宽高
a,span,b.u.i.s,strong,ins,em,del…

2.4.3 行内块

一行可以多个，可以修改宽高
input，textarea，buton，select
img

行内，块，行内块对比与区别

文字说明
 代码示例说明

2.4.4 元素显示模式的转换

属性	效果	使用频率
centered 文本居中	right-aligned 文本居右	right-aligned 文本居右
display:block	转换成块级元素	较多
display:inline-block	转换成行内块元素	较多
display:inline	转换成行内元素	极少

2.4.5 拓展：嵌套与并列

p标签中不要嵌套div，p，h标签
a不能嵌套a自己，其他标签均可

2.4.6 css特性：继承性与层叠性

继承性
文字控制属性都能继承
color
font
text-indent，text-align
line-height等
子级a标签不会继承父级颜色
层叠性
同一优先级的选择器，后边属性覆盖前面的

2.4.7 优先级与权重

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

优先级
不同选择器优先级不同,geng：
继承—通配符选择器—标签选择器—类选择器—id选择器—行内样式—!important
注意：
!important 写在对应的样式后边，不需要写在继承的样式里面，直接写在自己的样式里
权重叠加计算
复合选择器，css通过计数各选择器的多少来进行渲染
sum{行内样式-id-类-标签-通配符}
此外，!important 如果不是继承级别最高

2.5 盒子模型 Box Model

网页布局核心：盒子模型（标签/元素）的拼接
margin，border，padding， content

2.5.1 内容content

wedth，height，background-color

2.5.2 边框boder

搜索框，border-top边框颜色等地方用
可以连写
border：8px solid red；
快捷键：bd + tab键

2.5.3 padding 内边距

直接设置会把盒子模型扩大，需要重新计算尺寸
连写模式，padding后跟4个值按照顺时针从上开始：上右下左顺序设置；3个值上——右左——下；2个值：上下——左右

2.5.4 css3的内减模型

box-sizing: border-box;

2.5.5 margin 外边距

同padding

上下外边距的问题：
上下两个margin设置会合并最大值，故设置一个就可以
嵌套问题（塌陷）：
互相嵌套的块级元素,子元素的margin-top会作用在父级元素上
导致父级元素一起往下移动
方法：

父级元素设置boder-top或者padding-top
父级元素设置overflow：hidden 不影响原结构，推荐
转换成行内块
设置浮动

行内标签修改边距
问题：
margin，padding只改变左右距离，不改变上下距离
方法：
line-height修改上下边距

2.5.6 盒子模型新闻案例

列表去点（标号）

ul {
            list-style: none;
        }

2.5.7 结构伪类选择器

根据元素在html中的结构关系查找元素

<style>
        li:first-child {
            background-color: red;
        }
        li:last-child {
            background-color: blue;
        }
        /* 第n个子元素 */
        li:nth-child(2) {
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- ul>li{这是第$个li}*8 -->

其中，nth-child(n)的里面呢可以填写公式：
n为0,1,2,3…

功能	公式
偶数	2n、even
奇数	2n+1、odd
前5个	-n+5
找到从第5个往后的	n+5

2.5.8 伪元素

元素：html设置的标准标签
伪元素：由css模拟出的标签效果，默认是行内元素,用于装饰性的小元素
::before ——在父元素内容的前面添加子级伪元素
::after ——在父元素内容的后面添加
伪类元素的css属性
中必须包含content内容，不然不会显示

2.6 浮动

原用于图文环绕，现常用于标准流转化的网页布局
float：left；right

2.6.1 浮动特点

脱离标准流控制
浮动元素币标准流高半个级别，可覆盖标准流里的元素
下一个浮动左右跟随，顶对齐
一行可多个，且可以修改宽高——同行内块元素特点
不可margin：auto居中

2.6.2 css书写顺序

浏览器按此顺序执行渲染效率高
建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

举例：

 .jdc {
    display: block;
    position: relative;
    float: left;
    
    width: 100px;
    height: 100px;
    background-color: green;
    margin: 0 10px;
    padding: 20px 0;
    
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    
    background: rgba(0,0,0,.5);
    border-radius: 10px;
 }

2.6.3 常用格式

* {
            margin: 0;
            padding: 0;
        
        }
/* li标签去点 */
        ul {
            list-style: none;
        }
/* 文字居中表示 */
            text-align: center;
            line-height: 50px;
/* a标签去下划线 */
            text-decoration: none;
/* 光标补货改css样式 */
        .nav li a:hover {
            background-color: green;
        }

2.6.4 清除浮动

清除浮动给别的元素带来影响：
父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响

直接父级元素加高度属性
父级元素的body内容最后加一个块级元素，并添加属性 clear：both——清除左右两侧浮动的影响
单伪元素清除法,css里操作 ::after

.clearfix::after {
            content: "";
            display: block;
            clear: both;
            /* 版本兼容性 */
            height: 0;
            visibility: hidden;
        }

双伪元素：推荐使用

/* 4 双伪元素法 */
        /* 解决外边距塌陷问题：父子便签，都是块级，子级添加margin会影响父级的位置 */
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }

        /* 真正清除浮动的标签 */
        .clearfix::after {
            clear: both;
        }

同塌陷，父级元素添加属性overflow：hidden

2.7 定位 position

布局方式：标准流，浮动，定位
用于让元素自由的摆放，盒子模型的层叠
定位方式+方向上的偏移量

2.7.1 相对定位 relative

占有原来的位置
仍然具有标签原有的显示模式特点：独占一行等
改变位置参照自己原来的位置——本质上没有脱离标准流的控制
水平以left为准，上下以top为准

2.7.2 绝对定位 absolute 及居中

先找已经定位（相对，绝对都可以，推荐相对定位）的父级，若存在，以此为参照进行定位
若父级无定位，则以body(浏览器窗口)定位

脱标，不占用标准流位置
改变标签的显示模式特点——变成了行内块
子绝父相，就近找父级，最远即body标签浏览器窗口
绝对定位中的margin：0 auto 居中失效问题：
笨方法辅助：
left 50%；
margin-left: -150px;
常用方法：
transform: translate(-50%,50%);

2.7.3 固定定位 fixed

脱标，不占位置
行内块特点
针对浏览器标定距离

2.7.4 元素层级关系

不同布局方式元素的层级关系
标准流<浮动<定位
不同定位之间的层级关系
相对，绝对，固定默认层级相同——在HTML中下面的元素层级更高，会覆盖上面元素。
此外，可以设置z-index 属性：
1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
2. 如果属性值相同，则按照书写顺序，后来居上；
3. 数字后面不能加单位。

2.7.5 装饰

垂直对齐

字母的基线baseline问题
vertical-align：middle 中间对齐，默认：baseline，其他还有top，bottom
该属性只能加在行内或者行内块标签里（浏览器当做文字处理），加在块标签里无效
2. 光标类型
cursor：
default 默认，箭头
pointer 小手，提示可点击
text 工字型，提示可选择文字
move 十字光标，提示可以移动
3. 边框圆角
boeder-radius 数字+px，百分比
省略的角度：对角一样
4. 溢出部分
overflow：
visible 默认，溢出可见
hidden 溢出隐藏，最常用
scroll 无论是否溢出，显示滚动条
auto 根据是否溢出，自动显示或隐藏滚动条

元素本身隐藏
visibility：hidden 占位隐藏
display：none 不占位隐藏 常用
二维码

默认图片设置为不显示。鼠标悬停父级标签，子级img标签显示

.nav li a:hover img {
		display:block;
}

元素整体透明
opacity：标签整体透明，单独html，css不使用，结合js使用

2.8 项目样式补充

2.8.1 盒子阴影：box-shadow

h-shadow :必须，水平偏移量
v-shadow: 必须垂直偏移量
blur：模糊度
spread：阴影扩大
color：阴影颜色
inset：改为内部阴影

2.8.2 过渡transition

配合hover，长度+时间

 			transition: height 1.5s, background-color 2s;
        }
        .box:hover {
            height: 600px;
            background-color: greenyellow;
        }

2.8.3 骨架标签

<!DOCTYPE html> <!-- html5规范 -->
<html lang="en"> <!-- 语种 -->
<head>
    <!-- 字符编码 ,zh-CN 中文-->
    <meta charset="UTF-8">
    <!-- ie兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动端使用 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

2.8.4 SEO三大标签

竞价排名
网页制作成html
标签语义化 h1，strong等：
京东示例：title，description，Keywords

<meta charset="utf8" version='1'/>
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
    <meta name="description"
          content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>

后面案例中有seo的H1标题补充

2.8.5 favcion ico图片

放置在根目录
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

3 项目演练

3.1 学成在线

3.1.1 头部版心 margin样式覆盖问题

<!-- 头部 版心-->
    <div class="header wrapper">1</div>

margin: 30px 0;不生效问题：

/* 版心 */
.wrapper {
    width: 1200px;
    margin: 0 auto;
}

/* 头部 */
.header {
    height: 42px;
    background-color: pink;
    /* 版心和头部不是父子级关系，直接写margin: 30px 0;会覆盖上面的版心css样式 */
    margin: 30px auto;

}

3.1.2 导航 a设置高度问题

导航:a标签设置同li标签同样高度，方便点击。需要变为行内块才能更改生效——变为块元素后仍然可以排在一行是因为每个标签的各自父级li标签有做浮动

<div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>

.nav li {
    float: left;
    margin-right: 26px;
}
.nav li a {
    /* a标签高，需要变为行内块才能更改高度生效：方便点击 */

    height: 42px;
    /* 文字高 */
    line-height: 42px;
}

3.1.3 img与bgi使用

头像等重要部分用img标签，
搜索等不重要按钮用background-img 背景图css样式

.search button {
    float: left;
    width: 50px;
    height: 40px;
    /* 背景图表示搜索按钮 */
    background-image: url(../images/btn.png);
}

/* 图片垂直居中 */
.user img {
    vertical-align: middle;
}

3.1.4 常用的css设置

/* 盒子模型初始化，内减模型。需注意后期设置数据后，子级标签的数值计算问题 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* li标签去除 · */
li {
    list-style: none;
}

/* a标签去除下划线 */
a {
    text-decoration: none;
}

/* 清除浮动影响： */
/* 本项目代码中为版权部分受到上层无高度影响：注意清除上层的li的父级content浮动影响 */
/* li浮动之后，脱标，父级没有高度 */
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }

/* 网页底色   */
body {
    background-color: #f3f5f7;
}

3.2 小兔鲜儿

3.2.1 项目文件目录准备

命名 xtx_pc_client
favicon.ico 到根目录
images和uploads图片文件夹
主页HTML：index.html
css文件夹：
base.css ：基础公共样式——拷贝通用设置
common.css：公用的重复样式
index.css等：首页等各页面样式
本处多代码笔记，以供复习

3.2.2 顶部快捷导航

嵌入精灵图片时，用的行内标签span（a标签等）,设置宽高不生效，需要转换为块

.shotcut .wrapper li a span {
    /* span行内标签，设置宽高不生效 */
    display: inline-block;
    margin-right: 8px;
    width: 11px;
	height: 16px;
    background-image: url(../images/sprites.png);
    background-position: -160px -70px;

    vertical-align: middle;
}

3.2.3 Header

1 . float: right时候，多个标签使用margin-right时，按照标签的顺序进行定位（同left的定位左右方向相反），可以取负值。比如

.search {
    float: right;
    margin-right: 50px;
    width: 172px;
    height: 30px;
    background-color: pink;


}

.shopping_cart {
    float: right;
    margin-right: -210px;
    width: 23px;
    height: 23px;
    background-color: green;

}

处理此问题也可以在html文件中交换search和shopping_cart 标签的上下顺序，似的css中的margin-right均为正值，但仍需重新计算偏移值。
2 . placeholder 设置样式

/* ::placeholder的样式 */
.search input::placeholder {
    font-size: 14px;
    color: #ccc;
}

3 .购物车及角标

.shopping_cart {
    position: relative;
    float: right;
    margin-top: 28px;
    margin-right: -210px;
    width: 23px;
    height: 23px;
    background-image: url(../images/sprites.png);
    background-position: -120px -70px;

}

.shopping_cart span {
    position: absolute;
    top: -6px;
    right: -13px;

    width: 20px;
    height: 15px;
    background-color: #e26237;
    border-radius: 8px;

    font-size: 15px;
    color: #fff;
    text-align: center;
    line-height: 15px;

}

SEO补充：全页唯一的H1标题用于logo处的隐藏说明

其他副标题均用H2及下级标题

3.2.4 Footer

定位及伪元素：
定位：子绝父相
伪元素：必须有content 属性，一般用来补充标签后面的小精灵图标
bgi一般结合bgp来确定位置，也可以直接用position方法定位
对齐行内元素一般用：vertical-align: middle

.footer .top li::before {
    position: absolute;
    top: 0;
    left: 0;
    /* display: inline-block; */
    content: "";
    width: 58px;
    height: 58px;
    background-image: url(../images/sprites.png);
    /* background-position: 0 -2px;     */
    vertical-align: middle;
}

轮播图下面的圆点提示一般用ol>li 标签表示,并辅以class="current"类表示当前

<ol>
                <li></li>
                <li></li>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>

.banner ol .current {
    background-color: #fff;
}

3.2.5 Goods

当标签多时，尽量避免不同位置使用重复类型标签，也可添加不同类名。

<div class="bd clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>睿米无线吸尘器F8
                        </h3>
                        <div>¥<span>899</span></div>
                        <b>新品</b>
                    </a>


.goods .bd li b {
    position: absolute;
    left: 17px;
    top: 18px;
    width: 28px;
    height: 51px;
    border: 1px solid #27ba9b;
    border-radius: 2px;
    font-size: 18px;
    font-weight: 400;

    color: #27ba9b;
    line-height: 24px;
}

3.2.6 Fresh

float的使用应该遵循盒子模型的先大后小原则，如下bug代码展示，a标签浮动后hover时发现位置不对。已经注释掉：

.fresh .hd ul li {
    float: right;
}

.fresh .hd ul li a {
    /* float: right; */
    margin-right: 6px;
    padding: 2px 7px;
    font-size: 16px;    

}
.fresh .hd ul li a:hover {
    background-color: #27ba9b;
    color: #fff;
}

本文含有隐藏内容，请开通VIP 后查看

02前端入门HTML5 +CSS3+电商网页制作：CSS