今日目标：
1.项目文件夹
2.css文件夹
3.image文件夹
4.字体文件夹
| 效果图 |
|---|
 |
1.初始化css，normalize，老外写的，用来统一各个浏览器之间的样式
2.字体图标css
3.公共css，公共样式文件，头部尾部的样式是一样的，写在公共样式文件中
a.通配耗费时间，所以单独选择元素-----提高效率
b.img和文字对齐的时候底下下会有一些空白，所以vertical-align设置为top
c.清除input和img的边框
d.将所有倾斜标签和下划线标签还原为正常的font-style:normal
e.body标签设置网页字体
f.字体图标既有行内块的特点，也有文字的特点，所有不好控制，所以将字体图标的行高设置为1，使用相对定位来微调字体图标的位置
4.项目css
| 效果图 |
|---|
|
| 示意图 |
|---|
|
结构代码：
<!-- 顶部开始 --><div class="wrap top"> <div class="content"> <div class="tl fl"> <span>品优购欢迎您！请</span> <a href="login.html">登录</a> <a href="register.html">免费注册</a> </div> <div class="tr fr"> <ul> <li> <a href="#">我的订单</a><span>|</span> </li> <li> <a href="#"> 我的品优购<i class="iconfont icon-xiajiantou"></i> </a><span>|</span> </li> <li><a href="#">品优购会员</a><span>|</span></li> <li><a href="#">企业采购</a><span>|</span></li> <li><a href="#">关注品优购<i class="iconfont icon-xiajiantou"></i></a><span>|</span></li> <li><a href="#">客户服务<i class="iconfont icon-xiajiantou"></i></a><span>|</span></li> <li><a href="#">网站导航<i class="iconfont icon-xiajiantou"></i></a></li> </ul> </div> </div></div><!-- 顶部结束 -->样式代码(在公共样式文件中)：
/* 版心 */.content{ width:1200px; margin:0 auto;}/* 容器 */.wrap{ width:100%; }/* 顶部 */.top{ background:#f1f1f1;}.top .content{ height:30px; line-height:30px; }.top .content .tl{ width:200px; height:30px; }.top .content .tl a:nth-child(2){ color:#666;}.top .content .tl a{ color:#c81623;}.top .content .tr{ width:700px; height:30px; }.top .content .tr ul li{ float:left; }.top .content .tr ul li a i.iconfont{ margin-left:10px; position:relative; top:2px;}.top .content .tr ul li span{ margin:0 14px 0 5px; }效果：
| 效果图 |
|---|
|
结构代码：
<!-- logo区域开始 --><div class="wrap"> <div class="content logo-search clearfix"> <div class="logo fl"> <a href="index.html"><img src="images/logo.png"></a> </div> <div class="form fl"> <form> <input type="text" placeholder="语言开发"> <input type="submit" value="搜索"> </form> <ul> <li><a class="current" href="#">优惠购首发</a></li> <li><a href="#">亿元优惠</a></li> <li><a href="#">9.9元团购</a></li> <li><a href="#">每满99减30</a></li> <li><a href="#">办公用品</a></li> <li><a href="#">电脑</a></li> <li><a href="#">通信</a></li> </ul> </div> <div class="cart fr"> <i class="iconfont icon-gouwuche2"></i> <span>我的购物车</span> <em class="iconfont icon-youjiantou"></em> <b>8</b> </div> </div></div><!-- logo区域结束 -->样式代码：
/* logo和搜索区域 */.logo-search .logo{ margin-top:26px; }.logo-search .form{ margin-left:170px; }.logo-search form{ width:538px; margin:24px 0 0 0; background:#f00; height:36px; }.logo-search form input[type="text"]{ width:444px; height:32px; border:2px solid #b1191a; border-right:none; padding-left:10px; float:left;}.logo-search form input[type="submit"]{ width:82px; background:#b1191a; float:left; height:36px; font-size:16px; color:#fff;}.logo-search ul li{ float:left; margin:0 12px; line-height:28px;}.logo-search ul li a.current{ color:#c81623; }.logo-search .cart{ width:138px; height:34px; border:1px solid #dfdfdf; margin-right:62px; margin-top:24px; position:relative; line-height:34px; }.logo-search .cart i{ margin-left:18px;}.logo-search .cart em{ margin-left:14px; position:relative; top:2px; }.logo-search .cart b{ display:block; width:16px; height:14px; background:#e60012; border-radius:50%; border-bottom-left-radius:0; position:absolute; right:18px; top:-4px; color:#fff; font-size:12px; text-align:center; line-height:14px;}效果
| 效果图 |
|---|
|
结构代码：
<!-- 导航开始 --><div class="wrap nav"> <div class="content clearfix"> <div class="category fl"> 全部商品分类 </div> <ul class="fl"> <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{ border-bottom:2px solid #b1191a; margin-top:24px; line-height:44px; font-size:16px;}.nav .category{ width:210px; height:44px; background:#b1191a; color:#fff; text-align:center; }.nav ul li{ float:left; margin:0 26px; }.nav ul li a{ color:#333; }效果：
| 效果图 |
|---|
|
联系客服
