一、CSS盒子布局
- 1. 内边距 padding
- 2.外边距 margin
- 3.案例
- 4.边框形状
- 5.阴影
二、浮动
- 1.浮动特性
- 2.清除浮动
- 3.css书写顺序
三、css定位
- 1.==定位=定位模式（position） + 边偏移（top、left、right、bottom）==
- 2.案例
- 3.元素的显示与隐藏
四、CSS高级技巧
- 1.精灵图
- 2.字体图标
- 3.css三角
- 4.鼠标样式&轮廓线
- 5.vertical-align
- 6.溢出文字省略号显示
- 7.常见布局技巧
- 8.css初始化
五、CSS3 && HTML5
- 1.CSS3
- - 1.1 新增选择器
  - - 1.1.1 属性选择器
    - 1.1.2 伪类选择器(nth-child && after/before)
  - 1.2 伪元素清除浮动
  - 1.3 盒子模型—— box-sizing
  - 1.4 其他特性（了解）
  - 1.5 过渡（重点）
  - 1.6 动画
  - 1.7 2D && 3D
  - - 1.7.1 2D转换
    - 1.7.2 3D转换
  - 1.8 浏览器私有前缀
- 2.HTML5
- - 2.1 语义化标签
  - 2.2 多媒体标签
  - 2.3 input新增属性
六、品优购项目
- 1. css初始化
- 2. 公共样式
- 3. 主页面
- 4. 列表页面
- 5. 注册页面

一、CSS盒子布局

1. 内边距 padding

如上图，每个盒子都有一个属于自己的padding值，也就是内边距，是盒子内容与自己的边框的一个距离。
用法: 在盒子属性里面写

div {//设置内边距为 5像素padding-top: 5px;padding-left: 5px;padding-bottom: 5px;padding-right: 5px;/* 内边距 复合写法 简写 空格分隔，不能改变顺序 *//* 四周都为5px */padding: 5px;/* 上下为5，左右为10 */padding: 5px 10px;/* 上为5 左右为10 下为20 */padding: 5px 10px 20px;/* 上5 右10 下20 左30  顺时针*/padding: 5px 10px 20px 30px;}

注意：在css盒子模型中内边距会撑大盒子。

2.外边距 margin

外边距margin主要是来控制盒子与盒子之间的距离，用法与padding相似。
例如：我有两个div盒子，现在两盒width:100px height:100px。

<div class="one">1</div>
<div class="two">2</div>

我给他们分别设置一个margin值

.one,
.two {margin: 20px;/* 简写和padding含义一样 *//*margin: 20px 20px 20px 20px;*/
}

黑色盒子间就有一个距离。

<div class="header"><span>里面的文字</span>
</div>

/* 实现水平居中 想让块级元素水平居中，给其父亲添加 text-align： center*/
.header {width: 900px;height: 200px;background-color: pink;/* 左右auto就行 */margin: 20px auto;/* 让行内元素或者行内块元素也居中对齐 把它们当成文字 给父亲设置即可 *//* 单设置span没有效果 对div这类盒子不管用 所以上面会写margin 当然也可以转换 */text-align: center;
}/* 也可以这样 */
/* div span {display: block;text-align: center;
} */

外边距合并 ,盒子塌陷问题：
什么是盒子塌陷，简单的来说就是如果我有两个盒子是父子关系，给父亲和儿子分别设置一个margin-top，会发生什么，你会想儿子会和父亲有个距离，答案是错的，这时候他们会取大的margin值作为整体的margin值，如图：

内盒子会贴在外盒子里面，可是此时我只想要儿子和父亲有个距离，那怎么办，答案如下

<div class="father"><div class="son"></div>
</div>

.father {width: 400px;height: 400px;background-color: blue;margin-top: 50px;/* 解决： 1.为父元素定义一个上边框 *//* border: 1px solid red; *//* border: 1px solid transparent; *//* 2.为父元素定义一个上内边距 *//* padding-top: 50px; *//* 3.使用下面这个 常用 不会改变盒子大小*/overflow: hidden;}.son {width: 200px;height: 200px;background-color: beige;margin-top: 20px;}

这也算是css中的bug了吧！

稍稍提一句：浏览器会给我们一个默认的padding、margin值，我们写项目时一般会清除内外边距，防止产生的效果与预期不一致。
* {padding: 0;margin: 0;
}

3.案例

1.真黑曲奇案例

<!DOCTYPE html>
<html lang="en"><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>Document</title><style>* {padding: 0;margin: 0;}a {text-decoration: none;color: #333;}body {background-color: #f5f5f5;}.box {width: 298px;height: 415px;background-color: #fff;/* 让盒子水平居中对齐 */margin: 100px auto;}.box img {/* 图片宽度和父亲一样宽 */width: 100%;}.review {height: 70px;font-size: 14px;/* 因为段落没有width属性 所以padding 不会撑大盒子宽度 */padding: 0 28px;margin-top: 30px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info em {font-style: normal;color: #ebe4e0;margin: 0 6px 0 15px;}</style></head><body><div class="box"><a href="#"><img src="011b377d62c0f7594f277c3dd6c7fe3b.jpeg"></a><p class="review"><a href="#">好曲奇我只选黑奥利，快递送到家</a></p><div class="appraise">来自564864877的评价</div><div class="info"><h4><a href="#">真黑曲奇，我只要这个...</a></h4><em>|</em><span style="color: orange;">9.9元</span></div></div></body></html>

效果图：

2.品优购快报案例

<!DOCTYPE html>
<html lang="en"><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>Document</title><style>* {padding: 0;margin: 0;}.box {width: 248px;height: 163px;border: 1px solid #ccc;margin: 100px auto;}.box h3 {height: 32px;border-bottom: 1px dotted #ccc;font-size: 14px;font-weight: 400;/* line-height: 32px;垂直居中 */padding-left: 15px;}/* 去掉li前面的小圆点 */li {list-style: none;}.box ul li a {font-size: 12px;color: #666;text-decoration: none;}.box ul li {height: 23px;line-height: 23px;padding-left: 20px;}.box ul {margin-top: 7px;}.box ul li a:hover {text-decoration: underline;}</style>
</head><body><div class="box"><h3>品优购快报</h3><ul><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】爆款耳机5折秒！</a></li><li><a href="#">【特惠】爆款耳机5折秒！</a></li></ul></div>
</body></html>

效果图：

4.边框形状

在创建一个盒子时我们不总是矩形的，很多页面都有其他形状，那是怎么设置的呢？就要用上我们的 border-radius 属性了。

/* 圆角边框 */
border-radius: 10px;
/* 圆角矩形设置为高度的一半 */
border-radius: 50px;
/* 画圆 把半径设置为高度宽度的一半 这里矩形width: 300px;height: 300px*/
/* border-radius: 150px; */
/* 50%就是高度 宽度的一半 */
border-radius: 50%;/* border-radius: 上左 上右 下右 下左; 顺时针*/
border-radius: 15px 20px 25px 30px;
/* 还可以是两个值 对角线的关系  */
/* border-radius: 10px 40px; */
/* 左上角 不能改变顺序必须top-left 不能left-top 同理其他一样*/
/* border-top-left-radius: 20px ; */

5.阴影

1.盒子阴影（重要）

box-shadow: h-shadow v-shadow blur spread color inset/outset;

h-shadow 必需写，水平阴影可以为负
v-shadow 必需写，垂直阴影可以为负
blur 选写模糊距离
spread 选写阴影的尺寸
color 选写阴影的颜色（可用rgba）
inset 选写在内部显示阴影 outset在外部显示
可以在后面写上inset 阴影变成内部的但不能写outset 因为默认为这个写了就不生效了

box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);

2.文字阴影
类似盒子阴影，text-shadow: h-shadow v-shadow blur color;

text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);

二、浮动

为什么学浮动？

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

什么是浮动？float: left /right;

1.浮动特性

一、脱标
1.脱离标准流的控制（浮）移动到指定位置（动），（俗称脱标）。
2.浮动的盒子不在保留原先的位置 :浮动后面的标准流盒子会补上原来浮动盒子的空位会实现叠加效果，空间上的分隔浮动会压在标准流上面。
3.浮动盒子只影响后面的标准流不影响前面的。

二、浮动元素一行显示
1.会随浏览器边框大小而改变相对位置。
2.不管盒子大小都是左上角顶部对齐。
注意：（1）浮动元素是相互贴靠在一起的（不会有缝隙），（2）如果父级宽度装不下这些浮动盒子，多出的盒子会另起一行。

三、
1.任何元素都可以浮动，不管是什么模式的元素，添加浮动之后具有行内块元素（inline-block）相似的特性。
2.如果行内元素有了浮动，则不需要转换块级\行内块元素就可以直接设置高度宽度。
附：如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，他的大小根据内容来决定。

2.案例
(1)

<!DOCTYPE html>
<html lang="en"><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>Document</title><style>* {padding: 0;margin: 0;}li {list-style: none;}.box {width: 1226px;height: 285px;background-color: pink;margin: 14px auto;}.box li {width: 296px;height: 285px;background-color: skyblue;float: left;margin-right: 14px;}/* 必须写.box 权重问题 */.box .one {margin-right: 0;}</style>
</head><body><ul class="box"><li>1</li><li>2</li><li>3</li><li class="one">4</li></ul>
</body></html>

效果图：

(2)

<!DOCTYPE html>
<html lang="en"><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>Document</title><style>.box {width: 1226px;height: 615px;background-color: pink;margin: 0 auto;}.left {float: left;width: 234px;height: 615px;background-color: green;}.right {float: left;width: 992px;height: 615px;background-color: skyblue;}.right>div {float: left;width: 234px;height: 300px;background-color: brown;margin-left: 14px;margin-bottom: 14px;}</style>
</head><body><div class="box"><div class="left"></div><div class="right"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div></div>
</body></html>

效果图：

(3)常见布局

<!DOCTYPE html>
<html lang="en"><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>Document</title><style>* {padding: 0;margin: 0;}li {list-style: none;}.top {height: 50px;background-color: gray;}.banner {width: 980px;height: 150px;background-color: gray;margin: 10px auto;}.box {width: 980px;height: 300px;background-color: pink;margin: 0 auto;}.box li {float: left;width: 237px;height: 300px;background-color: gray;margin-right: 10px;}.box .one {margin: 0;}.footer {height: 200px;background-color: gray;margin-top: 10px;}</style>
</head><body><div class="top">top</div><div class="banner" banner></div><div class="box"><ul><li>1</li><li>2</li><li>3</li><li class="one">4</li></ul></div><div class="footer">footer</div>
</body></html>

效果图：

2.清除浮动

为什么要清除浮动？
因为浮动后面的标准流盒子会占有浮动盒子的位置，重合叠加到一起显示，造成页面混乱。

1.清除浮动的本质是清除浮动元素脱离标准流照成的影响
注意：原先浮动所设置的特性不会改变浮动还是浮动清除浮动是改变的盒子外的受影响的元素的位置，而不是删除盒子内的浮动特性

2.清除浮动策略是闭合浮动只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

3.方法
3.1 额外标签法（不常用）
用法在最后一个子盒子后面添加一个盒子属性clear:both
div {
clear:both
}
新增的盒子要求必须是块级元素不是行内元素
3.2 清除浮动-父级添加 overflow
在父盒子里面添加属性为 overflow：hidden(最常用)/auto/scroll
缺点：无法显示溢出部分盒子
3.3 清除浮动-after 伪元素法父级
也是针对于父盒子而言
在style里面写
.clearfix:after {
content: “”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
兼顾低版本浏览器
.clearfix {
*zoom: 1;
}
在body里面：
< div class=“clearfix”>…< /div>
3.4 清除浮动-双伪元素清除浮动父级
用法和3.3差不多也是在父盒子里面
.clearfix:before,
.clearfix:after{
content: “”
diaplay: table;
}
.clearfix:after {
clear: both;
}
兼顾低版本浏览器
.clearfix {
*zoom: 1;
}

3.css书写顺序

(1).布局定位属性: display/position/float/clear/visibility/overflow
(2).自身属性: width/height/margin/padding/border/background
(3).文本属性: color/font/text-decoration/text-align/vertical-align/white-space/break-word
(4).其他属性(CSS3)： content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…

三、css定位

1.定位=定位模式（position） + 边偏移（top、left、right、bottom）

定位模式： position:属性

static(默认定位：不常用)
relative(相对定位重要)：
参照自己原来的位置，虽然盒子不在原来位置但原来位置继续占有保留
absolute(绝对定位)：
1.如果没有祖先元素（父元素）或者没有祖先元素定位，则以浏览器为准定位
2.如果父亲有定位，则以参照最近一级的带有定位的父元素的位置
3.不占有原先位置，脱离标准流，飘的比浮动还高
子绝父相
fixed(固定定位)：
1.相对于以浏览器的可视窗口（浏览器变大变小的窗口）
2.跟父元素无关，不随滚动条的滚动而滚动
3.不占有原先位置
如何固定在版心右侧位置
a.走浏览器宽度的一半：left:50%;
b.利用margin走版心盒子宽度的一般（假定版心盒子宽度为800px）：margin-left: 400px;
sticky(粘性定位不常用)：
1.以浏览器可视窗口为参照
2.粘性定位占有原先的位置
3.必须添加top、left、right、bottom其中一个才有效
定位叠放次序 z-index（可以为负）越大就越压住其他盒子值相同按书写次序不能加单位只有定位的才能有的属性

定位的拓展：
设置定位的盒子不能使用margin:auto;水平居中，如何实现可以参照fixed的b点
行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度
块级元素添加绝对定位或者固定定位，如果不给高度和宽度，默认大小是内容大小
浮动的元素不会压住标准流的内容（图片或者文字等），但是定位无论什么内容都会压住

2.案例

<!DOCTYPE html>
<html lang="en"><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>Document</title><style>* {padding: 0;margin: 0;}li {list-style: none;}.promo {position: relative;width: 520px;height: 280px;margin: auto;background-color: pink;}.promo img {width: 520px;height: 280px;}/* 并集选择器 */.prev,.next {/* 绝对定位 */position: absolute;top: 50%;margin-top: -15px;width: 20px;height: 30px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 30px;color: #fff;text-decoration: none;}.prev {left: 0;border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.next {/* 如果一个人盒子有left和right属性则执行left属性 同理 先上后下 */right: 0;border-top-left-radius: 15px;border-bottom-left-radius: 15px;}.promo .promo-nav {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;width: 70px;height: 13px;background: rgba(255, 255, 255, 0.3);border-radius: 7px;}.promo .promo-nav li {float: left;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;margin: 3px;}.promo .promo-nav .selected {background-color: orange;}</style>
</head><body><div class="promo"><img src="-538fb54a73338d52.jpg"><!-- 左侧按钮 --><a href="#" class="prev"> &lt; </a><!-- 右侧按钮 --><a href="#" class="next"> &gt; </a><ul class="promo-nav"><li class="selected"></li><li></li><li></li><li></li><li></li></ul></div>
</body></html>

3.元素的显示与隐藏

（1）dispaly 元素隐藏并且不在占有原来位置
dispaly:none（重点）
dispaly:block 除了转换成块级元素外还有显示元素的意思
（2）visbility 元素隐藏但继续占有原来位置
visible 元素可视
hidden
（3）overflow 溢出有定位的盒子慎用因为我们故意设置了隐藏部分
visible 溢出部分显示
hidden 溢出部分隐藏
scroll 溢出部分显示滚动条不溢出也显示
auto 溢出时才显示滚动条不溢出不显示

四、CSS高级技巧

1.精灵图

把多个小图片放在一个大图里面发送给服务器提高效率
对象：背景图片
借助backgrouned-position:x y;
背景图片向左上移是负值
记住背景图片插入为：

2.字体图标

本质上是字体
下载：阿里iconfont字库

下载解压后命名为fonts
引入：

1.将下载的fonts放在所写页面的根目录下

2.点开上面的demo_index,查看你所下载的文字图标，使用与字体无异。

3.复制字体，粘贴到content引号里，别忘了写字体（之前声明字体）

这是小编的字体声明

@font-face {font-family: 'iconfont';src: url('../fonts/iconfont.eot');src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),url('../fonts/iconfont.woff') format('woff'),url('../fonts/iconfont.ttf') format('truetype'),url('../fonts/iconfont.svg#iconfont') format('svg');font-weight: normal;font-style: normal;font-display: block;
}

3.css三角

小三角
设置盒子属性宽高为0，设置边框border指定上下左右一种颜色其余为透明调整大小是边框大小
.box01 {
width: 0;
height: 0;
为了照顾兼容性
line-height: 0;
font-size: 0;
boeder: 10px solid transparent;
boeder-left-color: pink;
margin: 100px auto;
}

4.鼠标样式&轮廓线

1.鼠标样式
cursor: default 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止
2.轮廓线
outline: none 取消文本框默认的蓝色边框
resize: none 文本域取消放大的功能

5.vertical-align

用于设置一个元素的垂直对齐方式，但只针对行内元素或者行内块元素有效
比如图片+文字默认是基线对齐
display: online-block;
vertical-align: middle/top/bottom/baseline;
可以解决盒子里面的图片与盒子有空白的问题，因为默认是基线对齐

6.溢出文字省略号显示

1.单行文本溢出显示省略号
a、先强制一行内显示文本
white-sapce: nowrap (默认 normal 自动换行)
b、超出部分隐藏
overflow: hidden;
c、文字使用省略号代替超出部分
text-overflow: ellipsis;
2.多行显示省略号
overflow: hidden;
text-overflow: ellipsis;
以下有很大的兼容性问题
弹性伸缩盒子模型显示
display: -webkit-box;
限制在一个块元素显示的文本的行数在第二行显示省略号
-webkit-line-clamp: 2;
设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;

7.常见布局技巧

1.margin负值巧妙运用
先浮动会贴紧再负值后一个盒子的边框会压住第一个盒子就不会出现俩盒子在一起边框加粗的效果了
如何让鼠标经过时改变边框颜色并显示全部的边框
方法1.如果盒子没有相对定位，添加即可(相对定位占位置)
position: relative;
方法2.如果都有定位，让这个盒子位置更高一些
添加z-index: 1;
2.文字环绕浮动元素
文字设置为标准流且在父盒子里100%显示，图片为浮动，则文字不会被图片压住。
3.行内块巧妙运用

<style>* {padding: 0;margin: 0;}.box a {display: inline-block;height: 20px;width: 20px;font-size: 14px; background-color: #fff;border: 1px solid #ccc;text-align: center;text-decoration: none;color: #333;}.box .one {width: 85px;}
</style>
<body><div class="box"><a href="#" class="one">&lt;&lt; 上一页</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#" class="one">&gt;&gt; 下一页</a></div>
</body>

效果图：

4.强化三角

div{width: 0;height: 0;/*把左边和下边的边框宽度设置为0（就会看不见）*/border-bottom: 0 solid bule;border-left: 0 solid green;/*把上边框宽度调大*/border-top: 100px solid transparent;border-right: 50px solid  skyblue;/*简化：    取一个三角形*/border-color: red transparent transparent transparent;border-style: solid;border-width:100px 50px 0 0;
}

8.css初始化

/* 把所有便签内外便签清零 */
* {margin: 0;padding: 0
}/* 设置文字不倾斜 */
em,
i {font-style: normal
}/* 去掉小圆点 */
li {list-style: none
}img {/* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片下面空白的部分 */vertical-align: middle
}/* 鼠标变成小手 */
button {cursor: pointer
}/* 取消链接下划线 */
a {color: #666;text-decoration: none
}a:hover {color: #c81623
}button,
input {/* Unicode编码 "\5B8B\4F53"是宋体 防止汉字会出现乱码 浏览器兼容更好*/font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}body {/* CSS3 防止文字放大有锯齿性 让文字更清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666
}.hide,
.none {display: none
}/* 清除浮动 伪元素法 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}

五、CSS3 && HTML5

1.CSS3

1.1 新增选择器

1.1.1 属性选择器

1.利用属性选择器就可以不借用类选择器和id选择器

<input type="text" value="请输入用户名" class="one">
<input type="text">

属性选择器也有权重类选择器，伪类选择器，属性选择器权重都是10

/*1.  下面意思：必须是input同时具有value属性 选择这个元素 */input[value] {color: pink;}

2.属性选择器还可以选择属性=值得某些元素重点务必掌握

<input type="text" name="" id="">
<input type="password" name="" id="">

/* 2. 只选择type=text属性修改*/input[type=text] {color: blue;}

3.选择属性值开头得某些元素

    <div class="box1">图标1</div><div class="box2">图标2</div><div class="box3">图标3</div><div class="box4">图标4</div><div class="hh">5</div>

/* div是属性选择器 [class^=box]是类选择器 权重之和为11 */
/* 3. 先选择div 然后 具有class属性 并且属性值 必须是box开头的这些元素*/div[class^=box] {color: green;}

4.选择属性值结尾得某些元素

    <section class="icon1-data">.hh一号</section><section class="icon2-data">.hh二号</section><section class="icon3-ico">.hh三号</section>

/* 4. */section[class$=data] {color: red;}

5.任意值

div[class*=“某个字段”]

6.效果图：

1.1.2 伪类选择器(nth-child && after/before)

1.nth-child

    重要；nth-child(n)n可以是数字(1,2,3...) 也可以是关键字(even偶数/odd奇数) 还可以是 公式（2n（偶数）,2n+1（奇数）,5n（5的倍数）,n+5（以5开始顺序）,-n+5（以5开始倒序）nth-child 与 nth-of-type 的区别：nth-child对父元素的所有孩子编号排序，先找到第n个孩子再看类型是否匹配，比如：<section><p>第一</p><div>第二</div><div>第三</div></section>section div :nth-child(1) {backgrouned-color: blue;}它会先选择第一个孩子 p标签 然后去看是否是div标签 结果不是，所以程序不执行而nth-of-type对父元素的指定元素盒子排序编号，比如上面的例子变成：section div :nth-of-type(1) {  background-color: blue;}    则第一个div盒子内容为 第二 变色，它是先去看盒子类型再看后面的，程序执行。

    <ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ul>

li {list-style: none;}/* 1.选择第一个孩子和最后一个孩子 */ul li:first-child {background-color: pink;}/* 2.选择最后一个孩子 */ul li:last-child {background-color: pink;}/* 3.选择第n个孩子 */ul li:nth-child(5) {background-color: skyblue;}ul li:nth-child(2) {background-color: skyblue;}

        /* 关键字 */div ol li:nth-child(even) {background-color: orange;}div ol li:nth-child(odd) {background-color: #ccc;}

    <span><ol><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ol></span>

        /* 公式：()里面只能是n，其他字母没用 从0开始 每次加1 往后面计算 一直最后 */span {display: inline-block;margin-top: 100px;width: 100%;}/* 开始 */span ol li:nth-child(n) {background-color: aqua;}

2. after/before
before 和 after创建一个元素属于行内元素不能直接设置大小
新创建的元素在文档树中找不到所有叫伪元素
语法: div::after {}
before 和 after 必须要有content（内容）属性否则无效
before实在父元素内容前面创建元素 after是在内容后面
伪类选择器和便签选择器一样权重为1

<div>是</div>

        div::before {content: '我';}div::after {content: '.hh';}

效果图：

3.案例

<!DOCTYPE html>
<html lang="en"><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>Document</title><style>@font-face {font-family: 'iconfont';src: url('fonts/iconfont.eot');src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),url('fonts/iconfont.woff') format('woff'),url('fonts/iconfont.ttf') format('truetype'),url('fonts/iconfont.svg#iconfont') format('svg');font-weight: normal;font-style: normal;font-display: block;}* {padding: 0;margin: 0;}div {position: relative;width: 200px;height: 35px;border: 1px solid red;font-family: "iconfont";}div::after {position: absolute;top: 10px;right: 12px;content: '';/* content: '\&#xe624'; 转义后我的不生效*/}</style>
</head><body><div></div>
</body></html>

效果图：

1.2 伪元素清除浮动

在后面添加伪元素

.clearfix::after {  //也可以写成.clearfix:after 照顾低版本浏览器 conment: '';//伪元素必须写的display: block;//插入元素必须是块级height: 0;//不要看见这个元素clear: both;//核心代码清除visibility: hidden;//不要看见这个元素
}

在前面和后面添加伪元素更加牢固

.clearfix::after,.clearfix::before {conment: '';display: table;//伪元素在一行
}
.clearfix::after {clear: both;
}

1.3 盒子模型—— box-sizing

/* 盒子大小=内容+padding+margin+border;  默认为content-box*/box-sizing: content-box;

/* css3属性 盒子模型 盒子最终大小就是指定大小 */box-sizing: border-box;

1.4 其他特性（了解）

1.怎样让图片边模糊
滤镜filter:
# blur是函数括号里面值越大图像越模糊数值要跟单位
filter: blur(5px)
2.calc函数：比盒子小80px 父亲与儿子的相对大小
width: calc(100%-80px);

1.5 过渡（重点）

        div {width: 200px;height: 50px;background-color: pink;/* transition: 要过渡的属性 花费时间 运动曲线 何时开始 *//* 必须要加单位 同时写多个属性注意分割*//* transition: height 0.5s ease 0s, width 0.5s ease 0s; *//* 谁做过渡给谁加 *//* 如果想要多个属性都变化可以写all */transition: all 0.5s;}div:hover {width: 400px;height: 100px;background-color: skyblue;}

1.6 动画

1.动画
（1）定义动画 from to 等价于 0% 100%

@keyframes move {/* 开始状态 */0% {/*沿x轴正方向移动0px*/transform: translateX(0px);}/* 结束状态 */100% {transform: translateX(1000px);}
}

（2）调用

div {width: 200px;height: 200px;background-color: pink;/* 2.调用动画 *//* 动画名称 */animation-name: move;/* 持续时间 */animation-duration: 2s;
}

2.动画序列
（1）可以做多个状态的变化 kryframes 关键帧
（2）里面百分比要是整数
（3）里面百分比就是总的时间(我们案例是10秒) 的划分 25% * 10 = 2.5s 经过了第一个阶段

@keyframes move {0% {transform: translate(0, 0);}25% {transform: translate(1000px, 0);}50% {transform: translate(1000px, 500px);}75% {transform: translate(0, 500px);}100% {transform: translate(0, 0);}
}div {width: 200px;height: 200px;background-color: pink;/* 2.调用动画 *//* 动画名称 */animation-name: move;/* 持续时间 */animation-duration: 10s;
}

3.动画属性

div {width: 200px;height: 200px;background-color: pink;/* 动画名称 */animation-name: move;/* 持续时间 */animation-duration: 2s;/* 运动时间 */animation-timing-function: ease;/* 何时开始 */animation-delay: 1s;/* 重复次数 iteration 重复的 conut 次数 infinite 无限*//* animation-iteration-count: infinite; *//* 是否反方向播放 默认是 normal 如果想就写 alternate *//* animation-direction: alternate; *//* 动画结束后的状态 默认是 backwards 回到起始状态 可以让他停留在结束状态 forwards */animation-fill-mode: forwards;/* 简写 *//* animation: 动画名称 持续时间 运动曲线(匀速) 何时开始 播放次数 是否方向 动画起始或者结束状态; *//* 前两个一定要写 *//* animation: move 2s linear 0s 1 alternate forwards; */
}
div:hover {/* 当鼠标一经过div 就让这个div停止动画 鼠标离开就继续动画 *//* 这个必须要单写 */animation-play-state: paused;
}

4.速度曲线

/* <div>我在世纪佳缘等着你们</div> */
div {overflow: hidden;font-size: 20px;width: 0;height: 30px;background-color: pink;/* 让文字强制一行显示 */white-space: nowrap;/* steps就是分几步完成 有了steps就不要写ease或者linear forwards停留在结束位置 */animation: w 4s steps(10) forwards;
}@keyframes w {0% {width: 0;}100% {width: 200px;}
}

1.7 2D && 3D

1.7.1 2D转换

transform

translate
移动盒子的位置:定位盒子外边距 2d转换移动
用法：
transform: translate(x,y);
1.只要x移动
transform: translate(100px,0);
transform: translateX(100px);
2.只要y移动
transform: translate(0,100px);
transform: translateY(100px);
优点：不会影响其他盒子的位置
缺点：translate对行内标签无效(span)
1.translate括号里面50%是相对于盒子自身的宽度的50%
transform: translate(50%)

rotate 2D旋转
用法：
顺时针旋转45度逆时针就是负值
rotate(45deg);
ps：过渡 transition: all 0.3s;

案例1：

/* 书写三角   */
div {position: relative;width: 249px;height: 35px;border: 1px solid #000;
}div::after {content: '';position: absolute;top: 8px;right: 15px;width: 10px;height: 10px;border-right: 1px solid #000;border-bottom: 1px solid #000;transform: rotate(45deg);transition: all 0.2;
}/* 当鼠标经过div 里面的三角旋转 */
div:hover::after {transform: rotate(225deg);
}/* 案例2:旋转替换盒子 */
div {overflow: hidden;width: 200px;height: 200px;border: 1px solid #000;margin: 100px auto;
}div::before {content: "黑马";/* 伪元素是行内元素不能设置大小 */display: block;width: 100%;height: 100%;background-color: pink;transform: rotate(180deg);transition: all 0.4s;
}/* 鼠标一经过div 里面的before复原 */
div:hover::after {transform: rotate(0deg);
}/* 案例3: 多个图片放大 */
div {overflow: hidden;float: left;margin: 10px;
}div img {transition: all .4s;
}div img:hover {transform: scale(1.1);
}/* 案例4：分页按钮 *//* body里面有1个ul 6个li */
li {float: left;width: 30px;height: 30px;border: 1px solid #000;margin: 10px;text-align: center;line-height: 30px;border-radius: 50%;/* 鼠标经过变成小手 */cursor: pointer;transition: all .4s;
}li:hover {transform: scale(1.2);
}

transform-origin: x y; 以什么位置做旋转
1.可以跟方位词
transform-origin: left bottom;
2.默认是50% 50% 等价于 center center
3.可以是像素 px px

scale 2D转换缩放逗号隔开值
1.里面写数字不跟单位就是倍数的意思 1就是1倍 2就是2倍
transform: scale(x,y);
transform: scale(2,2);
2.修改了宽度是原来的2倍高度不变
transform: scale(2,1);
3.等比例缩放同时修改宽度和高度简单的方法
以下是宽度修改了两倍高度是默认的和第一个参数一样
transform: scale(2);
4.缩小小于1就是缩小
transform: scale(0.5);
优点：不会影响其他盒子的位置而且可以设置缩放的中心

案例2

<!DOCTYPE html>
<html lang="en"><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>Document</title><style>.box {position: relative;width: 500px;height: 500px;margin: 100px auto;background-color: rgba(58, 57, 57, 0.872);}.city {position: absolute;top: 50%;right: 50%;color: #fff;}.tb {top: 192px;right: 185px;}.dotted {width: 8px;height: 8px;background-color: #09f;border-radius: 50%;}.box div[class^="pulse"] {/* 三个pulse是块级元素 会压在一起 所有用绝对定位不占据位置 *//* 保证我们的小波纹在父盒子里面水平垂直居中 放大之后就会在中心向四周发散 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 8px;height: 8px;/* 阴影: 水平 垂直 阴影 颜色 */box-shadow: 0 0 12px #009dfd;border-radius: 50%;/* 过程时间 匀速 循环 */animation: pulse 1.2s linear infinite;}/* 时间差 */.pulse2 {animation-delay: 0.4s !important;}.pulse3 {animation-delay: 0.8s !important;}@keyframes pulse {0% {}70% {/* transform: scale(5); 我们不要用scale 因为它会让阴影变大 */width: 40px;height: 40px;/* 透明度 */opacity: 1;}100% {width: 70px;height: 70px;opacity: 0;}}</style>
</head><body><div class="box"><div class="city"><div class="dotted"></div><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div><div class="city tb"><div class="dotted"></div><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div></div>
</body></html>

效果图：

1.7.2 3D转换

        body {/* 透视：perspective 如果想要3D效果就需要透视 近大远小 *//* 透视写在被观察元素的父元素中 */perspective: 200px;}div {width: 200px;height: 200px;background-color: pink;transform: translateX(100px) translateY(100px) translateZ(100px);/*1.transformZ 沿着Z轴移动2.transformZ 后面跟单位一般为 px3.transformZ(100px) 向外移动100px*//*4. 简写 *//* transform: translate3d(100px,100px,100px); *//* 5.xyz不能省略 如果没有就写0 *//* transform: translate3d(0, 100px, 100px); *//* 透视：perspective 如果想要3D效果就需要透视 近大远小 */}

案例1——开启3D空间

<!DOCTYPE html>
<html lang="en"><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>Document</title><style>body {perspective: 500px;}.box {position: relative;width: 200px;height: 200px;margin: 100px auto;transition: all 1s;/* 让子元素保持3d状态空间 非常重要*/transform-style: preserve-3d;}.box:hover {transform: rotateY(45deg);}.box div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: pink;}.box div:last-child {background-color: blueviolet;transform: rotateX(60deg);}</style>
</head><body><div class="box"><div></div><div></div></div>
</body></html>

效果图：

案例2——翻转

<!DOCTYPE html>
<html lang="en"><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>Document</title><style>body {perspective: 500px;}.box {position: relative;width: 300px;height: 300px;margin: 100px auto;perspective: 500px;transition: all .4s;/* 让背面的紫色盒子保留立体效果 */transform-style: preserve-3d;}.box:hover {transform: rotateY(180deg);}.front,.back {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;font-size: 30px;color: #fff;text-align: center;line-height: 300px;}.box .front {background-color: pink;transform: translateZ(1px);}.box .back {background-color: blueviolet;/* 像手机背靠背贴着 */transform: rotateY(180deg);}</style>
</head><body><div class="box"><div class="front">我是小猪猪</div><div class="back">你是小花猪</div></div>
</body></html>

效果图：

案例3——翻转导航栏

<!DOCTYPE html>
<html lang="en"><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>ul {margin: 100px;}ul li {width: 120px;height: 35px;list-style: none;/* 给box也要翻转所有要透视 */perspective: 500px;}.box {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transition: all .5s;}.box:hover {transform: rotateX(90deg);}.front,.bottom {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.front {background-color: pink;z-index: 1;transform: translateZ(17.5px);}.bottom {background-color: blueviolet;/* 必须先移动再旋转 而且不能重新写transform 因为会覆盖属性 */transform: translateY(17.5px) rotateX(-90deg);}</style>
</head><body><ul><li><div class="box"><div class="front">我是小猪猪</div><div class="bottom">你是小花猪</div></div></li></ul>
</body></html>

效果图：

案例4——旋转木马

<!DOCTYPE html>
<html lang="en"><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>Document</title><style>body {perspective: 800px;}section {width: 200px;height: 200px;margin: 400px auto;transform-style: preserve-3d;/* 添加动画 */animation: rotate 6s linear infinite;background: url(图片1.png) no-repeat;}section:hover {animation-play-state: paused;}@keyframes rotate {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}section div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(图片1.png) no-repeat;}section div:nth-child(1) {transform: translateZ(300px);}section div:nth-child(2) {/* 先旋转再移动 */transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) {transform: rotateY(120deg) translateZ(300px);}section div:nth-child(4) {transform: rotateY(180deg) translateZ(300px);}section div:nth-child(5) {transform: rotateY(240deg) translateZ(300px);}section div:nth-child(6) {transform: rotateY(300deg) translateZ(300px);}</style>
</head><body><section><div></div><div></div><div></div><div></div><div></div><div></div></section>
</body></html>

效果图：

1.8 浏览器私有前缀

-moz-:代表firefox浏览器私有属性
-ms-：代表ie浏览器私有属性
-webkit：代表safari、chrome私有属性
-o-：代表opera私有属性

提倡写法比如：
-moz-border-radius:10px;

2.HTML5

2.1 语义化标签

 <header>头部标签</header><nav>导航标签</nav><article>内容标签</article><section>定义文档某个区域</section><aside>侧边栏标签</aside><footer>尾部标签</footer>

2.2 多媒体标签

video 视频 mp4更兼容
属性        值           描述
autopaly   autopaly     视频就绪自动播放(但是浏览器一般禁用此功能)
controls    controls    向用户显示播放按钮（一般不写，用js写）
width       px          设置视频宽度
height      px           设置视频高度
loop        loop          循环播放
preload     auto/none     是否预先加载（如果有了autopaly就忽略该属性
src         url           视频url地址
poster      imgurl        加载等待动画图片
muted       muted         静音播放

    <video src="2023-03-31 16-16-53.mp4" autopaly="autopaly" controls="controls" loop="loop"poster="bige_1006190817_22199.png" muted="muted"></video>

audio 音频 mp3更兼容属性          值             描述autoplay    autoplay       自动播放controls    controls    向用户显示播放按钮loop        loop          循环播放src         url           视频url地址

    <audio src="吴昱翰 - 如果我不是我.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>

2.3 input新增属性

验证时必须添加form表单域

    <form><ul><li>邮箱：<input type="email"></li><li>网址：<input type="url"></li><li>日期：<input type="date"></li><li>日期：<input type="time"></li><li>数量：<input type="number"></li><li>手机号码：<input type="tel"></li><li>搜索：<input type="search"></li><li>颜色：<input type="color"></li><!-- 当我们选择 提交 按钮就可以验证表单格式是否正确 --><li><input type="submit"></li></ul></form>

属性               值           说明
required        required     表单拥有该属性必须填写，不能为空
autofocus      autofocus     自动聚焦到指定表单元素
placeholder     提示文本      表单的提示信息，存在值时将不在显示
aotocomplete     off/on      浏览器基于之前输入过的值进行保留，下一次输入值时提示该字段（一般不用，不安全）
multiple        multiple     可以选择多个文件提交

    <form action=""><input type="search" name="sear" id="" required="required" placeholder=".hh" autofocus="autofocus"autoconmplete="off"><input type="file" name="" id="" multiple="multiple"><input type="submit" value="提交"></form>

六、品优购项目

交代：
base.css 是初始化css，common.css是公共样式，index.css是主页样式，list.css是列表样式，register.css是注册页面样式。同理.html文件一样意思。

1. css初始化

base.css

/* 把所有便签内外便签清零 */
* {margin: 0;padding: 0;/* css3盒子模型 */box-sizing: border-box;
}/* 设置文字不倾斜 */
em,
i {font-style: normal;
}/* 去掉小圆点 */
li {list-style: none;
}img {/* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片下面空白的部分 */vertical-align: middle;
}/* 鼠标变成小手 */
button {cursor: pointer;
}/* 取消链接下划线 */
a {color: #666;text-decoration: none;
}a:hover {color: #c81623;
}button,
input {/* Unicode编码 "\5B8B\4F53"是宋体 防止汉字会出现乱码 浏览器兼容更好*/font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;/* 默认有灰色边框需要手动去掉 */border: 0px;outline: none;
}body {/* CSS3 防止文字放大有锯齿性 让文字更清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666;
}.hide,
.none {display: none;
}/* 清除浮动 伪元素法 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1;
}

2. 公共样式

common.css

/* 声明字体图标 这里一定要注意路径的变化 */
@font-face {font-family: 'iconfont';src: url('../fonts/iconfont.eot');src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),url('../fonts/iconfont.woff') format('woff'),url('../fonts/iconfont.ttf') format('truetype'),url('../fonts/iconfont.svg#iconfont') format('svg');font-weight: normal;font-style: normal;font-display: block;
}/* 版心 */
.w {width: 1200px;margin: 0 auto;
}.f1 {float: left;
}.fr {float: right;
}.style_red {color: #c81623;
}/* 快捷导航模块 */
.shortcut {height: 31px;line-height: 31px;background-color: #f1f1f1;
}.shortcut ul li {float: left;
}/* 选择所有偶数的小li */
.shortcut .fr ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 9px 15px 0;
}/* 伪元素 */
.arrow-icon::after {content: '';font-family: 'iconfont';margin-left: 6px;
}.header {position: relative;height: 150px;
}.logo {position: absolute;top: 25px;width: 171px;height: 61px;
}.logo a {display: block;width: 171px;height: 61px;background: url(../images/logo1.png);/* 让文字隐藏 *//* 京东的做法 */font-size: 0px;/* 淘宝的做法 */text-indent: -9999px;overflow: hidden;
}.search {position: absolute;left: 346px;top: 25px;width: 538px;height: 36px;border: 2px solid #b1191a;
}.search input {float: left;width: 454px;height: 32px;padding-left: 10px;
}.search button {float: left;width: 80px;height: 32px;background-color: #b1191a;color: #fff;
}.hotwords {position: absolute;top: 66px;left: 346px;
}.hotwords a {margin: 0 10px;
}.shopcar {position: absolute;right: 60px;top: 25px;width: 140px;height: 35px;background-color: #f7f7f7f7;border: 1px solid #dfdfdf;text-align: center;line-height: 35px;
}.shopcar::before {content: '';font-family: 'iconfont';margin-right: 5px;color: #b1191a;
}.shopcar::after {content: '';font-family: 'iconfont';margin-left: 10px;
}.count {position: absolute;top: -5px;left: 105px;height: 14px;line-height: 14px;color: #fff;background-color: #e60012;padding: 0 5px;border-radius: 7px 7px 7px 0;
}.nav {height: 47px;border-bottom: 2px solid #b1191a;
}.nav .dropdown {float: left;width: 210px;height: 45px;background-color: #b1191a;
}.nav .navitems {float: left;
}.dropdown .dt {width: 100%;height: 100%;color: #fff;text-align: center;line-height: 45px;font-size: 16px;
}.dropdown .dd {width: 210px;height: 465px;background-color: #c81623;margin-top: 2px;
}.dropdown .dd ul li {position: relative;height: 31px;line-height: 31px;margin-left: 2px;padding-left: 10px;
}.dropdown .dd ul li:hover {background-color: #fff;
}.dropdown .dd ul li:hover a {color: #c81623;
}.dropdown .dd ul li a {font-size: 14px;color: #fff;
}.dropdown .dd ul li::after {position: absolute;top: 1px;right: 10px;content: '';font-family: 'iconfont';font-size: 14px;color: #fff;
}.navitems ul li {float: left;
}.navitems ul li a {display: block;height: 45px;line-height: 45px;font-size: 15px;padding: 0 25px;
}.footer {height: 415px;background-color: #f5f5f5;padding-top: 30px;
}.mod_service {height: 80px;border-bottom: 1px solid #ccc;
}.mod_service ul li {float: left;width: 300px;height: 50px;padding-left: 15px;
}.mod_service ul li h5 {float: left;width: 50px;height: 50px;background: url(../images/icons.png) no-repeat -252px -2px;margin-right: 8px;
}.service_txt h4 {font-size: 14px;
}.service_txt p {font-size: 12px;
}.mod_help {height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;
}.mod_help dl {float: left;width: 200px;
}.mod_help dl:last-child {width: 90px;text-align: center;
}.mod_help dl dt {font-size: 16px;margin-bottom: 10px;
}.mod_copright {text-align: center;padding-top: 20px;
}.links {margin-bottom: 15px;
}.links a {margin: 0 3px;
}.copright {line-height: 20px;
}

3. 主页面

index.html文件

<!DOCTYPE html>
<html lang="zh-CH"><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><!-- 网站说明 --><meta name="description"content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万换个品牌优质商品。便捷、诚信的服务，为您提供预约的网上购物体验！" /><!-- 关键字 --><meta name="keywords" content="手机、电脑、家电"><!-- 引入网页最上面图标 --><link rel="shottcut icon" href="favicon.ico"><!-- 引入初始化css --><link rel="stylesheet" href="css/base.css"><!-- 引入公共界面 --><link rel="stylesheet" href="css/common.css"><!-- 引入index.css文件 --><link rel="stylesheet" href="css/index.css">
</head><body><!-- 快捷导航模块 start--><section class="shortcut"><div class="w"><div class="f1"><ul><li>品优购欢迎您！&nbsp;</li><li><a href="">请登录</a> &nbsp; <a href="register.html" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注品优购</li><li></li><li class="arrow-icon">客户服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div></div></section><!-- 快捷导航模块 end--><!-- header 头部模块制作 start    --><header class="header w"><!-- logo 模块 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- search搜素模块 --><div class="search"><input type="search" name="" id="" placeholder="代码搜索"><button>搜索</button></div><!-- hotwords模块 --><div class="hotwords"><a href="#" class="style_red">优惠购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">美满99减30</a><a href="#">办公用品</a><a href="#">电脑</a><a href="#">通信</a></div><!-- 购物车模块 --><div class="shopcar">我的购物车<i class="count">8</i></div></header><!-- header 头部模块制作 end    --><!-- nav模块 start --><nav class="nav"><div class="w"><div class="dropdown"><div class="dt">全部商品分类</div><div class="dd"><ul><li><a href="#">家用电器</a></li><li><a href="list.html">手机</a>、<a href="#">数码</a>、<a href="#">通信</a></li><li><a href="#">电脑</a>、<a href="#">办公</a></li><li><a href="#">家居</a>、<a href="#">家具</a>、<a href="#">家装</a>、<a href="#">厨具</a></li><li><a href="#">男装、女装、童装、内衣</a></li><li><a href="#">个户化妆、清洁用品、宠物</a></li><li><a href="#">鞋靴、箱包、珠宝、奢侈品</a></li><li><a href="#">运动户外、钟表</a></li><li><a href="#">汽车、汽车用品</a></li><li><a href="#">母婴、玩具乐器</a></li><li><a href="#">食品、酒类、生鲜、特产</a></li><li><a href="#">医药保健</a></li><li><a href="#">图书、音像、电子书</a></li><li><a href="#">彩票、旅行、充值、票务</a></li><li><a href="#">理财、众筹、白条、保险</a></li></ul></div></div><div class="navitems"><ul><li><a href="#">服装城</a></li><li><a href="#">美妆馆</a></li><li><a href="#">传智超市</a></li><li><a href="#">全球购</a></li><li><a href="#">闪购</a></li><li><a href="#">团购</a></li><li><a href="#">拍卖</a></li><li><a href="#">有趣</a></li></ul></div></div></nav><!-- nav 模块 end --><!-- 首页专业模块 main start --><div class="w"><div class="main"><div class="focus"><ul><li><img src="upload/focus1.jpg" alt=""></li></ul></div><div class="newflash"><div class="news"><div class="new-hd"><h5>品优购快报</h5><a href="#" class="more">更多</a></div><div class="new-bd"><ul><li><a href=""><strong>【特惠】</strong>爆款耳机5折秒！</a></li><li><a href=""><strong>【特惠】</strong>母亲节，健康好礼低至5折！</a></li><li><a href=""><strong>【特惠】</strong>爆款耳机5折秒！</a></li><li><a href=""><strong>【特惠】</strong>9.9元洗100张照片！</a></li><li><a href=""><strong>【特惠】</strong>长虹智能空调立省1000</a></li></ul></div></div><div class="lifeservice"><ul><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li></ul></div><div class="bargain"><img src="upload/bargain.jpg" alt=""></div></div></div></div><!-- 首页专业模块 main end --><!-- 推荐模块 start --><div class="w recom"><div class="recom_hd"><img src="images/clock.png" alt=""><h3>今日推荐</h3></div><div class="recom_bd"><ul><li><img src="upload/pic.jpg" alt=""></li><li><img src="upload/pic.jpg" alt=""></li><li><img src="upload/pic.jpg" alt=""></li><li><img src="upload/pic.jpg" alt=""></li></ul></div></div><!-- 推荐模块 end --><!-- 楼层区制作 start--><div class="floor"><!-- 1楼家用电器楼层 --><div class="w jiadian"><div class="box_hd"><h3>家用电器</h3><div class="tab_list"><ul><li><a href="" class="style_red">热门</a> | </li><li><a href="">大家电</a> | </li><li><a href="">生活电器</a> | </li><li><a href="">厨房电器</a> | </li><li><a href="">个护健康</a> | </li><li><a href="">应季电器</a> | </li><li><a href="">空气/净水</a> | </li><li><a href="">新奇特</a> | </li><li><a href="">高端电器</a> </li></ul></div></div><div class="box_bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><ul><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><a href="#"><img src="upload/floor-1-1.png" alt=""></a></div><div class="col_329"><a href="#"><img src="upload/floor-1-b01.png" alt=""></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/floor-1-2.png" alt=""></a><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div><div class="col_221"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div><div class="col_219"><a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></div></div></div></div><!-- 2楼家用手机楼层 --><div class="w shouji"><div class="box_hd"><h3>手机通讯</h3><div class="tab_list"><ul><li><a href="" class="style_red">热门</a> | </li><li><a href="">大家电</a> | </li><li><a href="">生活电器</a> | </li><li><a href="">厨房电器</a> | </li><li><a href="">个护健康</a> | </li><li><a href="">应季电器</a> | </li><li><a href="">空气/净水</a> | </li><li><a href="">新奇特</a> | </li><li><a href="">高端电器</a> </li></ul></div></div><div class="box_bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><ul><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><a href="#"><img src="upload/floor-1-1.png" alt=""></a></div><div class="col_329"><a href="#"><img src="upload/floor-1-b01.png" alt=""></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/floor-1-2.png" alt=""></a><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div><div class="col_221"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div><div class="col_219"><a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></div></div></div></div></div><!-- 楼层区制作 end--><!-- footer 底部模块 start--><footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li></ul></div><div class="mod_help"><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>帮助中心</dt><dd><img src="images/wx_cz.jpg" alt="">品优购客户端</dd></dl></div><div class="mod_copright"><div class="links"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="">联系客服</a> | <a href="">商家入驻</a> | <ahref="">营销中心</a> | <a href="">手机品优购</a> | <a href="">友情链接</a> | <a href="">销售联盟</a> | <ahref="">品优购社区</a> | <a href="">品优购公益</a> | <a href="">English Site</a> | <a href="">ContactU</a></div><div class="copright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- footer 底部模块 end --></body></html>

index.css文件

@font-face {font-family: 'iconfont';src: url('../fonts/iconfont.eot');src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),url('../fonts/iconfont.woff') format('woff'),url('../fonts/iconfont.ttf') format('truetype'),url('../fonts/iconfont.svg#iconfont') format('svg');font-weight: normal;font-style: normal;font-display: block;
}/* 首页专业模块 */
.main {width: 980px;height: 455px;margin-left: 220px;margin-top: 10px;
}.focus {float: left;width: 721px;height: 455px;background-color: blueviolet;
}.newflash {float: right;width: 250px;height: 455px;
}.news {height: 165px;border: 1px solid #e4e4e4;
}.new-hd {height: 33px;line-height: 33px;border-bottom: 1px dotted #e4e4e4;padding: 0 15px;
}.new-hd h5 {float: left;font-size: 14px;
}.new-hd .more {float: right;
}.new-hd .more::after {content: '';font-family: 'iconfont';}.new-bd {padding: 5px 15px 0;
}.new-bd ul li {height: 24px;line-height: 24px;/* 文字超出一行省略号显示 */overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}.lifeservice {height: 209px;border: 1px solid #e4e4e4;border-top: 0;overflow: hidden;
}.lifeservice ul {width: 252px;
}.lifeservice ul li {float: left;width: 63px;height: 71px;border-right: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;text-align: center;}.lifeservice ul li i {display: inline-block;width: 24px;height: 28px;background-color: pink;margin-top: 12px;background: url(../images/icons.png) no-repeat -19px -15px;
}.bargain {margin-top: 5px;
}/* 推荐模块 */
.recom {height: 163px;margin-top: 12px;background-color: #ebebeb;
}.recom_hd {float: left;height: 163px;width: 205px;background-color: #5c5251;text-align: center;padding-top: 30px;}.recom_hd h3 {margin-top: 10px;font-size: 20px;color: #fff;
}.recom_bd {float: left;
}.recom_bd ul li {position: relative;line-height: 163px;float: left;
}.recom_bd ul li img {width: 248px;height: 163px;
}.recom_bd ul li:nth-child(-n+3)::after {content: '';position: absolute;right: 0;top: 10px;width: 1px;height: 145px;background-color: #ddd;}/* 家用电器 */
.box_hd {height: 30px;border-bottom: 2px solid #c81623;
}.box_hd h3 {float: left;font-size: 18px;color: #c81623;font-weight: 400;
}.tab_list {float: right;line-height: 30px;
}.tab_list ul li {float: left;
}.tab_list ul li a {margin: 0 15px;
}.floor .w {margin-top: 30px;
}.box_bd {height: 361px;
}.tab_list_item>div {float: left;height: 361px;
}.col_210 {width: 210px;text-align: center;
}.col_210 ul {padding-left: 12px;
}.col_210 ul li {float: left;width: 85px;height: 34px;border-bottom: 1px solid #ccc;text-align: center;line-height: 33px;margin-right: 10px;
}.col_329 {width: 329px;
}.col_221 {width: 221px;border-right: 1px solid #ccc;
}.col_219 {width: 219px;
}.bb {/* 一般情况下，a如果包含有宽度的盒子，a需要转换成块级元素 */display: block;border-bottom: 1px solid #ccc;
}

4. 列表页面

list.html

<!DOCTYPE html>
<html lang="en"><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><!-- 网站说明 --><meta name="description"content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万换个品牌优质商品。便捷、诚信的服务，为您提供预约的网上购物体验！" /><!-- 关键字 --><meta name="keywords" content="手机、电脑、家电"><!-- 引入网页最上面图标 --><link rel="shottcut icon" href="favicon.ico"><!-- 引入初始化css --><link rel="stylesheet" href="css/base.css"><!-- 引入公共界面 --><link rel="stylesheet" href="css/common.css"><!-- 引入列表页的css --><link rel="stylesheet" href="css/list.css">
</head><body><!-- 快捷导航模块 start--><section class="shortcut"><div class="w"><div class="f1"><ul><li>品优购欢迎您！&nbsp;</li><li><a href="">请登录</a> &nbsp; <a href="" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注品优购</li><li></li><li class="arrow-icon">客户服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div></div></section><!-- 快捷导航模块 end--><!-- header 头部模块制作 start    --><header class="header w"><!-- logo 模块 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- 列表页的秒杀模块 --><div class="sk"><img src="images/sk.png" alt=""></div><!-- search搜素模块 --><div class="search"><input type="search" name="" id="" placeholder="代码搜索"><button>搜索</button></div><!-- hotwords模块 --><div class="hotwords"><a href="#" class="style_red">优惠购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">美满99减30</a><a href="#">办公用品</a><a href="#">电脑</a><a href="#">通信</a></div><!-- 购物车模块 --><div class="shopcar">我的购物车<i class="count">8</i></div></header><!-- header 头部模块制作 end    --><!-- nav模块 start --><nav class="nav"><div class="w"><div class="sk_list"><ul><li><a href="#">品优秒杀</a></li><li><a href="#">即将售罄</a></li><li><a href="#">超值低价</a></li></ul></div><div class="sk_con"><ul><li><a href="#">女装</a></li><li><a href="#" class="style_red">女鞋</a></li><li><a href="#">男装</a></li><li><a href="#">男鞋</a></li><li><a href="#">母婴童装</a></li><li><a href="#">食品</a></li><li><a href="#">智能数码</a></li><li><a href="#">运动户外</a></li><li><a href="#">更多分类</a></li></ul></div></div></nav><!-- nav 模块 end --><!-- 列表页主体部分 start --><div class="w sk_container"><div class="sk_hd"><img src="images/bg_03.png" alt=""></div><div class="sk_bd"><ul class="clearfix"><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li><li><img src="upload/list.jpg" alt=""></li></ul></div></div><!-- 列表页主体部分 end --><!-- footer 底部模块 start--><footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li></ul></div><div class="mod_help"><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>帮助中心</dt><dd><img src="images/wx_cz.jpg" alt="">品优购客户端</dd></dl></div><div class="mod_copright"><div class="links"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="">联系客服</a> | <a href="">商家入驻</a> | <ahref="">营销中心</a> | <a href="">手机品优购</a> | <a href="">友情链接</a> | <a href="">销售联盟</a> | <ahref="">品优购社区</a> | <a href="">品优购公益</a> | <a href="">English Site</a> | <a href="">ContactU</a></div><div class="copright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- footer 底部模块 end -->
</body></html>

list.css

/* 列表页专有的样式css */
@font-face {font-family: 'iconfont';src: url('../fonts/iconfont.eot');src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),url('../fonts/iconfont.woff') format('woff'),url('../fonts/iconfont.ttf') format('truetype'),url('../fonts/iconfont.svg#iconfont') format('svg');font-weight: normal;font-style: normal;font-display: block;
}.nav {overflow: hidden;
}.sk {position: absolute;left: 190px;top: 40px;border-left: 1px solid #c81523;padding: 3px 0 0 14px;
}.sk_list {float: left;
}.sk_list ul li {float: left;
}.sk_list ul li a {display: block;line-height: 47px;padding: 0 30px;font-size: 16px;font-weight: 700;color: #000;
}.sk_con {float: left;
}.sk_con ul li {float: left;
}.sk_con ul li a {display: block;line-height: 49px;padding: 0 20px;font-size: 14px;
}.sk_con ul li:last-child a::after {content: '';font-family: 'iconfont';
}.sk_bd ul li {overflow: hidden;float: left;width: 290px;height: 460px;border-bottom: 1px solid transparent;}.sk_bd ul li:nth-child(4n) {margin-right: 0;
}.sk_bd ul li:hover {border-bottom: 1px solid #c81523;
}

5. 注册页面

<!DOCTYPE html>
<html lang="en"><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><!-- 引入网页最上面图标 --><link rel="shottcut icon" href="favicon.ico"><!-- 引入初始化css --><link rel="stylesheet" href="css/base.css"><!-- 引入我自己的注册页面的css --><link rel="stylesheet" href="css/register.css">
</head><body><div class="w"><header><div class="logo"><a href="index.html"> <img src="images/logo1.png" alt=""></a></div></header><div class="registerarea"><h3>注册新用户<div class="login">我有账户，去<a href="#">登录</a></div></h3><div class="reg_form"><form action=""><ul><li><lable>手机号：</lable><input type="text" class="inp"><span class="error"><i class="error_icon"></i> 手机号格式错误，请重新输入！</span></li><li><lable>短信验证码：</lable><input type="text" class="inp"><span class="success"><i class="success_icon"></i> 短信验证码输入正确</span></li><li><lable>登录密码：</lable><input type="password" class="inp"><span class="error"><i class="error_icon"></i> 手机号格式错误，请重新输入！</span></li><li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em></li><li><lable>确认密码：</lable><input type="password" class="inp"><span class="error"><i class="error_icon"></i> 手机号格式错误，请重新输入！</span></li><li class="agree"><input type="checkbox" name="" id="">同意协议并注册<a>《品优购用户协议》</a></li><li><input type="submit" value="完成注册" class="btn"></li></ul></form></div></div><div class="footer"><div class="mod_copright"><div class="links"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="">联系客服</a> | <a href="">商家入驻</a> | <ahref="">营销中心</a> | <a href="">手机品优购</a> | <a href="">友情链接</a> | <a href="">销售联盟</a> | <ahref="">品优购社区</a> | <a href="">品优购公益</a> | <a href="">English Site</a> | <a href="">ContactU</a></div><div class="copright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div>
</body></html>

.w {width: 1200px;margin: 0 auto;}header {height: 84px;border-bottom: 1px solid #c81523;
}.logo {padding-top: 18px;
}.registerarea {height: 522px;border: 1px solid #ccc;margin-top: 20px;
}.registerarea h3 {height: 42px;border-bottom: 1px solid #ccc;background-color: #ececec;line-height: 42px;padding: 0 18px;font-size: 18px;font-weight: 400;}.login {float: right;font-size: 14px;
}.login a {color: #c81523;
}.reg_form {width: 600px;margin: 50px auto 0;
}.reg_form ul li {margin-bottom: 20px;
}.reg_form ul li lable {display: inline-block;width: 88px;text-align: right;
}.reg_form ul li .inp {width: 242px;height: 37px;border: 1px solid #ccc;
}.error {color: #c81523;
}.error_icon,
.success_icon {display: inline-block;vertical-align: middle;width: 20px;height: 20px;background: url(../images/error.png) no-repeat;margin-top: -2px;
}.success {color: green;
}.success_icon {background: url(../images/success.png) no-repeat;
}.safe {padding-left: 170px;
}.safe em {padding: 0 12px;color: #fff;
}.ruo {background-color: #de1111;
}.zhong {background-color: #40b83f;
}.qiang {background-color: #f79100;
}.agree {padding-left: 95px;
}.agree input {vertical-align: middle;
}.agree a {color: #1ba1e6;
}.btn {width: 200px;height: 34px;background-color: #c81523;font-size: 14px;color: #fff;margin: 30px 0 0 70px;
}.mod_copright {text-align: center;padding-top: 20px;
}.links {margin-bottom: 15px;
}.links a {margin: 0 3px;
}.copright {line-height: 20px;
}

效果图：

主页

列表页：

注册页

静态pc端页面，你一定用得上的技巧相关推荐

PC端页面调用QQ聊天 - 封装篇
PC端页面调用QQ聊天 - 封装篇今天收到网页留言,说因为兼容性的问题,他提供了有新的调用QQ代码的方式. 这里苏查了一下别人的源码,研究学习了一下.剥离贴出来,供大家参考学习. 来自用户tyj10 ...
oracle里子连接查询,pc端页面滚动到底部加载更多数据......
场景:pc端页面鼠标滚动到底部时,通过ajax加载更多的数据,实现分页功能,封装成了一个函数,自己根据实际情况调用即可. 说明:discussList是放加载内容的div容器 // 加载更多评价的函数 ...
手机端与pc端页面html5,浅谈pc和移动端的响应式的使用
身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 自适应是最早 ...
PC端页面在手机端完整显示
PC端页面在手机端完整显示页面最后生效的是最后加载的,通过$.load加载的页面内的<meta name="viewport">会覆盖父页面的<meta nam ...
pc端页面在移动端等比例缩放
pc端页面在移动端等比例缩放两步: 1.替换head标签内 name="viewport"的 meta标签  <met ...
PC端页面适应不同的分辨率的方法
上周完成一个PC端的项目,对于我这样的小白来说,这个项目里面最大的问题就是,如何做到让HTML页面适应电脑的不同分辨率. 通过师傅的指导和自己查阅资料,最终成功适配不同的分辨率,完成了这个项目. 现在 ...
一段代码把PC端页面适配手机端
在PC端的代码中加入这段代码,及实现手机端页面的自适应,是个人目前觉得最好用的方法! <script type="text/javascript"> ...
PC端页面适配px转rem
rem是相对长度单位,页面布局需要在不同比例的pc端显示同样大小的页面,不希望在分辨率比较高的屏幕上页面就很小. 一般设计稿都是px单位,在开发的时候也会用到px单位.如果在开发前,可以利用vscod ...
移动端与PC端页面布局区别
视口视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种 ...

静态pc端页面，你一定用得上的技巧

目录

一、CSS盒子布局

1. 内边距 padding

2.外边距 margin

3.案例

4.边框形状

5.阴影

二、浮动

1.浮动特性

2.清除浮动

3.css书写顺序

三、css定位

1.定位=定位模式（position） + 边偏移（top、left、right、bottom）

2.案例

3.元素的显示与隐藏

四、CSS高级技巧

1.精灵图

2.字体图标

3.css三角

4.鼠标样式&轮廓线

5.vertical-align

6.溢出文字省略号显示

7.常见布局技巧

8.css初始化

五、CSS3 && HTML5

1.CSS3

1.1 新增选择器

1.1.1 属性选择器

1.1.2 伪类选择器(nth-child && after/before)

1.2 伪元素清除浮动

1.3 盒子模型—— box-sizing

1.4 其他特性（了解）

1.5 过渡（重点）

1.6 动画

1.7 2D && 3D

1.7.1 2D转换

1.7.2 3D转换

1.8 浏览器私有前缀

2.HTML5

2.1 语义化标签

2.2 多媒体标签

2.3 input新增属性

六、品优购项目

1. css初始化

2. 公共样式

3. 主页面

4. 列表页面

5. 注册页面

静态pc端页面，你一定用得上的技巧相关推荐

最新文章

热门文章