1.代码
index.html
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入页签图标 --><link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"><!-- 引入重置样式 --><link rel="stylesheet" href="./css/reset.css"><!-- 引入样式 --><link rel="stylesheet" href="./css/index.css"><title>Document</title>
</head>
<body><!-- 顶部导航条 --><div class="topbar"><!-- 版心 --><div class="container clearfix"><!-- 左侧欢迎区 --><div class="welcome leftfix"><span class="hello">尚品汇欢迎您</span><span>请</span><a href="#" class="login">登录</a> <a href="#" class="register">注册</a> </div><!-- 右侧导航区 --><div class="topbar-nav rightfix"><ul class="list clearfix"><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><!-- 头部 --><div class="header"><div class="container clearfix"><!-- 左侧logo --><div class="logo leftfix"><img src="./images/logo.png" alt="尚品汇"></div><!-- 右侧搜索 --><div class="search rightfix"><form action="#"><input type="text"><button></button></form></div></div></div><!-- 主导航区 --><div class="main-nav"><!-- 版心 --><div class="container clearfix"><div class="all-types leftfix">所有商品分类</div><div class="main-nav-list leftfix"><ul class="main-nav-list leftfix clearfix"><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="#">plus会员</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><!-- 主要内容区 --><div class="main-content"><div class="container clearfix"><!-- ul与div都是块 --><ul class="slide-nav leftfix"><li><!-- 一级菜单 --><a href="#">手机/运营商/数码</a><!-- 二级菜单 --><div class="second-menu clearfix"><dl><dt><a href="">电子书刊</a></dt><dd><a href="#">电子书</a></dd><dd><a href="#">网络原创</a></dd><dd><a href="#">数字杂志</a></dd><dd><a href="#">多媒体图书</a></dd> </dl><dl class="clearfix"><dt><a href="#">音像</a></dt><dd><a href="#">音乐</a></dd><dd><a href="#">影视</a></dd><dd><a href="#">教育音像</a></dd></dl><dl class="clearfix"><dt><a href="#">英文原版</a></dt><dd><a href="#">少儿</a></dd><dd><a href="#">商务投资</a></dd><dd><a href="#">英语学习考试</a></dd><dd><a href="#">文学</a></dd><dd><a href="#">传记</a></dd><dd><a href="#">励志</a></dd></dl><dl class="clearfix"><dt><a href="#">文艺</a></dt><dd><a href="#">小说</a></dd><dd><a href="#">文学</a></dd><dd><a href="#">青春文学</a></dd><dd><a href="#">传记</a></dd><dd><a href="#">艺术</a></dd></dl><dl class="clearfix"><dt><a href="#">少儿</a></dt><dd><a href="#">胎教</a></dd><dd><a href="#">0-2岁</a></dd><dd><a href="#">3-6岁</a></dd><dd><a href="#">7-10岁</a></dd><dd><a href="#">11-14岁</a></dd></dl><dl class="clearfix"><dt><a href="#">人文社科</a></dt><dd><a href="#">历史</a></dd><dd><a href="#">哲学</a></dd><dd><a href="#">国学</a></dd><dd><a href="#">政治/军事</a></dd><dd><a href="#">法律</a></dd><dd><a href="#">人文社科</a></dd><dd><a href="#">心理学</a></dd><dd><a href="#">文化</a></dd><dd><a href="#">社会科学</a></dd></dl><dl class="clearfix"><dt><a href="#">经管励志</a></dt><dd><a href="#">经济</a></dd><dd><a href="#">金融与投资</a></dd><dd><a href="#">管理</a></dd><dd><a href="#">励志与成功</a></dd></dl><dl class="clearfix"><dt><a href="#">生活</a></dt><dd><a href="#">健康与保健</a></dd><dd><a href="#">家庭与育儿</a></dd><dd><a href="#">旅游</a></dd><dd><a href="#">烹饪美食</a></dd></dl><dl class="clearfix"><dt><a href="#">科技</a></dt><dd><a href="#">工业技术</a></dd><dd><a href="#">科普读物</a></dd><dd><a href="#">建筑</a></dd><dd><a href="#">医学</a></dd><dd><a href="#">科学与自然</a></dd><dd><a href="#">计算机与互联网</a></dd><dd><a href="#">电子通信</a></dd></dl><dl class="clearfix"><dt><a href="#">教育</a></dt><dd><a href="#">中小学教辅</a></dd><dd><a href="#">教育与考试</a></dd><dd><a href="#">外语学习</a></dd><dd><a href="#">大中专教材</a></dd><dd><a href="#">科学与自然</a></dd><dd><a href="#">字典词典</a></dd></dl><dl class="clearfix"><dt><a href="#">艺术与收藏</a></dt><dd><a href="#">经济管理</a></dd><dd><a href="#">文化与艺术</a></dd></dl><dl class="clearfix"><dt><a href="#">其他</a></dt><dd><a href="#">工具书</a></dd><dd><a href="#">杂志期刊</a></dd><dd><a href="#">套装书</a></dd><dd><a href="#">打折图书</a></dd></dl></div><li><a href="#">家具/家居/家装/厨具</a><div class="second-menu"><dl class="clearfix"><dt><a href="#">大家电</a></dt><dd><a href="#">平板电视</a></dd><dd><a href="#">空调</a></dd><dd><a href="#">冰箱</a></dd><dd><a href="#">洗衣机</a></dd><dd><a href="#">迷你音响</a></dd></dl><dl class="clearfix"><dt><a href="#">厨卫家电</a></dt><dd><a href="#">燃气灶</a></dd><dd><a href="#">油烟机</a></dd><dd><a href="#">热水器</a></dd><dd><a href="#">消毒柜</a></dd><dd><a href="#">洗碗机</a></dd></dl><dl class="clearfix"><dt><a href="#">厨卫小电</a></dt><dd><a href="#">料理机</a></dd><dd><a href="#">榨汁机</a></dd><dd><a href="#">电饭煲</a></dd><dd><a href="#">压力锅</a></dd><dd><a href="#">豆浆机</a></dd><dd><a href="#">咖啡机</a></dd><dd><a href="#">微波炉</a></dd><dd><a href="#">电磁炉</a></dd></dl><dl class="clearfix"><dt><a href="#">生活电器</a></dt><dd><a href="#">取暖电器</a></dd><dd><a href="#">净化器</a></dd><dd><a href="#">加湿器</a></dd><dd><a href="#">扫地机器人</a></dd><dd><a href="#">吸尘器</a></dd><dd><a href="#">挂烫机</a></dd><dd><a href="#">电话机</a></dd><dd><a href="#">电风扇</a></dd></dl><dl class="clearfix"><dt><a href="#">个护健康</a></dt><dd><a href="#">剃须刀</a></dd><dd><a href="#">脱毛器</a></dd><dd><a href="#">口腔护理</a></dd><dd><a href="#">电吹风</a></dd><dd><a href="#">美容仪</a></dd><dd><a href="#">理发器</a></dd><dd><a href="#">按摩椅</a></dd><dd><a href="#">血压计</a></dd></dl></div></li><li><a href="#">男装/女装/童装/内衣</a><div class="second-menu"><dl class="clearfix"><dt><a href="#">摄影摄像</a></dt><dd><a href="#">数码现货即</a></dd><dd><a href="#">拍立得</a></dd><dd><a href="#">镜头</a></dd><dd><a href="#">户外器材</a></dd><dd><a href="#">数码相框</a></dd></dl><dl class="clearfix"><dt><a href="#">数码配件</a></dt><dd><a href="#">存储卡</a></dd><dd><a href="#">读卡器</a></dd><dd><a href="#">滤镜</a></dd><dd><a href="#">相机包</a></dd><dd><a href="#">数码支架</a></dd></dl><dl class="clearfix"><dt><a href="#">智能设备</a></dt><dd><a href="#">智能手环</a></dd><dd><a href="#">智能眼镜</a></dd><dd><a href="#">健康监测</a></dd><dd><a href="#">体感车</a></dd><dd><a href="#">无人机</a></dd></dl></div></li><li><a href="#">美妆/个护清洁/宠物</a><div class="second-menu"><dl class="clearfix"><dt><a href="#">宠物生活</a></dt><dd><a href="#">宠物粮食</a></dd><dd><a href="#">宠物零食</a></dd><dd><a href="#">医疗保健</a></dd><dd><a href="#">宠物玩具</a></dd><dd><a href="#">出行装备</a></dd></dl><dl class="clearfix"><dt><a href="#">生活日用</a></dt><dd><a href="#">保暖防护</a></dd><dd><a href="#">收纳用品</a></dd><dd><a href="#">雨伞雨具</a></dd><dd><a href="#">浴室用品</a></dd><dd><a href="#">洗漱用品</a></dd></dl></div></li><li><a href="#">女鞋/箱包/钟表/珠宝</a><div class="second-menu"><dl class="clearfix"><dt><a href="#">电脑整机</a></dt><dd><a href="#">笔记本电脑</a></dd><dd><a href="#">台式机</a></dd><dd><a href="#">超极本</a></dd><dd><a href="#">游戏本</a></dd><dd><a href="#">平板电脑</a></dd><dd><a href="#">平板配件</a></dd></dl><dl class="clearfix"><dt><a href="#">电脑配件</a></dt><dd><a href="#">CPU</a></dd><dd><a href="#">主板</a></dd><dd><a href="#">显卡</a></dd><dd><a href="#">硬盘</a></dd><dd><a href="#">SSD固态硬盘</a></dd><dd><a href="#">内存</a></dd></dl></div></li><li><a href="#">男鞋/运动/户外</a><div class="second-menu"><dl class="clearfix"><dt><a href="#">刀剪菜板</a></dt><dd><a href="#">菜刀</a></dd><dd><a href="#">剪刀</a></dd><dd><a href="#">多功能刀</a></dd><dd><a href="#">道具套装</a></dd></dl><dl class="clearfix"><dt><a href="#">水具酒具</a></dt><dd><a href="#">塑料杯</a></dd><dd><a href="#">运动水壶</a></dd><dd><a href="#">保温杯</a></dd><dd><a href="#">保温壶</a></dd></dl></div></li><li><a href="#">房产/汽车/汽车用品</a><div class="second-menu"><dl class="clearfix"><dt><a href="#">清洁用品</a></dt><dd><a href="#">纸巾湿巾</a></dd><dd><a href="#">清洁工具</a></dd><dd><a href="#">驱虫用品</a></dd><dd><a href="#">家庭清洁</a></dd><dd><a href="#">皮具护理</a></dd></dl><dl class="clearfix"><dt><a href="#">面部护肤</a></dt><dd><a href="#">洁面乳</a></dd><dd><a href="#">面膜</a></dd><dd><a href="#">防晒</a></dd><dd><a href="#">隔离</a></dd><dd><a href="#">爽肤水</a></dd></dl></div></li><li><a href="#">母婴/玩具乐器</a><div class="second-menu"><dl class="clearfix"><dt><a href="#">男装</a></dt><dd><a href="#">衬衫</a></dd><dd><a href="#">针织衫</a></dd><dd><a href="#">夹克</a></dd><dd><a href="#">风衣</a></dd><dd><a href="#">牛仔裤</a></dd></dl><dl class="clearfix"><dt><a href="#">女装</a></dt><dd><a href="#">雪纺衫</a></dd><dd><a href="#">休闲裤</a></dd><dd><a href="#">小西装</a></dd><dd><a href="#">皮衣</a></dd><dd><a href="#">羽绒服</a></dd></dl></div></li><li><a href="#">食品/酒类/生鲜/特产</a><div class="second-menu"><dl class="clearfix"><dt><a href="#">钟表</a></dt><dd><a href="#">男表</a></dd><dd><a href="#">瑞士表</a></dd><dd><a href="#">女表</a></dd><dd><a href="#">风衣</a></dd><dd><a href="#">智能手表</a></dd><dd><a href="#">闹钟</a></dd></dl></div></li><li><a href="#">艺术/礼品鲜花/农资绿植</a><div class="second-menu"><dl class="clearfix"><dt><a href="#">流行男鞋</a></dt><dd><a href="#">休闲鞋</a></dd><dd><a href="#">商务鞋</a></dd><dd><a href="#">功能鞋</a></dd><dd><a href="#">布鞋</a></dd><dd><a href="#">人字拖</a></dd></dl><dl class="clearfix"><dt><a href="#">时尚女鞋</a></dt><dd><a href="#">高跟鞋</a></dd><dd><a href="#">凉鞋</a></dd><dd><a href="#">雪地靴</a></dd><dd><a href="#">筒靴</a></dd><dd><a href="#">内增高</a></dd></dl></div></li><li><a href="#">医药保健/计生情趣</a><div class="second-menu"><dl class="clearfix"><dt><a href="#">营养辅食</a></dt><dd><a href="#">维生素</a></dd><dd><a href="#">面条</a></dd><dd><a href="#">益生菌</a></dd><dd><a href="#">钙铁锌硒</a></dd><dd><a href="#">DHA</a></dd></dl><dl class="clearfix"><dt><a href="#">妈妈专区</a></dt><dd><a href="#">孕妇装</a></dd><dd><a href="#">孕妇护肤</a></dd><dd><a href="#">防辐射服</a></dd><dd><a href="#">产后塑身</a></dd><dd><a href="#">月子装</a></dd></dl></div></li><li><a href="#">图书/文娱/教育/电子书</a><div class="second-menu"><dl class="clearfix"><dt><a href="#">流行皮包</a></dt><dd><a href="#">钱包</a></dd><dd><a href="#">手包</a></dd><dd><a href="#">钥匙包</a></dd><dd><a href="#">手提包</a></dd><dd><a href="#">公文包</a></dd></dl><dl class="clearfix"><dt><a href="#">婚庆</a></dt><dd><a href="#">婚庆首饰</a></dd><dd><a href="#">婚纱摄影</a></dd><dd><a href="#">婚宴</a></dd><dd><a href="#">婚庆服务</a></dd><dd><a href="#">婚纱礼服</a></dd></dl></div></li><li><a href="#">机票/酒店/旅游/生活</a><div class="second-menu"><dl class="clearfix"><dt><a href="#">地方特产</a></dt><dd><a href="#">北京</a></dd><dd><a href="#">新疆</a></dd><dd><a href="#">四川</a></dd><dd><a href="#">福建</a></dd><dd><a href="#">重庆</a></dd></dl><dl class="clearfix"><dt><a href="#">进口食品</a></dt><dd><a href="#">饼干果干</a></dd><dd><a href="#">巧克力</a></dd><dd><a href="#">牛奶</a></dd><dd><a href="#">调味食品</a></dd><dd><a href="#">休闲零食</a></dd></dl></div></li><li><a href="#">众筹/白条/保险/企业金融</a><div class="second-menu"><dl class="clearfix"><dt><a href="#">木手串</a></dt><dd><a href="#">小叶紫檀</a></dd><dd><a href="#">黄花梨</a></dd><dd><a href="#">禅香木</a></dd><dd><a href="#">金丝楠</a></dd></dl><dl class="clearfix"><dt><a href="#">钻石</a></dt><dd><a href="#">裸钻</a></dd><dd><a href="#">钻戒</a></dd><dd><a href="#">耳饰</a></dd><dd><a href="#">手镯</a></dd><dd><a href="#">手链</a></dd></dl></div></li><li><a href="#">安装/维修/清洗/二手</a><div class="second-menu"><dl class="clearfix"><dt><a href="#">二手家电</a></dt><dd><a href="#">洗衣机</a></dd><dd><a href="#">烘干机</a></dd><dd><a href="#">烤箱</a></dd><dd><a href="#">微波炉</a></dd></dl><dl class="clearfix"><dt><a href="#">上门清洗</a></dt><dd><a href="#">油烟机</a></dd><dd><a href="#">橱柜</a></dd><dd><a href="#">灶台</a></dd><dd><a href="#">锅</a></dd><dd><a href="#">燃气灶</a></dd></dl></div></li></ul><div class="banner leftfix"><img src="./images/banner主图.png" alt=""></div><div class="slide-other leftfix"><div class="message"><div class="title clearfix" ><span class="leftfix">尚品快报</span><a href="#" class="rightfix">更多 ></a></div><!-- 也可以用div --><ul class="mes"><li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li><li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li><li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li><li><a href="#">[特惠] 毛衣+直筒裤才是YYDS</a></li></ul></div><!-- 右边部分下面 --><div class="slide-other-nav"><ul class="slide-other-nav-list clearfix"><li><div class="picture"></div><span>话费</span></li><li><div class="picture"></div><span>话费</span></li><li><div class="picture"></div><span>话费</span></li><li><div class="picture"></div><span>话费</span></li></ul><ul class="slide-other-nav-list clearfix"><li><div class="picture"></div><span>话费</span></li><li><div class="picture"></div><span>话费</span></li><li><div class="picture"></div><span>话费</span></li><li><div class="picture"></div><span>话费</span></li></ul><ul class="slide-other-nav-list clearfix"><li><div class="picture"></div><span>话费</span></li><li><div class="picture"></div><span>话费</span></li><li><div class="picture"></div><span>话费</span></li><li><div class="picture"></div><span>话费</span></li></ul></div></div></div></div><!-- 秒杀 --><div class="seckill clearfix"><div class="container"><img src="./images/seckill.png" alt=""><img src="./images/banner1.png" alt=""><img src="./images/banner2.png" alt=""><img src="./images/banner3.png" alt=""><img src="./images/baner4.png" alt=""></div></div><!-- 楼层 --><div class="floor"><div class="container"><!-- 上部分 --><div class="floor-nav clearfix"><div class="floor-name leftfix">家用电器</div><ul class="floor-nav-list rightfix clearfix"><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 class="floor-info clearfix"><!-- 要知道宽高怎么得出的 --><div class="item item1"><!-- ul,li 块元素 --><ul class="item1-list clearfix"><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><img src="./images/编组.png"></div><div class="item item2"><img src="./images/appliance_banner07.png"></div><div class="item item3"><img src="./images/微波炉.png"><img src="./images/空气炸锅.png"></div><div class="item item4"><img src="./images/冰箱.png"></div><div class="item item5"><img src="./images/电饭煲.png"><img src="./images/电饭煲2.png"></div></div></div></div><!-- 页脚 --><div class="footer"><div class="container"><div class="top-links clearfix"><ul class="links-list"><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><ul class="links-list"><li><a href="#">配送方式</a></li><li><a href="#">上门自提</a></li><li><a href="#">211限时达</a></li><li><a href="#">配送服务查询</a></li><li><a href="#">配送费收取标准</a></li></ul><ul class="links-list"><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><ul class="links-list"><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><ul class="links-list"><li><a href="#">特色服务</a></li><li><a href="#">夺宝岛</a></li><li><a href="#">DIY装机</a></li><li><a href="#">延保服务</a></li><li><a href="#">尚品汇E卡</a></li><li><a href="#">尚品汇通信</a></li><li><a href="#">尚品鱼座智能</a></li></ul><ul class="links-list"><li><a href="#">自营覆盖区县</a></li><li><a href="#">尚品汇已向全国2661个区县</a></li><li><a href="#">提供自 营配送服务，支持货到</a></li><li><a href="#">付款、POS 机刷卡和售后上门</a></li><li><a href="#">常见问题</a></li><li><a href="#">服务</a></li><li><a href="#">查看详情</a></li></ul></div><div class="line"></div><div class="bottom-links"><ul class="bottom-links-list clearfix"><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 class="copyright">京ICP备12345678901</div></div></div></div><div class="lang"></div>
</body>
</html>index.css
/* 不是只有导航条在用 */
.container{/* 不需要给高度，由内容撑开 */width: 1190px;margin:0 auto;
}
/* #region顶部导航条开始 */
.topbar{height: 30px;background-color: #ECECEC;
}
.welcome{/* 行内元素像处理文本一样处理 */margin:0 auto;text-align: center;/* 这里的height不能少 */height: 30px;line-height: 30px;font-size: 0;color: #666;}
.welcome span,.welcome a{font-size: 12px;
}
.welcome .hello{margin: 28px;
}
.welcome .login{padding-right: 10px;border-right: #666 solid 1px;
}
.welcome .register{padding-left: 10px;
}
.topbar-nav .list li{float:left;height: 30px;line-height: 30px;
}
.topbar-nav .list li a{padding:0 15px;border-right: 1px solid black;
}
.topbar-nav .list li:first-child a{padding-left: 0%;
}
.topbar-nav .list li:last-child a{padding-right: 0;/* 清空边框 */border:0;
}
/* #endregion顶部导航条结束 */
/* #region头部开始 */
.header{height: 120px;
}
.header .search form{margin-top: 42px;/* input与button有自己的font-size */font-size: 0;
}
.header .search input{height: 34px;width: 508px;border: 1px solid #DD302D;
}
.header .search button{height: 34px;width: 78px;border: 1px solid #DD302D;/* 输入框与按钮对不齐，是因为基线对齐原因 */vertical-align: top;background-image: url(../images/serch_icon.png);background-color: #DD302D;background-repeat: no-repeat;/* text-align: center;line-height: 34px; 想把图标放在正中心，没用 */background-position: 28px 6px;
}
/* #endregion头部结束 */
/* #region主导航区 */
.main-nav{height: 48px;border-bottom: 1px solid #DD302D;
}
.main-nav .container .all-types{text-align: 48px;width: 190px;line-height: 48px;color: white;background-color: #DD302D;font-size: 16px;text-align: center;
}
.main-nav .container .main-nav-list{line-height: 48px;
}
.main-nav .container .main-nav-list li{float: left;margin: 0 10px;font-size: 16px;
}
/* #endregion主导航区结束 */
/* #region主要内容区 */.main-content{margin-top: 10px;
}
.main-content .container .slide-nav{width: 190px;height: 458px;background-color: #f4f4f4;/* 不能放爹身上 */position: relative;
}
.main-content .container .slide-nav li{font-size: 14px;/* 可用margin，padding */height: 28px;line-height: 28px;;padding-left: 16px;}
.main-content .container .slide-nav li:hover{background-color: #DD302D;
}
.main-content .container .slide-nav li:hover>a{color: white;
}
.second-menu{/* width: 700px;变为680.因为padding20px，算总宽度带着padding */width: 680px;height: 458px;position: absolute;top:0;left:190px;padding-left:20px;background-color: white;display: none;
}
.main-content .container .slide-nav li:hover .second-menu{display: block;
}
dl{height: 36px;line-height:36px;
}
dl:first-child{margin-top: 10px;
}
dt{float: left;width: 70px;/* font-weight: 100;想字体加粗没用，因为字体设置本身原因 */font-weight: bold;margin-right: 10px;
}
dd{float: left;
}
dd a{/* 为什么是padding？改变边框紧贴文字 */padding: 0 10px;/* dt，dd是块元素 */border-left: 1px solid #666;
}
.main-content .container .banner{width: 690px;height: 458px;margin: 0 10px;
}
.main-content .container .slide-other{width: 290px;height: 458px;}
.slide-other{}
.slide-other .message{width: 260px;height: 156px;border:1px solid #d9d9d9;padding: 0 14px;
}
.slide-other .message .title{height: 38px;line-height: 38px;border-bottom: #d9d9d9 1px solid;
}
.slide-other .message .title span{font-size: 14px;
}
.slide-other .message .title a{font:12px
}
.slide-other .slide-other{margin-top: 10px;width: 290px;height: 290px;
}
。slide-other-nav{overflow: hidden;}
.slide-other .message .mes li{height: 26px;line-height: 26px;
}
.slide-other-nav-list:first-child{margin-top: 16px;
}
.slide-other-nav-list:nth-child(2){margin: 17px 0;
}
.slide-other-nav-list li{width: 48px;height: 70px;float:left;margin:0 11px;text-align: center;cursor:pointer
}
.slide-other-nav-list li:first-child{margin-left: 16px;
}
.slide-other-nav-list .picture{width: 48px;height: 48px;/* 精灵图：把9个小图标放一个图标上面 */background-image: url('../images/精灵图-侧边功能.png');
}
/* 设置第一行 */
/* .slide-other-nav-list:nth-child(1):找到第一行 */
.slide-other-nav-list:nth-child(1) li:nth-child(1) .picture{background-position: 0 0;
}
.slide-other-nav-list:nth-child(1) li:nth-child(2) .picture{background-position: -48px 0;
}
.slide-other-nav-list:nth-child(1) li:nth-child(3) .picture{background-position: -96px 0;
}
.slide-other-nav-list:nth-child(1) li:nth-child(4) .picture{background-position: -144px 0;
}
/* 设置第二行 */
.slide-other-nav-list:nth-child(2) li:nth-child(1) .picture{background-position: 0 -48px;
}
.slide-other-nav-list:nth-child(2) li:nth-child(2) .picture{background-position: -48px -48px;
}
.slide-other-nav-list:nth-child(2) li:nth-child(3) .picture{background-position: -96px -48px;
}
.slide-other-nav-list:nth-child(2) li:nth-child(4) .picture{background-position: -144px -48px;
}
.slide-other-nav-list:nth-child(3) li:nth-child(1) .picture{background-position: 0 -96px;
}
.slide-other-nav-list:nth-child(3) li:nth-child(2) .picture{background-position: -48px -96px;
}
.slide-other-nav-list:nth-child(3) li:nth-child(3) .picture{background-position: -96px -96px;
}
.slide-other-nav-list:nth-child(3) li:nth-child(4) .picture{background-position: -144px -96px;
}
/* #endregion主要内容区 */
/* #region秒杀区 */
.seckill{margin-top: 10px;cursor: pointer;
}
.seckill img{float: left ;margin-right: 11px;
}
.seckill img:first-child{margin-right: 0;
}/* #endregion秒杀区 */
/* #region楼层区 */
.floor{margin-top: 48px;
}
.floor-nav{height: 30px;padding-bottom: 4px;border-bottom: 2px solid #DD302D;line-height: 30px;
}
.floor-name{font-size: 20px;
}
.floor-nav-list li{float: left;font-size: 16px;
}
.floor-nav-list li a{padding: 0 10px;border-right: 1px solid #666;
}
.floor-nav-list li:first-child a
{padding-left: 0;
}
.floor-nav-list li:last-child a
{padding-right: 0;border: 0;
}
.floor-info .item{float: left;
}
.item1,.item2,.item3,.item4,.item5{}
.floor-info .item1{
width: 190px;
height: 392px;
background-color: #f4f4f4;
padding: 20px;
}
.item1-list{margin-bottom: 29px;
}
.item1-list li{width: 90px;height: 22px;padding-bottom: 3.5px;border-bottom:1px solid #d9d9d9;font-size: 16px;text-align: center;float: left;
}
.item1-list li:nth-child(2n-1){float: left;
}
.item1-list li:nth-child(2n){float: right;
}
.item1-list li:nth-child(3),.item1-list li:nth-child(4){margin: 14.4px 0;
}
.lang{height: 2000px;
}.floor-info .item2{
width: 340px;
height: 432px;
}
.floor-info .item3{width: 206px;height: 432px;border-right: 1px solid #e2e2e2;
}
.floor-info .item3 img,.floor-info .item4 img,.floor-info .item5 img{border-bottom: 1px solid #e2e2e2;
}
.floor-info .item4{width: 206px;height: 432px;width: 206px;height: 432px;border-right: 1px solid #e2e2e2;
}
.floor-info .item5{width: 206px;height: 432px;
}/* #endregion楼层区 */
/* #region页脚区 */
.footer{height: 440px;background-color: #483e3e;
}
.links-list{float: left;width: 190px;height: 176px;margin-top: 48px;margin-right: 10px;font-size: 14px;
}/* 最后一个掉下来，取消right的margin */.links-list:last-child{margin-right: 0px;}
.links-list a{/* 继承过来的干不过自己有的 */color: white;
}
.line{margin-top: 22px;background-color: #584d4d ;height: 1px;
}
.bottom-links-list li{float: left;
}
.bottom-links-list li a {padding:0 26px;border-right: 1px white solid;color: white;
}
.bottom-links {/* margin: 0 auto;前提是儿子块必须有宽度 */text-align: center;margin-top: 47px;}
.bottom-links-list{display: inline-block;
}
.bottom-links-list li:first-child{padding-left: 0;
}
.bottom-links-list li:last-child{padding-right: 0;border: 0;
}
.copyright{color: white;
}
/* #endregion页脚区 */2.效果
3.资源
尚硅谷-尚品汇项目
zip压缩包
