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; }
运行结果
<!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="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>
