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;
}
运行结果
<!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="https://www.ctyun.cn/portal/link.html?target=favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://www.ctyun.cn/portal/link.html?target=.%2Fcss%2Fbase.css">
<link rel="stylesheet" href="https://www.ctyun.cn/portal/link.html?target=.%2Fcss%2Fcommon.css">
<link rel="stylesheet" href="https://www.ctyun.cn/portal/link.html?target=.%2Fcss%2Findex.css">
</head>
<body>
<!-- 快捷导航 -->
<div class="shortcut">
<div class="wrapper">
<ul>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">请先登录</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">免费注册</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">我的订单</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">会员中心</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">帮助中心</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">在线客服</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23"><span></span>手机版</a></li>
</ul>
</div>
</div>
<div class="header wrapper">
<div class="logo">
<h1><a href="https://www.ctyun.cn/portal/link.html?target=%23">小兔鲜儿</a></h1>
</div>
<div class="nav">
<ul>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">首页</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">生鲜</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">美食</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">餐厨</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">电器</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">居家</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">洗护</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">孕婴</a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">服装</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="https://www.ctyun.cn/portal/link.html?target=%23"><img src="./uploads/banner_1.png" alt=""></a>
</li>
</ul>
<!-- 侧导航 -->
<div class="aside">
<ul>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">生鲜<span>水果 蔬菜</span></a></li>
<li><a href="https://www.ctyun.cn/portal/link.html?target=%23">生鲜<span>水果 蔬菜</span></a></li>
</ul>
</div>
<!-- 箭头 -->
<!-- prev: 上一个 -->
<a href="https://www.ctyun.cn/portal/link.html?target=%23" class="prev"></a>
<!-- next : 下一个 -->
<a href="https://www.ctyun.cn/portal/link.html?target=%23" 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="https://www.ctyun.cn/portal/link.html?target=%23">关于我们</a> |
<a href="https://www.ctyun.cn/portal/link.html?target=%23">帮助中心</a> |
<a href="https://www.ctyun.cn/portal/link.html?target=%23">售后服务</a> |
<a href="https://www.ctyun.cn/portal/link.html?target=%23">配送与验收</a> |
<a href="https://www.ctyun.cn/portal/link.html?target=%23">商务合作</a> |
<a href="https://www.ctyun.cn/portal/link.html?target=%23">搜索推荐</a> |
<a href="https://www.ctyun.cn/portal/link.html?target=%23">友情链接</a>
</p>
<p>CopyRight @ 小兔鲜儿</p>
</div>
</div>
</div>
</body>
</html>
运行结果
