1.有关项目的基本结构：
|--html 文件与 CSS 文件单独设置分开。
|--在html中引入：
|--重置样式表
|--网页基本样式表:所有网页所共有使用的部分:网页宽度、网页字体、颜色、设置最小宽度、clearfix，消除浮动带来的影响
|--图标字体库
|--结构：
|--CSS：文件夹（bace.css、index.css、reset.css、all.css）
|--Img：图片文件夹
|--fas：图标字体库
|--html文件(index.html)
具体的实现分析：
一、顶部导航条
1. 先把结构写出来
|--创建外部容器，class="top_bar_wrapper"
|--实际内容容器,class = "top_bar"
|--左边导航条，class = "service"
|--具体每一项用列表实现 ，都一样不需要另外设置样式的不用设置class
<ul> <li></li> </ul>
|--分割线 '|'，需要设置样式，则设置class
<li class ="split"> | </li>
|--中间登录信息，class = "user-info"
|--右边购物车，class = "shop-car"
2.设置顶部导航条的样式
|--大体布局
|--容器的背景颜色、行高
|--整体的浮动布局
|--左边导航块需要向左浮动，个人信息与购物车向右浮动
|--内部的 li 全部向左浮动，才能显示在一行
|--具体设置样式
|--超链接部分：文本字体、hover效果
|--各种 margin 间距细微的调节
|--购物车样式 ：背景、hover效果
3.设置顶部导航条中下拉框的样式
|-- 分析结构：因为整个下拉框都可以点击，所以内容在a里面
|--在列表 中的app超链接中 中有一个块元素，块元素：图片img+span文字
|--app显示下面还有一个三角形，利用伪元素 after 添加一个 边框
|-- 影响因素：
|--因为父元素是外部导览框，设置了line-height为40，所以会影响里面的span
那么需要重置 line-height：1
|--下拉块元素设置了宽高，但是父元素的宽高不够，相当于宽度上撑开了app的宽度，
高度上是溢出的，加上位置上需要细微调整，所以开启绝对定位，那么app也要开启
相对定位。
|-- 再设置样式
|--背景
|--文字样式
|--定位、布局
|--平常显示，点击出现、出现的效果如何处理 animation ：height
二、头部导航块
1.分析结构
|--最外层有个头部容器 class="hearder-wrapper"
|--中间实际的内容容器 class = "hearder"
logo块向左浮动
|--左边logo块，logo一般比较重要，设置成 h1 class = "logo"
|--鼠标hover出现“小米官网”的显示，直接设置title可以
|--logo图片可以点击，所以是超链接 <a> 里面放置 <img>
|--有两张图片链接，所以设置两个超链接，隐藏一个，设置偏移量实现。
一个超链接的通用格式，另一个单独设置背景图片，偏移量实现切换的效果
<h1 class="logo" title="小米官网">
<a class ="mi " href="javascript:;"></a>
<a class ="home" href="javascript:;"></a>
</h1>
|--中间导航块 class = "nav"
|--<ul></ul>里面很多个<li></li> 里面放置超链接 <a></a>
|--<li></li>可以显示下拉菜单
|--只有部分内容点击会出现下拉框，所以另外给某些li设置 class="hover-show"
|--下拉菜单栏 class="show",分析其宽度直接是全屏宽度，所以开启相对定位的父类应为 header-wrapper
|--右边搜索块外部容器 class = "search-wrapper"
利用<form action="#"></form>里面设置表单选项，输入框
|--左边文本输入框 ，<input type="text">，class = "search-info"
|--右边提交按钮，<button></button>，插入图标字体 class="search-botton"
2.样式设置
|--logo
背景图片切换，开启绝对定位，用 transition +偏移量
3. 下面的左侧导航，是嵌套在头部导航条中的 全部商品分类中。class = "nav-list-menu"
每一个都是超链接，则结构为：<li><a href=""></a></li>
结构应为：
<div class="nav">
<ul>
<li class = "nav-list-menu">
<a href="javascript:;">
全部商品分类
</a>
<ul>
<li><a href="">...</a></li>
...
</ul>
</li>
...
</ul>
</div>
4.左侧导航栏hover之后出现的向右展开的框
|---所有连接点hover都会出现，所以是绑定在与内部 li 兄弟元素创建一个div
class = "show-right"
5.banner，中间最重要的图片展示部分
|---结构
|---外部容器 class = "banner"
|---实际内容区域 class = "banner-wrapper"
|---超链接图片列表 class = "banner-img-list"
<li>
<a href="javascript:;">
<img src="" alt="">
</a>
</li>
|---下面小点 class = "pointer"，直接是一个超链接结构
<a href="#"></a>
|--- 两边的箭头切换图标，利用雪碧图实现 容器 class = "pre-next"
两个超链接 a 元素 |---class = "pre"
|---class = "next"
6.右边固定定位的超链接块元素。
固定在屏幕右边，并且不会屏幕的宽度改变到一定程度之后会有响应式变化
|---与其他部分没有联系，可以单独设置 class="fix-part"
7.分析底部的结构(都要设置向左浮动)
|---左边一个块元素，class = "fast-nav",结构均为超链接里面有图标和文本
<ul>
<li>
<a href="">
<i></i>
显示文字
</a>
</li>
</ul>
|---右边一个块元素,class = "pic-show"
<ul>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
</ul>
<!--
有关实战小米官网 的笔记:
戒之戒之！！！宁愿一个项目做个五遍到滚瓜烂熟，也不能急急的往后学！！！
1.有关项目的基本结构：
|--html 文件与 CSS 文件单独设置分开。
|--在html中引入：
|--重置样式表
|--网页基本样式表:所有网页所共有使用的部分
|--网页宽度
.w{
width: 1226px;
margin:0 auto;
}
|--网页字体、颜色、设置最小宽度！防止缩放过程当中结构异常
body{
font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
color:#333;
min-width: 1226;
}
|--clearfix，消除浮动带来的影响
clearfix::beafore,
clearfix::after{
content:'';
display:table;
clear:both;
}
|--图标字体库
|--结构：
|---CSS：文件夹
|--Img：图片文件夹
|--fas：图标字体库
|--html文件
2.由设计图观察分析结构，至上而下，分治实现。并给每一步结构容器加上注释！
|--每一块的基本结构写出来了
|--再去设置样式，把效果做出来。
|---设置样式时，一般在外部容器设置定位布局等，在整个页面上的样式
|---在具体设置，li列表样式、a超链接样式等等。要区分开来，混成一团很容易相互影响效果出不来。
|--样式里面先 从外往内设置布局，定位。再去设置细节（字体、颜色、点击效果）
3.什么时候要设置class
|--需要另外设置样式的则需要设置 class
|--超链接、图标字体的设置，一层包一层。
<li>
<a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车 (超链接显示的文本)
</a>
</li>
|-- 最好在设置样式，写名字时，一起写上父类的块，可读性强。
.nav .hover-show:hove VS .hover-show:hover
4.关于鼠标hover，不仅在点击文字，也在点击整个块时都有感应，这是需要将
超链接设置为block，因为超链接是行内元素。
5. 有关何时要设置clearfix，对于最外部的容器，设置了浮动，
此时就把它设置就ok，内部的开启浮动的不必再重复设置clearfix，比较保险
6.超链接是否要设置 ，display：block，防止设置居中无效，使整块内容都可以点击
另外如果元素设置了 position：absolute，那么直接转化为块元素，可以不用例外设置为block
7.父元素中为了文字居中设置了行高，那么作为子元素中的行内元素，如 li span
都会继承这个属性，在定位上受到影响，需要进行重置。line-height：1
8. 背景图片居中的设置方式
background-position: center;
9.为什么过渡效果显示不出来：因为初始状态不确定！
开始是 left：0 ——> left:100px ,就可以显示出来
但如果一开始没有指定 left的效果，（默认是auto）就不会出现这个效果。
10. 点击时关联hover状态下的某个元素样式，必须能找到这个元素，才会生效
.logo:hover .mi{} ，表示hover logo 时块元素mi的状态设置
.nav .hover-show:hover ~ .show,表示 nav下面的li在hover状态时，后面兄弟元素show的状态设置
11. 表单输入框，会有默认的一些设置，所以需要重置
box-sizing:border-box;
border:none;
outline:none;
12.层级之间的相互覆盖。对于同一个东西，你不想它的结构被后面的同名选择器修改，可以添加父类，使它有更高的有限级。
li a{} 改为 .nav li a{},是同一个东西但是后一个不会被前一个覆盖。
13.有继承关系的子父类，样式也会继承，所以这个时候需要格外小心，像是列表里面有列表，
可以用 .nav > li 来区分，表示直接的子类 li
-->
以下是index的html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
小米商城 - 小米10 Pro、Redmi 10X、小米MIX Alpha，小米电视官方网站
</title>
<link rel="stylesheet" href="./CSS/reset.css">
<link rel="stylesheet" href="./CSS/index.css">
<link rel="stylesheet" href="./CSS/base.css">
<link rel="stylesheet" href="./fa/css/all.css">
</head>
<body>
<div class="top_bar_wrapper">
<div class="top_bar w clearfix">
<div class="service">
<ul>
<li>
<a href="javascript:;">小米商城</a>
</li>
<li class="split"> | </li>
<li>
<a href="javascript:;">MIUI</a>
</li>
<li class="split"> | </li>
<li>
<a href="javascript:;">loT</a>
</li>
<li class="split"> | </li>
<li>
<a href="javascript:;">云服务</a>
</li>
<li class="split"> | </li>
<li>
<a href="javascript:;">金融</a>
</li>
<li class="split"> | </li>
<li>
<a href="javascript:;">有品</a>
</li>
<li class="split"> | </li>
<li>
<a href="javascript:;">小爱开放品台</a>
</li>
<li class="split"> | </li>
<li>
<a href="javascript:;">企业团购</a>
</li>
<li class="split"> | </li>
<li>
<a href="javascript:;">资质证照</a>
</li>
<li class="split"> | </li>
<li>
<a href="javascript:;">协议规则</a>
</li>
<li class="split"> | </li>
<li>
<a class="app" href="javascript:;">
下载app
<div class="qrcode">
<img src="./img/download.png" alt="">
<span>小米商城APP</span>
</div>
</a>
</li>
<li class="split"> | </li>
<li>
<a href="javascript:;">智能生活</a>
</li>
<li class="split"> | </li>
<li>
<a href="javascript:;">Selection Location</a>
</li>
</ul>
</div>
<div class="shop-car">
<ul>
<li>
<a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车（0）
<div class="shop-car-info">
购物车中还没有商品，赶紧选购吧！
</div>
</a>
</li>
</ul>
</div>
<div class="user-info">
<ul>
<li>
<a href="javascript:;">登录</a>
</li>
<li class="split"> | </li>
<li>
<a href="javascript:;">注册</a>
</li>
<li class="split"> | </li>
<li>
<a href="javascript:;">消息通知</a>
</li>
</ul>
</div>
</div>
</div>
<div class="header-wrapper">
<div class="header w">
<h1 class="logo" title="小米官网">
<a class="mi " href="javascript:;"></a>
<a class="home" href="javascript:;"></a>
</h1>
<div class="nav">
<ul>
<li class="nav-list-menu">
<a href="javascript:;">
全部商品分类
</a>
<ul class="nav-list">
<li>
<a href="javascript:;">
手机 电话卡
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="javascript:;">
电视 盒子
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="javascript:;">
笔记本 显示器
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="javascript:;">
家电 插线板
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="javascript:;">
出行 穿戴
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="javascript:;">
智能 路由器
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="javascript:;">
电源 配件
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="javascript:;">
健康 儿童
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="javascript:;">
耳机 音箱
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="javascript:;">
生活 箱包
<i class="fas fa-angle-right"></i>
</a>
</li>
<div class="show-right"></div>
</ul>
</li>
<li class="hover-show"><a href="javascript:;">小米手机</a></li>
<li class="hover-show"><a href="javascript:;">Redmi红米</a></li>
<li class="hover-show"><a href="javascript:;">电视</a></li>
<li class="hover-show"><a href="javascript:;">笔记本</a></li>
<li class="hover-show"><a href="javascript:;">家电</a></li>
<li class="hover-show"><a href="javascript:;">路由器</a></li>
<li class="hover-show"><a href="javascript:;">智能硬件</a></li>
<li><a href="javascript:;">服务</a></li>
<li><a hclass="hover-show" ref="javascript:;">社区</a></li>
<div class="show"></div>
</ul>
</div>
<div class="search-wrapper">
<form class="search" action="#">
<input class="search-info" type="text" name="search">
<button class="search-botton">
<i class="fas fa-search"></i>
</button>
</form>
</div>
<div class="banner">
<div class="banner-wrapper w clearfix">
<div class="banner-img-list">
<ul>
<li>
<a href="javascript:;">
<img src="./img/banner1.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./img/banner2.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./img/banner3.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./img/banner4.jpg" alt="">
</a>
</li>
</ul>
</div>
<div class="pointer">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a class="active" href="javascript:;"></a>
</div>
<div class="pre-next">
<a class="pre" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
</div>
</div>
</div>
</div>
<div class="fix-part">
<ul>
<li>
<a class="pic-hover" href="javasrcipt:;">
<i class="fab fa-slideshare"></i>
<div class="pic">
<img src="../mi_1/img/download.png" alt="">
扫码领取新<br>
人百元礼包
</div>
</a>
</li>
<li>
<a href="javasrcipt:;">
<i class="fas fa-info"></i>
<div class="display-info">
个人中心
</div>
</a>
</li>
<li>
<a href="javasrcipt:;">
<i class="fas fa-phone-volume"></i>
<div class="service-after">
售后服务
</div>
</a>
</li>
<li>
<a href="javasrcipt:;">
<i class="fas fa-truck"></i>
<div class="human-service">
人工客服
</div>
</a>
</li>
<li>
<a href="javasrcipt:;">
<i class="fas fa-bell"></i>
<div class="car-info">
购物车(0)
</div>
</a>
</li>
</ul>
</div>
<div class="button-wrapper w">
<div class="fast-nav">
<ul>
<li>
<a href="#">
<i class="fas fa-clock"></i>
小米秒杀
</a>
</li>
<li>
<a href="#">
<i class="fas fa-building"></i>
企业团购
</a>
</li>
<li>
<a href="#">
<i class="fas fa-frog"></i>
F码通道
</a>
</li>
<li>
<a href="#">
<i class="fas fa-robot"></i>
米粉卡
</a>
</li>
<li>
<a href="#">
<i class="fas fa-keyboard"></i>
以旧换新
</a>
</li>
<li>
<a href="#">
<i class="fas fa-sim-card"></i>
话费充值
</a>
</li>
</ul>
</div>
<div class="picture-show">
<ul>
<li>
<a href="javascript:;">
<img src="./1.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./2.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./3.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
以下是设置的index.css文件
.top_bar_wrapper{
background-color:#333;
height:40px;
line-height: 40px;
}
.top_bar a{
display:block;
font-size: 12px;
color: #b0b0b0;
}
.service,
.top_bar li{
float: left;
}
.user-info,
.shop-car{
float:right;
}
.split{
font-size:12px;
color:#424242;
margin:0 8px;
}
.top_bar a:hover{
color:white;
}
.shop-car a {
width: 120px;
background-color:#424242;
text-align:center;
}
.shop-car{
margin-left:26px;
}
.shop-car a:hover{
background-color:white;
color:#FF6700;
}
.app{
position: relative;
}
.qrcode{
width: 124px;
height: 0;
background-color: #fff;
box-shadow:0 0 10px rgba(0, 0, 0, .3);
line-height: 1;
text-align: center;
position: absolute;
left:-40px;
overflow: hidden;
transition: height 0.3s;
z-index: 9999;
}
.qrcode img{
width: 90px;
margin:17px;
margin-bottom: 10px;
}
.qrcode span{
font-size: 14px;
color: #000;
}
.app::after{
content: '';
width: 0;
height: 0;
border:8px solid transparent;
border-top:none;
border-bottom-color: white;
position: absolute;
bottom:0;
right: 0;
left: 0;
margin:auto;
display: none;
}
.app:hover .qrcode,
.app:hover::after{
display: block;
height: 148px;
}
.shop-car{
position: relative;
}
.shop-car-info{
width: 320px;
height: 0;
color:black;
text-align: center;
line-height: 100px;
background-color: white;
box-shadow:2px 2px 5px rgba(0, 0, 0, .1),-2px 2px 5px rgba(0, 0, 0, .1);
position: absolute;
right: 0;
overflow: hidden;
transition: height 0.3s;
z-index: 9999;
}
.shop-car:hover .shop-car-info{
height: 100px;
}
.header-wrapper{
height: 100px;
position: relative;
}
.logo{
float:left;
width: 55px;
height: 55px;
margin-top:22px;
position: relative;
overflow:hidden;
}
.logo a{
width: 55px;
height: 55px;
background-image: url(../img/mi-logo.png);
background-position: center;
background-color: #ff6700;
position: absolute;
left:0;
transition:left 0.1s;
}
.logo .home{
position: absolute;
left:-55px;
background-image:url("../img/mi-home.png");
background-position: center;
}
.logo:hover .mi{
left:55px;
}
.logo:hover .home{
left:0px;
}
.nav{
float:left;
margin-left:7px;
padding-left: 58px;
}
.nav >ul> li {
float:left;
}
.nav li a{
display:block;
line-height: 100px;
font-size:16px;
color:black;
margin:0 10px;
}
.nav a:hover{
color:#ff6700;
}
.nav .show{
width: 100%;
height:0px;
overflow: hidden;
background-color:white;
box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
position: absolute;
top:100px;
left:0;
transition:height 0.3s;
z-index: 9999;
}
.nav .hover-show:hover ~ .show,
.nav .show:hover{
height:228px;
border-top:1px solid rgb(224,224,224);
}
.search-wrapper{
width: 296px;
height: 50px;
float: right;
margin-top: 25px;
}
.search-wrapper .search-info{
box-sizing:border-box;
border:none;
outline:none;
float:left;
width: 223px;
height: 48px;
font-size:16px;
border: 1px solid rgb(224, 224, 224);
padding:0 10px;
}
.search-wrapper .search-botton{
box-sizing:border-box;
border:none;
outline:none;
float: left;
height: 48px;
width: 50px;
padding: 0;
background-color: #fff;
color: #616161;
font-size: 16px;
border: 1px solid rgb(224, 224, 224);
border-left:none;
}
.search-wrapper .search-info:focus,
.search-wrapper .search-info:focus + .search-botton{
border-color: #ff6700;
}
.search-wrapper .search-botton:hover{
background-color:#ff6700;
color:white;
}
.nav-list-menu{
position: relative;
}
.nav-list{
width: 234px;
height: 420px;
padding:20px 0;
background-color:rgba(0, 0, 0, .6);
position:absolute;
left:-120px;
z-index: 999;
}
.nav-list li i{
float:right;
font-size:16px;
line-height:42px;
}
.nav-list li a{
display:block;
height: 42px;
line-height: 42px;
color:white;
font-size:14px;
padding:0 30px;
margin:0px;
}
.nav-list li a:hover{
background-color:#ff6700;
color:white;
}
.show-right{
height: 460px;
width: 990px;
visibility: hidden;
background-color:white;
position: absolute;
left:234px;
top: 0px;
box-shadow:0 0 10px rgba(0, 0, 0, .1);
border:1px solid rgba(0, 0, 0, 0.116);
z-index: 999;
}
.nav-list li:hover ~ .show-right {
visibility: visible;
}
.banner-wrapper{
position: relative;
top:100px;
left:0;
}
.banner-img-list li{
position: absolute;
}
.banner-img-list img{
width: 100%;
vertical-align: top;
}
.pointer{
position: absolute;
bottom: -425px;
right: 35px;
}
.pointer a{
float:right;
width: 6px;
height: 6px;
margin-right: 6px;;
border:2px solid rgba(255,255,255,.5);
border-radius: 50%;
background-color:rgba(0, 0, 0, .6);
}
.pointer a:hover,
.pointer a.active{
background-color: rgba(255,255,255,.5);
border:2px solid rgba(0, 0, 0, .6);
}
.pre-next a{
width: 41px;
height: 69px;
background-image: url(../img/icon-slides.png);
position: absolute;
}
.pre {
left:234px;
top:199px;
background-position:-83px 0;
}
.next {
left:1186px;
top:199px;
background-position:-123px 0;
}
.pre:hover{
background-position:0 0;
}
.next:hover{
background-position:-42px 0;
}
.fix-part{
width: 26px;
height: 206px;
border:1px solid rgba(102, 99, 99, 0.1);
position:fixed;
top:392px;
left:50%;
margin-left:613px;
}
.fix-part a:hover{
color:#FF6700;
}
.fix-part li a{
display:block;
line-height: 40px;
font-size:18px;
color:#999999;
text-align: center;
border:1px solid rgba(102, 99, 99, 0.1);
border-right:none;
border-left:none;
border-bottom:none;
}
.fix-part .pic{
width: 124px;
height: 170px;
background-color: #fff;
box-shadow:0 0 10px rgba(0, 0, 0, .3);
line-height: 1;
text-align: center;
font-size:14px;
color:#9B9B9B;
position: absolute;
left:-135px;
top:0;
z-index: 9999;
display: none;
}
.pic img{
width: 90px;
margin:17px;
}
.pic::after{
content: '';
border:10px solid white;
height: 0;
width: 0;
border-right:none;
border-top-color: transparent;
border-bottom-color: transparent;
position: absolute;
right:-10px;
top:10px;
}
.pic-hover:hover .pic{
display: block;
}
.fix-part .display-info,
.fix-part .human-service,
.fix-part .service-after,
.fix-part .car-info{
width: 80px;
height: 40px;
background-color: #fff;
line-height: 40px;
text-align: center;
font-size:14px;
color:#9B9B9B;
position: absolute;
right:35px;
display: none;
}
.display-info{
top:42px;
}
.service-after{
top:84px;
}
.human-service{
top:126px;
}
.car-info{
top:168px;
}
.display-info::after,
.human-service::after,
.service-after::after,
.car-info::after
{
content: '';
border:10px solid white;
height: 0;
width: 0;
border-right:none;
border-top-color: transparent;
border-bottom-color: transparent;
position: absolute;
right:-10px;
top:8px;
}
.fix-part a:hover >div{
display: block;
}
@media all and (max-width:1278px){
.fix-part{
position:fixed;
top:392px;
left:100%;
z-index: 9999;
}
}
.button-wrapper{
position: relative;
top:475px;
width: 100%;
}
.fast-nav,
.picture-show,
.fast-nav li,
.picture-show li{
float:left;
}
.button-wrapper .fast-nav {
width: 228px;
height: 168px;
background-color:#5f5750
}
.fast-nav a{
display:block;
color:#cfccca;
text-align:center;
height: 80px;
width: 73px;
font-size: 12px;
border:1px solid #665E57;
}
.fast-nav i{
display:block;
font-size:20px;
margin-top:20px;
margin-bottom: 10px;
}
.fast-nav a:hover{
color:white;
}
.picture-show li{
width:316px;
margin-left:15px;
}
.picture-show img{
width: 100%;
vertical-align: top;
}
以下是基本样式表：base.css文件
clearfix::beafore,
clearfix::after{
content:'';
display:table;
clear:both;
}
.w{
width: 1226px;
margin:0 auto;
}
body{
font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
color:#333;
min-width: 1226;
}
a{
text-decoration:none;
color: #b0b0b0;
font-size:12px;
}
以下是重置样式表 reset.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
