静态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. 注册页面
一、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">1div>
<div class="two">2div>
我给他们分别设置一个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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>1li>
<li>2li>
<li>3li>
<li class="one">4li>
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>Documenttitle>
<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>1div>
<div>2div>
<div>3div>
<div>4div>
<div>5div>
<div>6div>
<div>7div>
<div>8div>
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>Documenttitle>
<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">topdiv>
<div class="banner" banner>div>
<div class="box">
<ul>
<li>1li>
<li>2li>
<li>3li>
<li class="one">4li>
ul>
div>
<div class="footer">footerdiv>
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>Documenttitle>
<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"> < a>
<a href="#" class="next"> > 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.行内块巧妙运用
效果图：
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">图标1div>
<div class="box2">图标2div>
<div class="box3">图标3div>
<div class="box4">图标4div>
<div class="hh">5div>
/* 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 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>Documenttitle>
<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: '\'; 转义后我的不生效*/
}
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 {
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>Documenttitle>
<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 后面跟单位一般为 px
3.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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
head>
<body>
<section class="shortcut">
<div class="w">
<div class="f1">
<ul>
<li>品优购欢迎您！ li>
<li><a href="">请登录a> <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>
<header class="header w">
<div class="logo">
<h1>
<a href="index.html" title="品优购商城">品优购商城a>
h1>
div>
<div class="search">
<input type="search" name="" id="" placeholder="代码搜索">
<button>搜索button>
div>
<div class="hotwords">
<a href="#" class="style_red">优惠购首发a>
<a href="#">亿元优惠a>
<a href="#">9.9元团购a>
<a href="#">美满99减30a>
<a href="#">办公用品a>
<a href="#">电脑a>
<a href="#">通信a>
div>
<div class="shopcar">
我的购物车
<i class="count">8i>
div>
header>
<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>
<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>长虹智能空调立省1000a>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>
<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>
<div class="floor">
<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>
<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>