index.css
.banner { height: 500px; background-color: #f5f5f5; } .banner .wrapper { position: relative; height: 500px; background-color: pink; } /* 侧导航 */ .banner .aside { position: absolute; left: 0; top: 0; width: 250px; height: 500px; background-color: rgba(0,0,0,.8); } .banner .aside li { height: 50px; line-height: 50px; } .banner .aside a { position: relative; /* 宽度和父级一样 */ padding-left: 36px; padding-right: 19px; display: block; height: 50px; color: #fff; } .banner .aside a:hover { background-color: #27ba9b; } /* a的里面最后的位置添加箭头 */ .banner .aside a::after { position: absolute; right: 19px; top: 19px; content: ''; width: 6px; height: 11px; background-image: url(../images/sprites.png); background-position: -80px -110px; } /* 箭头 */ .next, .prev { position: absolute; top: 228px; width: 45px; height: 45px; background-color: rgba(0,0,0,.2); background-image: url(../images/sprites.png); border-radius: 50%; } /* 背景图位置负责2件事: 改变箭头在盒子里面的位置; 改变精灵图的位置 */ /* 导致在精灵图中测量的尺寸不准确 */ /* 解决方案有2种: 1. 书写背景图位置属性, 借助谷歌的调试工具调试具体的位置数值 2. 书写标签的时候, a负责盒子,里面再添加一个span负责箭头 */ .prev { left: 260px; background-position: 14px -60px; } .next { right: 10px; background-position: -23px -60px; } /* 圆点 */ .banner ol { position: absolute; left: 680px; bottom: 30px; height: 10px; } .banner ol li { float: left; margin-right: 24px; width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0.4); border-radius: 50%; cursor: pointer; } .banner ol .current { background-color: #fff; } /* 新鲜好物 */ .goods .hd { height: 114px; line-height: 114px; } .goods .hd h2 { float: left; font-size: 29px; font-weight: 400; height: 114px; } .goods .hd h2 span { margin-left: 34px; font-size: 16px; color: #999; } .goods .hd a, .shengxian .hd .more { float: right; color: #999; } .goods .hd a::after, .shengxian .hd .more::after { content: ''; display: inline-block; margin-left: 13px; width: 7px; height: 13px; background-image: url(../images/sprites.png); background-position: 0 -110px; vertical-align: middle; } .goods .bd li { position: relative; float: left; margin-right: 8px; width: 304px; height: 405px; background-color: #f0f9f4; text-align: center; } .goods .bd li:last-child { margin-right: 0; } .goods .bd li img { width: 304px; } .goods .bd li h3 { margin-top: 20px; margin-bottom: 10px; font-size: 20px; font-weight: 400; } .goods .bd li div { color: #9a2e1f; font-size: 17px; }
运行结果
<!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> <!-- 外链式样式表的生成 --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/index.css"> </head> <body> <!-- 快捷导航 --> <div class="shortcut"> <div class="wrapper"> <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="#"><span></span>手机版</a></li> </ul> </div> </div> <div class="header wrapper"> <div class="logo"> <h1><a href="#">小兔鲜儿</a></h1> </div> <div class="nav"> <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> <li><a href="#">服装</a></li> </ul> </div> <div class="search"> <input type="text" placeholder="搜一搜"> <!-- 定位 放大镜 --> <span></span> </div> <div class="car"> <span>2</span> </div> </div> <!-- banner --> <div class="banner"> <div class="wrapper"> <!-- 有多少个图,就有都少个li --> <ul> <li> <a href="#"><img src="./uploads/banner_1.png" alt=""></a> </li> </ul> <!-- 侧导航 --> <div class="aside"> <ul> <li><a href="#">生鲜<span>水果 蔬菜</span></a></li> <li><a href="#">生鲜<span>水果 蔬菜</span></a></li> <li><a href="#">生鲜<span>水果 蔬菜</span></a></li> <li><a href="#">生鲜<span>水果 蔬菜</span></a></li> <li><a href="#">生鲜<span>水果 蔬菜</span></a></li> <li><a href="#">生鲜<span>水果 蔬菜</span></a></li> <li><a href="#">生鲜<span>水果 蔬菜</span></a></li> <li><a href="#">生鲜<span>水果 蔬菜</span></a></li> <li><a href="#">生鲜<span>水果 蔬菜</span></a></li> <li><a href="#">生鲜<span>水果 蔬菜</span></a></li> </ul> </div> <!-- 箭头 --> <!-- prev: 上一个 --> <a href="#" class="prev"></a> <!-- next : 下一个 --> <a href="#" class="next"></a> <!-- 圆点: 当前状态: current / active --> <!-- js 找到用户点击的li 添加类名 li变成白色的 --> <ol> <li></li> <li></li> <li class="current"></li> <li></li> <li></li> </ol> </div> </div> <!-- 新鲜好物 --> <div class="goods wrapper"> <!-- hd header 头部 --> <div class="hd"> <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2> <a href="#">查看全部</a> </div> <!-- body 身体, 内容 --> <div class="bd clearfix"> <ul> <li> <a href="#"> <img src="./uploads/new_goods_1.jpg" alt=""> <h3>睿米无线吸尘器F8</h3> <div>￥<span>899</span></div> <b>新品</b> </a> </li> <li> <a href="#"> <img src="./uploads/new_goods_1.jpg" alt=""> <h3>睿米无线吸尘器F8</h3> <div>￥<span>899</span></div> <b>新品</b> </a> </li> <li> <a href="#"> <img src="./uploads/new_goods_1.jpg" alt=""> <h3>睿米无线吸尘器F8</h3> <div>￥<span>899</span></div> </a> </li> <li> <a href="#"> <img src="./uploads/new_goods_1.jpg" alt=""> <h3>睿米无线吸尘器F8</h3> <div>￥<span>899</span></div> </a> </li> </ul> </div> <div class="bd clearfix"> <div class="left"> <a href="#"><img src="./uploads/fresh_goods_cover.png" alt=""></a> </div> <div class="right"></div> </div> </div> <!-- 版权区域 --> <div class="footer"> <div class="wrapper"> <div class="top"> <ul> <li> <!-- 通过伪元素添加标签实现精灵图 --> <span>价格亲民</span> </li> <li> <span>物流快捷</span> </li> <li> <span>品质新鲜</span> </li> </ul> </div> <div class="bottom"> <p> <a href="#">关于我们</a> | <a href="#">帮助中心</a> | <a href="#">售后服务</a> | <a href="#">配送与验收</a> | <a href="#">商务合作</a> | <a href="#">搜索推荐</a> | <a href="#">友情链接</a> </p> <p>CopyRight @ 小兔鲜儿</p> </div> </div> </div> </body> </html>
