超详细实现淘宝静态页面(附全部代码)

文章目录

一:基本结构与样式
二:头部信息结构
- 1.淘宝小图标
- 2.目前效果
- 3.代码
三:头部信息样式与自定义图标
- 1.设置收藏夹图标
- 注意:
四:头部广告结构与样式
- 1.h标签的应用
五:全部代码
- 1.index.html
- 2.index.css
- 3.reset.css

一:基本结构与样式

1.划分结构的顺序是自上而下,从左往右,保证内容在一行内能显示
2.考虑的因素有内容,颜色块,间距

二:头部信息结构

1.淘宝小图标

1.1图标必须放在网站的根目录中,不要放进images哦,如图:

1.2引入图标

<link rel="icon" href="favicon.ico">

2.目前效果

3.代码

index.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝网-淘!我喜欢</title><link rel="stylesheet" href="css/index.css"><link rel="icon" href="favicon.ico"><!-- 设置基础路径 只要有a标签,,a标签中和#就是根路径的意思吧,都以这个base为基础.target是从新页面打开,一个页面只能出现一个base标签--><base href="" target="_black">
</head><body><!-- 头部信息 --><div id="headMessage"><!-- 左边 --><ul class="fl"><li><span>中国大陆</span><span></span></li><li><a href="#">亲,请登录</a></li><li><a href="#">免费注册</a></li><li><a href="#">手机逛淘宝</a></li></ul><!-- 右边 --><ul class="fr"><li><a href="#">我的淘宝</a><span></span></li><li><span></span><a href="#">购物车</a><strong>0</strong><span></span></li><li><a href="#"> <span></span>收藏夹</a><span></span></li><li><a href="#">商品分类</a></li><li><a href="#">千牛卖家中心</a><span></span></li><li><a href="#">联系客服</a><span></span></li><li><span></span><a href="#">网站导航</a><span></span></li></ul></div><!-- 头部广告 --><div id="headAd"></div><!-- 头部搜索 --><div id="headSearch"></div><!-- 首屏内容 --><div id="firstScreen"></div><!-- 有好货与爱逛街 --><div id="layer"></div><!-- 右侧固定定位导航 --><div id="tool"></div>
</body></html>

index.css:

/* @规则 @charset 设置样式表的编码@import  导入其他样式文件@meida   媒体查询@font-face自定义字体*/
@import 'reset.css'

reset.css

/* 样式重置 */
body,p,h1,h2,h3,h4{margin: 0;
}
ul{margin: 0;padding: 0;list-style: none;
}
img{border:none;/* 垂直对齐方式 */vertical-align: middle;
}
a{text-decoration: none;color: #3c3c3c;
}
i{font-style: normal;
}
input{margin: 0;padding: 0;
}
button{outline: none;
}
body{/* 设置字体  font是复合属性,写在一起要尊重规则  */font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;color: #3c3c3c;background-color: #f4f4f4;
}
/* 预定义样式 常使用的 */
/* 清除浮动三件套 */
.clearfix:after{content:'';clear: both;display: block;
}
/* 浮动 */
.fl{float: left;
}
.fr{float:right;
}
.leayer{width: 1190px;margin:0 auto;
}
/* 常用颜色 */
.c4{color: f40;
}
.c5{color: #f50;
}
.mt10{margin-top: 10px;
}
.mr10{margin-right: 10px;
}

三:头部信息样式与自定义图标

1.设置收藏夹图标

注意:我这里只下载了一个收藏夹图标作为演示,大家记得把后面需要用到的图标一起下载了

1.1在阿里巴巴矢量库中下载一个收藏夹的图标(星星图标),将它添加入库

1.2在购物车里点击下载代码

1.3解压后,找到使用说明的文件

我们用unicode编码的方式引用它

1.4根据文件说明的步骤,第一步,拷贝@font-face,放到index.css文件中

将解压后的文件夹中的这几个文件复制到项目中新创建的一个文件夹中

然后我们可以修改刚刚拷贝过来的代码中的路径

1.5 说明文档的第二步.复制到index.css中

1.6 第三步在主页面index.html的收藏夹图标的span标签里中引入添加class=“iconfont” 并且加字体编码,字体编码在图标的下面,分号不要忘记

大家查看效果

其他图标同样的操作,在span标签添加class=“iconfont”,再写上编码

注意:

1.我们发现span标签之前如果有回车,就自动识别成空格,浏览器中展示图标和文字之间就会有距离,并且空格是由字体大小决定的,也就是你设置的font-size
解决方法:父级li设置font-size:0,但是这样其他文字不见了,我们再在a标签里给其他字体设置font-size:12就好了
2.自定义span标签里的图标和文字的距离,我们统一改变它的样式,在span标签后添加一个类arrow
其他的操作就不一一赘述了,给图标文字之间设置距离,改变图标颜色

四:头部广告结构与样式

1.h标签的应用

h1用于大标题,h2标签应用的时候就知道了,h3标签一般用于板块标题,h4标签用于板块里面的标题

五:全部代码

1.index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝网-淘!我喜欢</title><link rel="stylesheet" href="css/index.css"><link rel="icon" href="favicon.ico"><!-- 设置基础路径 只要有a标签,,a标签中和#就是根路径的意思吧,都以这个base为基础.target是从新页面打开,一个页面只能出现一个base标签--><base href="" target="_black">
</head><body><!-- 头部信息 --><div id="headMessage" class="layer clearfix"><!-- 左边 --><ul class="fl"><li><span>中国大陆</span><span class="iconfont arrow">&#xe60b;</span></li><li class="mr7"><a href="#" class="login mr7">亲,请登录</a></li><li><a href="#">免费注册</a></li><li><a href="#">手机逛淘宝</a></li></ul><!-- 右边 --><ul class="fr"><li><a href="#">我的淘宝</a><span class="iconfont arrow">&#xe60b;</span></li><li><span class="iconfont mr5 c4">&#xe86e;</span><a href=" #">购物车</a><strong>0</strong><span class="iconfont arrow">&#xe60b;</span></li><li><!-- 设置颜色的store只能放在span里,放在a里冲突了,后面给a标签设置的样式会把前面的样式覆盖掉,a标签设置了其他颜色 --><a href="#"> <span class="iconfont mr5 store">&#xe642;</span>收藏夹</a><span class="iconfont arrow">&#xe60b;</span></li><li><a href="#">商品分类</a></li><li class="line">|</li><li><a href="#">千牛卖家中心</a><span class="iconfont arrow">&#xe60b;</span></li><li><a href="#">联系客服</a><span class="iconfont arrow">&#xe60b;</span></li><li><span class="iconfont c4 r5">&#xe67c;</span><a href="#">网站导航</a><span class="iconfont arrow">&#xe60b;</span></li></ul></div><!-- 头部广告 --><div id="headAd"><!-- 父级清除浮动 --><div class="layer clearfix"><a href="#" class="fl go"><img src="images/go.png" alt=""></a><ul class="fr"><!-- 图片先写,并且右浮动,它会脱离文档流,它所占的空间就可以腾出来了,然后标签与文字直接往下写浮动的元素不再左右撑满占满整行，而是以它里面的内容大小而定，内容多大盒子就多大（当然你可以用width和height将其定死）。左浮动的盒子让出了他的右边，其他元素可以接着他的右边开始排起。右浮动同理。 --><!-- 快速生成多行代码  li.item$*5>a[href=#]>img[src=images/adimg_0$.jpg] --><li class="item1"><a href="#" class="fr"><img src="images/adimg_01.jpg" alt=""></a><h3><a href="#">电视会场</a></h3><p><a href="#">最高降2000</a></p></li><li class="item2"><a href="#" class="fr"><img src="images/adimg_02.jpg" alt=""></a><h3><a href="#">电视会场</a></h3><p><a href="#">最高降2000</a></p></li><li class="item3"><a href="#" class="fr"><img src="images/adimg_03.jpg" alt=""></a><h3><a href="#">电视会场</a></h3><p><a href="#">最高降2000</a></p></li><li class="item4"><a href="#" class="fr"><img src="images/adimg_04.jpg" alt=""></a><h3><a href="#">电视会场</a></h3><p><a href="#">最高降2000</a></p></li><li class="item5"><a href="#" class="fr"><img src="images/adimg_05.jpg" alt=""></a><h3><a href="#">电视会场</a></h3><p><a href="#">最高降2000</a></p></li></li></ul></div></div><!-- 头部搜索 --><div id="headSearch"><div class="clearfix layer"><h1 class="fl"><a href="#">淘宝网</a></h1><div class="code fr"><span class="iconfont close">&#xe61a;</span><span class="c5">手机淘宝</span><img src="./images/code.png" alt=""></div><div class="search"><!-- searchTab searchContent searchBox  btn --><ul class="searchTab clearfix"><li class="active">宝贝</li><li>天猫</li><li>店铺</li></ul><div class="searchContent clearfix"><form action="#"><div class="searchBox fl"><!-- 输入框和文字需要叠加,要定位 --><input type="text"><!-- 放大镜和文字 --><div class="placeholder"><i class="iconfont ">&#xe616;</i><span>裤子高腰直筒裤女</span></div><span class="iconfont imgSearch">&#xe872;</span></div><div class="btn fl"><button type="submit">搜索</button></div></form></div><!-- hotKey --><div class="hotKey"><a href="" class="c5">新款连衣裙</a><a href="">潮流T恤</a><a href="" class="c5">四件套</a><a href="" class="c5">时尚女鞋</a><a href="">短裤</a><a href="" class="c5">半身裙</a><a href="">男士外套</a><a href="" class="c5">墙纸</a><a href="">行车记录仪</a><a href="" class="c5">新款男鞋</a><a href="">耳机</a><a href="" class="c5">时尚女包</a><a href="">沙发</a></div></div></div></div><!-- 导航 --><div id="nav" class="layer clearfix"><h2 class="fl">主题市场</h2><ul class="size"><li class="size"><a href="">天猫</a></li><li class="size"><a href="">聚划算</a></li><li class="size"><a href="">天猫超市</a></li><li class="line">|</li><li><a href="">淘抢购</a></li><li><a href="">电器城</a></li><li><a href="">司法拍卖</a></li><li><a href="">淘宝心选</a></li><li class="line ">|</li><li><a href="">飞猪旅行</a></li><li><a href="">智能生活</a></li><li><a href="">苏宁易购</a></li></ul></div><!-- 首屏内容 --><div id="firstScreen" class="layer clearfix"><!-- 左边的内容  firstLeft--><div class="firstLeft fl"><!-- 侧边导航 sideNav --><div class="sideNav fl"><ul><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr  ">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li><li><a href="#">女装</a>/<a href="#">内衣</a>/<a href="#">家居</a><span class="iconfont fr">&#xe61d;</span></li></ul></div><!-- 图片1容器img1Box --><div class="img1Box fr"><!-- 父级本身有浮动,所以不用清除浮动 --><div class="pic fl"><div class="img"><a href="#"><img src="./images/pic_01.jpg" alt=""></a><button class="leftBtn iconfont">&#xe771;</button><button class="rightBtn iconfont">&#xe61d;</button><div class="circle"><span class="active"></span><span></span><span></span><span></span></div></div></div><div class="ad fr"><a href="#"><img src="./images/ad_02.jpg" alt=""></a></div></div><!-- 图片2容器 --><div class="img2Box fr"><div class="pic fl"><div class="picTitle"><div class="text clearfix"><span class="fl bg">理想生活上天猫</span><span class="fr"><i>1</i>/6</span></div><div class="line"><span></span></div></div><div class="img"><a href="#"><img src="./images/pic_02.jpg" alt=""></a><a href="#"><img src="./images/pic_03.jpg"alt=""></a></div><button class="leftBtn iconfont">&#xe771;</button><button class="rightBtn iconfont">&#xe61d;</button></div><div class="ad fr"><p class="title">今日热卖</p><a href="#"><img src="./images/ad_03.jpg" alt=""></a></div></div><!-- 淘宝头条news --><div class="news fl"><div class="hd fl"><h3>淘宝头条</h3><p>让你的生活更有趣</p></div><div class="newList fr"><div class="imtem"><a href="#" class="fl img"><img src="./images/news_img_01.jpg" alt=""></a><h4> <a href="#">微漫酱访谈第三期：超萌舞见弥音音！</a> </h4><p><a href="#">哈喽，大家好，我是你们可爱的微漫酱，今天我们请到了一位舞见小姐姐来做客我们的访谈事，她就是弥音音！</a> </p><a href="#" class="more">更多></a></div></div></div></div><!-- 右边的内容firstRight --><div class="firstRight fr"><!-- 用户 --><div class="user"><a href="#" class="avatar"><img src="./images/avatar.jpg" alt=""></a><p class="username">Hi! 你好</p><div class="members"><a href="#" class="gold">领淘金币抵钱</a><a href="#" class="club">会员俱乐部</a></div><div class="btn"><button class="login">登录</button><button class="register">注册</button><button class="shop">开店</button></div></div><!-- 举报 --><a href="" class="tipOff"><span>网上有害信息举报专区</span><i class="iconfont">&#xe644;</i></a><!-- 公告区 --><div class="notice"><ul class="title"><li><a href="#" class="active">公告</a></li><li><a href="#">规则</a></li><li><a href="#">论坛</a></li><li><a href="#">安全</a></li><li><a href="#">公益</a></li></ul><ul class="content clearfix"><li class="item1"><a href="#">天猫618进入热身 84个品牌在天猫共获粉丝4.3亿</a></li><li><a href="#">天猫618五折卖车</a></li><li><a href="#">天猫618直播间观看指南</a></li></ul></div><!-- 图标区 --><table class="icon"><tr><td class="item1"><a href="#"><span></span><i>充话费</i></a></td><td class="item2"><a href="#"><span></span><i>旅行</i></a></td><td class="item3"><a href="#"><span></span><i>车险</i></a></td><td class="item4"><a href="#"><span></span><i>游戏</i></a></td></tr><tr><td class="item5"><a href="#"><span></span><i>彩票</i></a></td><td class="item6"><a href="#"><span></span><i>电影</i></a></td><td class="item7"><a href="#"><span></span><i>酒店</i></a></td><td class="item8"><a href="#"><span></span><i>理财</i></a></td></tr><tr><td class="item9"><a href="#"><span></span><i>找服务</i></a></td><td class="item10"><a href="#"><span></span><i>演出</i></a></td><td class="item11"><a href="#"><span></span><i>水电煤</i></a></td><td class="item12"><a href="#"><span></span><i>火车票</i></a></td></tr></table><!-- APP --><div class="app"><div class="title clearfix"><h3 class="fl">阿里APP</h3><a href="#" class="fr">更多></a></div><!-- ul.appIcon>li*10>a[href="#"]>img[src="data:images/aa_0$.png"] --><ul class="appIcon"><li><a href="#"><img src="images/app_01.webp" alt=""></a></li><li><a href="#"><img src="images/app_02.png" alt=""></a></li><li><a href="#"><img src="images/app_03.png" alt=""></a></li><li><a href="#"><img src="images/app_04.png" alt=""></a></li><li><a href="#"><img src="images/app_05.png" alt=""></a></li><li><a href="#"><img src="images/app_06.png" alt=""></a></li><li><a href="#"><img src="images/app_07.jpg" alt=""></a></li><li><a href="#"><img src="images/app_08.png" alt=""></a></li><li><a href="#"><img src="images/app_09.png" alt=""></a></li><li><a href="#"><img src="images/app_10.png" alt=""></a></li></ul></div></div></div><!-- 有好货与爱逛街 --><div class="clearfix layer mt10"><!-- 有好货 --><div class="goods fl"><div class="head clearfix"><h3 class="fl"><img src="./images/goods.png" alt="有好货"><span class="iconfont">&#xe67a;</span><i>与美好生活不期而遇</i></h3><a href="#" class="fr change">换一换</a></div><ul class="list"><li><a href="#"><img src="./images/shop_img_01.jpg" alt=""></a><h4><a href="#">max破产都要买的口红</a></h4><p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p><a href="#" class="comment"><span class="iconfont">&#xe75a;</span><i>5950 人说好</i></a></li><li><a href="#"><img src="./images/shop_img_02.jpg" alt=""></a><h4><a href="#">max破产都要买的口红</a></h4><p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p><a href="#" class="comment"><span class="iconfont">&#xe75a;</span><i>5950 人说好</i></a></li><li><a href="#"><img src="./images/shop_img_03.jpg" alt=""></a><h4><a href="#">max破产都要买的口红</a></h4><p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p><a href="#" class="comment"><span class="iconfont">&#xe75a;</span><i>5950 人说好</i></a></li><li><a href="#"><img src="./images/shop_img_04.jpg" alt=""></a><h4><a href="#">max破产都要买的口红</a></h4><p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p><a href="#" class="comment"><span class="iconfont">&#xe75a;</span><i>5950 人说好</i></a></li><li><a href="#"><img src="./images/shop_img_05.jpg" alt=""></a><h4><a href="#">max破产都要买的口红</a></h4><p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p><a href="#" class="comment"><span class="iconfont">&#xe75a;</span><i>5950 人说好</i></a></li><li><a href="#"><img src="./images/shop_img_06.jpg" alt=""></a><h4><a href="#">max破产都要买的口红</a></h4><p class="text"><a href="#">《破产姐妹》max最爱Tarte哑光口红笔</a></p><a href="#" class="comment"><span class="iconfont">&#xe75a;</span><i>5950 人说好</i></a></li></ul></div><!-- shopping要放在goods后面,这样另外设置的样式就能覆盖goods的样式 --><div class="goods fr shopping"><div class="head clearfix"><h3 class="fl"><img src="./images/shopping.png" alt="爱逛街"><span class="iconfont">&#xe67a;</span><i>献给聪明可爱的你</i></h3><a href="#" class="fr change">换一换</a></div><ul class="list"><li><a href="#"><img src="./images/shop_img_07.jpg" alt=""></a><p class="text"><span class="iconfont">&#xe61e;</span><a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p><a href="#" class="comment"><span><img src="./images/small_avatar.png" alt=""></span><i>爱逛***01</i></a></li><li><a href="#"><img src="./images/shop_img_08.jpg" alt=""></a><p class="text"><span class="iconfont">&#xe61e;</span><a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p><a href="#" class="comment"><span><img src="./images/small_avatar.png" alt=""></span><i>爱逛***01</i></a></li><li><a href="#"><img src="./images/shop_img_09.jpg" alt=""></a><p class="text"><span class="iconfont">&#xe61e;</span><a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p><a href="#" class="comment"><span><img src="./images/small_avatar.png" alt=""></span><i>爱逛***01</i></a></li><li><a href="#"><img src="./images/shop_img_10.jpg" alt=""></a><p class="text"><span class="iconfont">&#xe61e;</span><a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p><a href="#" class="comment"><span><img src="./images/small_avatar.png" alt=""></span><i>爱逛***01</i></a></li><li><a href="#"><img src="./images/shop_img_11.jpg" alt=""></a><p class="text"><span class="iconfont">&#xe61e;</span><a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p><a href="#" class="comment"><span><img src="./images/small_avatar.png" alt=""></span><i>爱逛***01</i></a></li><li><a href="#"><img src="./images/shop_img_12.jpg" alt=""></a><p class="text"><span class="iconfont">&#xe61e;</span><a href="#">【饰悟】925纯银小花迷你耳钉女耳环女气质复古会动的耳钉小耳坠</a></p><a href="#" class="comment"><span><img src="./images/small_avatar.png" alt=""></span><i>爱逛***01</i></a></li></ul></div></div><!-- 右侧固定定位导航 --><div id="tool"><span class="iconfont">&#x35ba;</span><div class="btn"><a href="#" class="c4 active">爱逛 好货</a><a href="#" class="c5">好店 直播</a><a href="#" class="c6">品质 特色</a><a href="#" class="c7">实惠 热卖</a><a href="#" class="c4">猜你 喜欢</a><a href="#" class="item6">反馈</a><a href="#" class="">暴恐 举报</a></div></div>
</body></html>

2.index.css

/*@规则 @charset 设置样式表的编码@import  导入其他样式文件@meida   媒体查询@font-face自定义字体*/@import "reset.css";
@font-face {font-family: "iconfont";src: url("../font/iconfont.eot");src: url("../font/iconfont.eot?#iefix") format("embedded-opentype"),url("../font/iconfont.woff2") format("woff2"),url("../font/iconfont.woff") format("woff"),url("../font/iconfont.ttf") format("truetype"),url("../font/iconfont.svg#iconfont") format("svg");
}
.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
/* 头部信息 */
#headMessage li {/* 设置浮动后li的父级ul不需要清除浮动了,因为ul是设置浮动了的,不用担心有问题了*/float: left;line-height: 35px;padding: 0 6px;/* 去除span标签里图标和文字的距离 */font-size: 0;
}
#headMessage a {/* 行高在上面的li标签已经设置过了 */color: #6c6c6c;font-size: 12px;
}
#headMessage a:hover {color: #f40;
}
#headMessage a .login {color: #f22e00;
}
#headMessage span {font-size: 12px;
}
#headMessage .arrow {margin-left: 7px;
}
#headMessage li strong {font-size: 12px;color: #f22e00;
}
/* 收藏夹颜色 */
#headMessage li span.store {color: #9c9c9c;
}
#headMessage li.line {font-size: 12px;color: #ddd;padding: 0 5px;
}
/* 头部广告 */
#headAd {background-color: #f12f04;
}
#headAd .go {display: block;padding: 10px 10px 10px 15px;
}
#headAd .go img {width: 80px;height: 80px;
}
#headAd ul {padding-top: 13px;
}
#headAd li {float: left;width: 209px;height: 75px;margin-right: 10px;padding: 12px 15px 0 15px;/* 触发怪异盒模型   不需要关心修改padding什么的,不受padding和border的影响*/box-sizing: border-box;/* 盒模型 1.标准盒模型总宽度=border(左右)+width+padding(左右)总高度=border(上下)+height+padding(上下)2.IE盒模型(怪异盒模型)总宽度=width总高度=height*/
}
#headAd li h3 {font-size: 20px;line-height: 28px;
}
#headAd li p {font-size: 14px;line-height: 20px;
}
#headAd li a {color: #fff;/* 鼠标放上去就有小手了 *//* display: block; */
}
#headAd li a img {width: 52px;height: 52px;border-radius: 5px;
}
#headAd li.item1 {background: url(../images/adbg_01.png) no-repeat;
}
#headAd li.item2 {background: url(../images/adbg_01.png) no-repeat;
}
#headAd li.item3 {background: url(../images/adbg_01.png) no-repeat;
}
#headAd li.item4 {background: url(../images/adbg_01.png) no-repeat;
}
#headAd li.item5 {background: url(../images/adbg_01.png) no-repeat;/* 最后一个后面没元素了 */margin-right: 0;
}
/* 头部搜索 */
#headSearch {background-color: #fff;padding: 24px 0px 10px 0px;
}
#headSearch h1 a {display: block;width: 190px;height: 58px;/* 以图换字首行缩进。往左走 文字消失 */background: url(../images/logo.png) center no-repeat;text-indent: -9999px;overflow: hidden;
}
#headSearch .code {width: 72px;height: 86px;position: relative;border: 1px solid #eee;margin-right: 110px;text-align: center;
}
/* 二维码 72 86 #eee mr110   6262 */
#headSearch .code img {width: 62px;height: 62px;
}
#headSearch .close {position: absolute;/* ×移到外面  宽度14+边框2 */left: -16px;top: -1px;width: 14px;height: 14px;line-height: 14px;font-size: 14px;border: 1px solid #eee;color: #ddd;cursor: pointer;
}
#headSearch .search {width: 630px;margin: 0 auto;
}
#headSearch .searchTab {/* height22 最好给个高度，不然容易跟着左右图片走，可能出现文字环绕效果*/height: 22px;padding-left: 17px;
}
#headSearch .searchTab li {float: left;width: 36px;line-height: 22px;margin-right: 4px;text-align: center;color: #f40;cursor: pointer;
}
#headSearch .searchTab li:hover {background-color: #ffeee5;
}
#headSearch .searchTab li.active {color: #fff;font-weight: bold;/*渐变背景线性渐变从左至右开始的颜色结束的颜色*/background-image: linear-gradient(to right, #ff9000, #ff5000);border-radius: 6px 6px 0 0;
}
#headSearch .searchContent {height: 40px;
}
#headSearch .searchBox {width: 554px;height: 40px;/*设置成怪异盒模型这样给paddingborder都不受影响*/box-sizing: border-box;border: 2px solid #ff5000;/*没有右侧边框*/border-right: none;/*只有上和左有圆角*/border-radius: 20 0 0 20px;overflow: hidden;position: relative;
}
#headSearch .searchBox input {/* 宽度留点给搜索图片 */width: 490px;/* 内容高度：高度40px-边框2px*2 */height: 36px;line-height: 36px;/* 去除边框 */outline: none;border: none;/* 输入文字前的距离 */text-indent: 10px;/*  placeholder把input盖住了，设置个定位，和placeholder处在同等级别，再给个z-index*/position: absolute;z-index: 1;background-color: transparent; /*透明，为了能够看到后面的文字*/
}
#headSearch .placeholder {position: absolute;top: 6px;left: 14px;
}
#headSearch .placeholder span {color: #9c9c9c;/* 往上走 */vertical-align: 1px;
}
/* 照相机 */
#headSearch .imgSearch {font-size: 28px;position: absolute;right: 20px;color: #9c9c9c;top: -2px;cursor: pointer;
}
#headSearch .searchContent button {width: 74px;height: 40px;text-align: center;font-size: 18px;line-height: 40px;color: #fff;border: none;background-image: linear-gradient(to right, #ff9000, #ff5000);border-radius: 0 20px 20px 0;
}
#headSearch .hotKey {height: 25px;line-height: 25px;
}
#headSearch .hotKey a:hover {color: #f50;
}
/* 导航 */
#nav h2 {width: 190px;height: 30px;line-height: 30px;font-size: 16px;color: #fff;text-align: center;background-color: #f50;
}
#nav ul {float: left;/* 计算calc()注意符号前后必须有空格  任意单位都可以 */width: calc(100% - 190px);background-image: linear-gradient(to right, #ff9000, #ff5000);
}
/* li l30* mr07  f14*/
#nav ul li {line-height: 30px;float: left;margin: 0 7px;font-size: 14px;color: #fff;padding: 0 5px;position: relative;
}
/*为什么a:hover::before而不是a::before:hover
是要放在a标签上才有效果，后面那是放在a标签的伪类上会有效果
*/
#nav ul li:hover:before {content: "";position: absolute;width: 23px;height: 13px;background-image: url(../images/ico_01.gif);top: -13px;/* 居中 */left: 50%;/* width的一半  23/2  12或者13都行 */margin-left: -12px;
}
#nav ul li.size {font-size: 16px;
}
#nav ul li a {color: #fff;font-weight: bold;
}
#nav ul li.line {margin: 0;
}
/* 首屏内容 */
/* 左边的内容w890 */
.firstLeft {width: 890px;
}
/* 侧边导航w190 h522 bcddd */
.firstLeft .sideNav {width: 190px;height: 522px;background: #fff;border: 1px solid #ff5000;/* 边框超出去了没有对齐 */box-sizing: border-box;border-top: none;padding-top: 5px;
}
.firstLeft .sideNav li {height: 32px;line-height: 32px;padding-left: 25px;color: #999;/*过渡背景色*/transition: background-color 0.3s;font-size: 14px;
}
.firstLeft .sideNav li:hover {background: #ffe4dc;color: #f50;
}
.firstLeft .sideNav li a {font-size: 14px;color: #666;
}
.firstLeft .sideNav a:hover {text-decoration: underline;
}
/* 鼠标移入li  a标签的字体变色 */
.firstLeft .sideNav li:hover a {color: #f50;
}
.firstLeft .sideNav li span {font-size: 12px;margin-right: 5px;
}
/* 图片1容器 */
.firstLeft .img1Box {width: 690px;height: 282px;margin-top: 10px;
}
.firstLeft .pic {width: 520px;position: relative;
}
.firstLeft .pic button {width: 20px;height: 30px;line-height: 30px;color: #fff;cursor: pointer;border: none;/*支持情况IE9*/background-color: rgba(0, 0, 0, 0.3);/*针对IE9以下的浏览器*/ /*background-color: #000\9;*//* 透明 */filter: alpha(opacity=30);position: absolute;top: 50%;/*宽度的一半15px*/margin-top: -15px;display: none;
}
.firstLeft .pic button.leftBtn {left: 0;border-radius: 0 15px 15px 0;
}
.firstLeft .pic button.rightBtn {right: 0;border-radius: 15px 0 0 15px;
}
.firstLeft .pic:hover button {display: block;
}
.firstLeft .pic .circle {position: absolute;bottom: 15px;left: 50%;margin-left: -28px;background-color: rgba(255, 255, 255, 0.3);border-radius: 10px;padding: 3px 0;font-size: 0;-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;
}
.firstLeft .pic .circle span {display: inline-block;width: 8px;height: 8px;border-radius: 50%;background-color: #fff;margin: 0 3px;cursor: pointer;
}
.firstLeft .pic .circle span.active {background-color: #ff5000;
}
firstLeft .ad {width: 160px;
}
firstLeft .ad img {width: 160px;
}
/* 图片2容器*/
.firstLeft .img2Box {width: 690px;height: 220px;margin-top: 10px;
}
.firstLeft .img2Box .picTitle {height: 20px;
}
.firstLeft .img2Box .picTitle text {/* 20-3 f12控制台量出线高是3px */height: 17px;line-height: 17px;
}
.firstLeft .img2Box .picTitle .bg {background: url(../images/title_bg.png) no-repeat;padding-left: 136px;columns: #666;
}
.firstLeft .img2Box .picTitle i {color: #ff1648;
}
.firstLeft .img2Box .picTitle .line {height: 3px;background-color: #ff1648;
}
.firstLeft .img2Box .img {width: 520px;height: 200px;background-color: #fff;position: relative;/* 设置图片垂直居中 */display: table-cell; /*单元格*/vertical-align: middle;/*方法二:弹性盒子  兼容性很差display: flexbox;/* 水平对齐 */justify-content: space-around;/* 垂直方向 align-items: center;
*/
}
.firstLeft .img2Box .img img {margin: 0 10px;
}
.firstLeft .img2Box .ad title {height: 20px;line-height: 20px;
}
/* 淘宝头条  */
.firstLeft .news {width: 890px;height: 100px;background: #fff;margin-top: 10px;box-sizing: border-box;padding: 13px 13px 13px 20px;
}
.firstLeft .news .hd {margin-top: 15px;
}
.firstLeft .news .hd h3 {/* 以图换字 */width: 129px;height: 26px;background: url("../images/news_logo.png") no-repeat;/* 隐藏文字 */text-indent: -9999px;overflow: hidden;
}
.firstLeft .news .hd p {color: #999;line-height: 24px;
}
.firstLeft .news .newList {width: 680px;/* 设置相对定位,"更多"一会要定位*/position: relative;
}
.firstLeft .news .newList .img {margin-right: 15px;
}
.firstLeft .news .newList .img img {width: 130px;height: 73px;
}
.firstLeft .news .newList h4 {line-height: 28px;font-size: 16px;font-weight: normal;
}
.firstLeft .news .newList h4 a {color: #333;
}
.firstLeft .news .newList h4 a:hover,
.firstLeft .news .newList .more:hover {color: #ff5000;
}
.firstLeft .news .newList p {line-height: 18px;font-size: 14px;
}
.firstLeft .news .newList p a {color: #999;
}
.firstLeft .news .newList .more {position: absolute;top: 0;right: 0;
}
/* 右边内容 */
.firstRight {width: 290px;margin-top: 10px;
}
.firstRight .user {height: 140px;background: url("../images/user_bg.png");padding-top: 5px;
}
.firstRight .user .avatar {display: block;width: 50px;height: 50px;margin: 0 auto;/* 给父级元素设置的弧度，所以超出部分隐藏才会是圆形 */border-radius: 50%;overflow: hidden;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;
}
.firstRight .user .avatar img {width: 50px;height: 50px;
}
.firstRight .user .username {text-align: center;line-height: 16px;
}
.firstRight .user .members {text-align: center;line-height: 0;
}
.firstRight .user .members a {line-height: 12px;border-radius: 9px;-webkit-border-radius: 9px;-moz-border-radius: 9px;-ms-border-radius: 9px;-o-border-radius: 9px;padding: 0 10px 0 15px;margin: 0 2px;
}
/* 精灵图 */
.firstRight .user .members a.gold {background: #ffe4cd url("../images/ico.png") 0 -572px no-repeat;
}
.firstRight .user .members a.club {background: #ffe4cd url("../images/ico.png") 0 -528px no-repeat;
}
.firstRight .user .btn {text-align: center;
}
.firstRight .user .btn button {width: 75px;height: 25px;line-height: 25px;margin: 12px 2px 0 2px;color: #fff;font-weight: bold;border-radius: 4px;border: none;background-image: linear-gradient(to right, #ff9000, #ff5000);
}
.firstRight .user .btn button.login {width: 92px;
}
.firstRight .tipOff {display: block;height: 26px;line-height: 26px;color: #f40;background: #ffe4dc;text-align: center;
}
.firstRight .tipOff i {line-height: 12px;vertical-align: 1px;/* 相对定位，相对原来位置 */position: relative;left: 30px;
}
.firstRight .notice {height: 108px;background-color: #fff;
}
.firstRight .notice .title {text-align: center;/* 这里设置为0  下面给li标签再设置字体大小，这样字之间的间距就没了 */font-size: 0;padding-top: 10px;
}
.firstRight .notice .title li {/* inline-block简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。 */display: inline-block;font-size: 12px;line-height: 20px;padding: 0 4px;margin: 0 4px;
}
.firstRight .notice .title li a.active {font-weight: bold;border-bottom: 2px solid #f40;
}
.firstRight .notice .title li a:hover {color: #f40;
}
.firstRight .notice .content {margin: 0 12px;padding-top: 10px;
}
.firstRight .notice .content li {height: 25px;line-height: 25px;overflow: hidden;float: left;width: 130px;
}
.firstRight .notice .content li a:hover,
.firstRight .notice .content li.item1 a {color: #ff5000;
}
.firstRight .notice .content li.item1 {width: 100%;color: #ff5000;
}
/* 图标区 */
.firstRight .icon {width: 100%;height: 231px;background: #fff;/* 定义列宽的算法,fixed的计算方式根据表格宽度自动计算列宽,每列宽度均分整个表格的宽度 */table-layout: fixed;
}
.firstRight .icon td {border: 1px solid #f4f4f4;text-align: center;
}
.firstRight .icon td span {display: block;width: 24px;height: 24px;margin: 0 auto;background: url("../images/ico.png") no-repeat;
}
.firstRight .icon i {line-height: 34px;color: #333;
}
.firstRight .icon .item1 span {background-position: 0 0;
}
.firstRight .icon .item2 span {background-position: 0 -87px;
}
.firstRight .icon .item3 span {background-position: 0 -44px;
}
.firstRight .icon .item4 span {background-position: 0 -132px;
}
.firstRight .icon .item5 span {background-position: 0 -176px;
}
.firstRight .icon .item6 span {background-position: 0 -220px;
}
.firstRight .icon .item7 span {background-position: 0 -264px;
}
.firstRight .icon .item8 span {background-position: 0 -308px;
}
.firstRight .icon .item9 span {background-position: 0 -352px;
}
.firstRight .icon .item10 span {background-position: 0 -396px;
}
.firstRight .icon .item11 span {background-position: 0 -440px;
}
.firstRight .icon .item12 span {background-position: 0 -484px;
}
/* APP */
.firstRight .app {height: 111px;background-color: #fff;
}
.firstRight .app .title h3 {font-size: 14px;padding-left: 14px;
}
.firstRight .app .title a {margin-left: 10px;
}
.firstRight .app .title a:hover {color: #f40;
}
.firstRight .app .appIcon {text-align: center;font-size: 0;
}
.firstRight .app .appIcon li {/* 变成行级块元素 变成横排序*/display: inline-block;margin: 0 10px 8px 10px;width: 32px;height: 32px;
}
.firstRight .app .appIcon li img {width: 32px;height: 32px;
}
/* 有好货 */
.goods {width: 590px;height: 658px;background: #fff;
}
.goods .head {height: 24px;margin: 20px 0;padding: 0 20px;line-height: 24px;
}
.goods .head h3 {/* 预防换行符解析成空格 */font-size: 0;font-weight: normal;
}
.goods .head h3 img {height: 24px;
}
.goods .head h3 span {/* 和img标签对齐 */vertical-align: middle;color: #ccc;font-size: 20px;margin: 0 5px;
}
.goods .head h3 i {font-size: 12px;/* 对齐 */vertical-align: middle;
}
.goods .head .change {color: #999;
}
.goods .list {/* 居中对齐,并且在一行中显示,所以换成inline-block,如果用float要设置成居中还得算距离,很麻烦 *//* 但是设置inline-block就得处理换行符被解析成空格的问题,先在父级设置字体为0 */font-size: 0;text-align: center;
}
.goods .list li {display: inline-block;width: 180px;margin: 0 2px 35px 2px;text-align: left;
}
.goods .list li img {width: 180px;height: 180px;
}
.goods .list li h4 {font-size: 16px;height: 28px;line-height: 28px;font-weight: normal;
}
.goods .list li h4 a:hover {color: #f40;
}
.goods .list li .text {height: 24px;line-height: 24px;font-size: 14px;overflow: hidden;
}
.goods .list li .text a {color: #999;
}
.goods .list li .comment {display: block;height: 22px;line-height: 22px;font-size: 12px;color: #35b1ff;margin-top: 12px;
}
.goods .list li .comment span {margin-right: 4px;font-size: 14px;
}
/* 爱逛街 */
.shopping .list li .text {height: 44px;/* 行高是高度的一半,这样文字占两行 */line-height: 22px;font-size: 14px;margin-top: 11px;overflow: hidden;
}
.shopping .list li .text span {font-size: 14px;color: #ebebeb;/* 相对自己原来位置上移 */position: relative;top: -5px;
}
.shopping .list li a:hover {color: #f40;
}
.shopping .list span img {width: 22px;height: 22px;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;
}
.shopping .list li .comment i {color: #999;
}
/* 右侧固定定位导航 */
#tool {width: 50px;height: 350px;/* background-color: #f00; */position: fixed;top: 100px;right: 3%;
}
#tool span {font-size: 32px;color: #ff7f13;width: 50px;height: 36px;line-height: 36px;text-align: center;position: absolute;top: -28px;
}
#tool .btn {height: 350px;border-radius: 8px;overflow: hidden;-webkit-border-radius: 8px;-moz-border-radius: 8px;-ms-border-radius: 8px;-o-border-radius: 8px;
}
#tool a{display: block;width: 50px;height: 50px;text-align: center;background: #fff;/* 在空格的地方强制换行 */word-break: keep-all;padding-top:6px;box-sizing: border-box;position: relative;
}
#tool a:after{content: '';border-bottom: 1px solid #efefef;width: 34px;position: absolute;left: 8px;top: 0;
}
#tool a.item6{line-height: 40px;
}
#tool a:hover,#tool a.active{background-image: linear-gradient(135deg,#ff9000,#ff5000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);color: #fff;font-weight: bold;
}
#tool a:hover:after,#tool a.active:after{border: none;
}

3.reset.css

/* 样式重置 */
body,p,h1,h2,h3,h4,ul{margin: 0;
}
ul{margin: 0;padding: 0;list-style: none;
}
img{border:none;/* 垂直对齐方式 */vertical-align: middle;
}
a{text-decoration: none;color: #3c3c3c;
}
i{font-style: normal;
}
input,button{margin: 0;padding: 0;
}
button{outline: none;
}
table{border-collapse: collapse;
}
th,td{padding: 0;
}
body{/* 设置字体  font是复合属性,写在一起要尊重规则  */font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;/* font-family: '宋体';font-family: '\5b8b\4f53';font-family: SimSun;font-family: "微软雅黑";font-family: Miscrosoft YaHei; */color: #3c3c3c;/* background-color: #f4f4f4; */
}
/* 预定义样式 常使用的 */
/* 清除浮动三件套 */
.clearfix:after{content:'';clear: both;display: block;
}
/* 浮动 */
.fl{float: left;
}
.fr{float:right;
}
.layer{width: 1190px;margin:0 auto;
}
/* 常用颜色 */
.c4{color: #f40;
}
.c5{color: #f50;
}
.c6{color: #8d7afb;
}
.c7{color: #a8c001;
}
.mr5{ margin-right: 5px;
}
.mr7{margin-right: 7px;
}
.mt10{margin-top: 10px;
}
.mr10{margin-right: 10px;
}