案例 --- 尚品汇前端页面实现
0. 资料地址
0.1 静态文件地址
https://pan.baidu.com/s/1Hx5hWneJQ-4yFteE1iM9qw?pwd=yyds#list/path=%2Fsharelink4035995002-565810062936917%2F%E5%B0%9A%E7%A1%85%E8%B0%B7%E5%89%8D%E7%AB%AF%E5%AD%A6%E7%A7%91%E5%85%A8%E5%A5%97%E6%95%99%E7%A8%8B%2F1.%E5%B0%9A%E7%A1%85%E8%B0%B7%E5%89%8D%E7%AB%AF%E5%AD%A6%E7%A7%91--%E6%A0%B8%E5%BF%83%E6%8A%80%E6%9C%AF%2F%E5%B0%9A%E7%A1%85%E8%B0%B7%E7%A6%B9%E7%A5%9EHTML%2BCSS%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80&parentPath=%2Fsharelink4035995002-565810062936917
0.2 整体页面效果
1. 顶部导航栏
css/index.css
/* 公共样式 start */
.container{ /* 版心的宽度为1190px,在这个视口的正中央,高度由内容撑开 */
width: 1190px;
margin: 0 auto;
}
/* 公共样式 end */
/* region 顶部导航条 start */ /* region标识 为了方便折叠代码 */
.topbar{
height: 30px;
background-color: #ECECEC;
}
.welcome{
height: 30px;
line-height: 30px; /* 文字垂直居中 */
font-size: 0; /* 消除子元素中间的空白 */
color: #666;
}
.welcome span,.welcome a{
font-size: 12px;
}
.welcome .hello{
margin-right: 28px;
}
.welcome .login{
padding-right: 10px;
border-right: 1px solid #666;
}
.welcome .register{
padding-left: 10px;
}
.topbar-nav .list li{
height: 30px;
line-height: 30px;
float: left;
}
.topbar-nav .list li a{
padding: 0 15px;
border-right: 1px solid #666; /* 每个li的a标签加边框,且左右内边距为15px,将边框顶走 */
}
.topbar-nav .list li:first-child a{
padding-left: 0;
}
.topbar-nav .list li:last-child a{
padding-right: 0;
border: 0; /* 去除最后一个li的边框 */
}
/*.welcome .login:after{*/
/* content: "|";*/
/* margin-left: 10px;*/
/*}*/
/* endregion 顶部导航条 end */
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>尚品汇</title>
<!-- 1. 引入页签图标 -->
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<!-- 2. 引入重置样式 -->
<link rel="stylesheet" href="./css/reset.css">
<!-- 3. 引入自己写的css样式 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 顶部导航条-->
<div class="topbar">
<!-- 版心 -->
<div class="clearfix container">
<!-- 左侧欢迎区 -->
<div class="leftfix welcome">
<span class="hello">尚品汇欢迎您</span>
<span >请</span>
<a href="#" class="login">登录</a>
<a href="#" class="register">免费注册</a>
</div>
<!-- 右侧导航区 -->
<div class="rightfix topbar-nav">
<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>
</body>
</html>
2. 头部
css/index.css
/* region 头部 start*/
.header{
height: 120px;
}
.header .search form{
margin-top: 42px;
font-size: 0;
}
.header .search input{
width: 508px;
height: 34px;
border: 1px solid #DD302D;
}
.header .search button{
width: 80px;
height: 36px;
border: 1px solid #DD302D;
background-color: #DD302D;
vertical-align: top; /* 消除文字基线对齐导致的影响 */
background-image: url("../images/serch_icon.png");
background-repeat: no-repeat; /* 不让图片重复平铺 */
background-position: 28px 6px; /* 图片居中 */
}
/* endregion 头部 end*/
index.html
<!-- 顶部导航条-->
<div class="topbar"></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>
3. 主导航区
index.css
/* region 主导航区 start*/
.main-nav {
margin-top: 1px;
height: 48px;
border-bottom: 1px solid #DD302D;
}
.main-nav .all-types{
width: 190px;
height: 48px;
background-color: #DD302D;
text-align: center;
line-height: 48px;
color: white;
font-size: 16px;
;
}
.main-nav .main-nav-list li{
float: left;
line-height: 48px;
font-size: 16px;
}
.main-nav .main-nav-list li a{
padding: 0 15px;
}
/* endregion 主导航区 end*/
index.html
<!-- 顶部导航条-->
<div class="topbar"></div>
<!-- 头部 -->
<div class="header"></div>
<!-- 主导航区 -->
<div class="main-nav">
<div class="container clearfix">
<div class="leftfix all-types">全部商品分类</div>
<ul class="leftfix main-nav-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="#">PLUS会员</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>
</html>
4. 主要内容区
4.1 左侧导航栏
1. 主菜单
css/index.css
/* region 主要内容区 start*/
/* region 左侧导航栏 start*/
.main-content .left-nav{
width: 190px;
height: 458px;
background-color: #ececec;
font-size: 14px;
}
.main-content .left-nav li{
padding: 7px 16px 0;
}
.main-content .left-nav li:hover{ /* 鼠标悬浮在每一个li时,背景为红色 */
background-color: #DD302D;
}
.main-content .left-nav li:hover a{ /* 鼠标悬浮在每一个li时,文字为白色 */
color: white;
}
/* endregion 左侧导航栏 end*/
.main-content{
margin-top: 10px;
}
/* region 中部轮播图 start*/
.main-content .center-banner{
width: 690px;
height: 458px;
background-color: orange;
margin: 0 10px;
}
/* endregion 中部轮播图 end*/
/* region 右侧侧边栏 start*/
.main-content .right-nav{
width: 290px;
height: 458px;
background-color: green;
}
/* endregion 右侧侧边栏 end*/
/* endregion 主要内容区 end*/
index.html
<!-- 顶部导航条-->
<div class="topbar"></div>
<!-- 头部 -->
<div class="header"></div>
<!-- 主导航区 -->
<div class="main-nav"></div>
<!-- 主要内容区 -->
<div class="main-content">
<div class="container clearfix">
<!-- 左侧导航栏 -->
<ul class="left-nav leftfix">
<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>
<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="center-banner leftfix">2</div>
<!-- 右侧侧边栏 -->
<div class="right-nav leftfix">3</div>
</div>
</div>
</html>
2. 二级菜单
css/index.css
/* region 主要内容区 start*/
/* 二级菜单 */
.main-content .left-nav .second-menu {
width: 680px;
height: 458px;
padding-left: 20px;;
background-color: white;
position: absolute; /* 参考ul开始绝对定位,因为ul的位置是不变的,每个li的位置距离顶部的位置都是不一定的 */
left: 190px;
top: 0;
display: none; /* 默认二级菜单栏不显示 */
}
.main-content .left-nav .second-menu dl{
height: 36px;
line-height: 36px;
}
.main-content .left-nav .second-menu dt {
float: left;
width: 70px;
font-weight: bold;
margin-right: 10px;
}
.main-content .left-nav .second-menu dd {
float: left;
}
.main-content .left-nav .second-menu dd a{
border-left: 1px solid #666;
padding: 0 10px;
}
/* endregion 左侧导航栏 end*/
.main-content {
margin-top: 10px;
}
/* region 中部轮播图 start*/
.main-content .center-banner {
width: 690px;
height: 458px;
background-color: orange;
margin: 0 10px;
}
/* endregion 中部轮播图 end*/
/* region 右侧侧边栏 start*/
.main-content .right-nav {
width: 290px;
height: 458px;
background-color: green;
}
/* endregion 右侧侧边栏 end*/
/* endregion 主要内容区 end*/
index.html
<!-- 顶部导航条-->
<div class="topbar"></div>
<!-- 头部 -->
<div class="header"></div>
<!-- 主导航区 -->
<div class="main-nav"></div>
<!-- 主要内容区 -->
<div class="main-content">
<div class="container clearfix">
<!-- 左侧导航栏 -->
<ul class="left-nav leftfix">
<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>
</div>
</li>
<li>
<a href="#">电脑/办公</a>
<div class="second-menu"></div>
</li>
<li>
<a href="#">家具/家具/家装/厨具</a>
<div class="second-menu"></div>
</li>
<li>
<a href="#">男装/女装/童装/内衣</a>
<div class="second-menu"></div>
</li>
<li>
<a href="#">美妆/个护清洁/宠物</a>
<div class="second-menu"></div>
</li>
<li>
<a href="#">女鞋/箱包/钟表/珠宝</a>
<div class="second-menu"></div>
</li>
<li>
<a href="#">男鞋/运动/户外</a>
<div class="second-menu"></div>
</li>
<li>
<a href="#">房产/汽车/汽车用品</a>
<div class="second-menu"></div>
</li>
<li>
<a href="#">母婴/玩具乐器</a>
<div class="second-menu"></div>
</li>
<li>
<a href="#">食品/酒类/生鲜/特产</a>
<div class="second-menu"></div>
</li>
<li>
<a href="#">艺术/礼品鲜花/农资绿植</a>
<div class="second-menu"></div>
</li>
<li>
<a href="#">医药保健/计生情趣</a>
<div class="second-menu"></div>
</li>
<li>
<a href="#">图书/文娱/教育/电子书</a>
<div class="second-menu"></div>
</li>
<li>
<a href="#">机票/酒店/旅游/生活</a>
<div class="second-menu"></div>
</li>
<li>
<a href="#">众筹/白条/保险/企业金融</a>
<div class="second-menu"></div>
</li>
<li>
<a href="#">安装/维修/清洗/二手</a>
<div class="second-menu"></div>
</li>
</ul>
<!-- 中部轮播图 -->
<div class="center-banner leftfix">2</div>
<!-- 右侧侧边栏 -->
<div class="right-nav leftfix">3</div>
</div>
</div>
</html>
4.2 中部轮播图
css/index.css
/* region 中部轮播图 start*/
.main-content .center-banner {
width: 690px;
height: 458px;
background-color: orange;
margin: 0 10px;
}
/* endregion 中部轮播图 end*/
index.html
<!-- 顶部导航条-->
<div class="topbar"></div>
<!-- 头部 -->
<div class="header"></div>
<!-- 主导航区 -->
<div class="main-nav"></div>
<!-- 主要内容区 -->
<div class="main-content">
<div class="container clearfix">
<!-- 左侧导航栏 -->
<ul class="left-nav leftfix"></ul>
<!-- 中部轮播图 -->
<div class="center-banner leftfix">
<img src="./images/banner主图.png" alt="">
</div>
<!-- 右侧侧边栏 -->
<div class="right-nav leftfix">
</div>
</div>
</div>
</html>
4.3 右侧侧边栏
1. 尚品快报
css/index.css
/* region 主要内容区 start*/
/* region 右侧侧边栏 start*/
.main-content .right-nav {
width: 290px;
height: 458px;
}
/* 尚品快报 start */
.right-nav .message{
width: 260px;
height: 156px;
border: 1px solid #D9D9D9;
padding: 0 14px;
}
.right-nav .message .title{
height: 38px;
line-height: 38px;
border-bottom: 1px solid #D9D9D9;
}
.right-nav .message .title span{
font-size: 14px;
}
.right-nav .message .title a{
font-size: 12px;
}
.right-nav .message .message-list li{
height: 26px;
line-height: 26px;
}
/* 尚品快报 end */
/* endregion 右侧侧边栏 end*/
/* endregion 主要内容区 end*/
index.html
<!-- 顶部导航条-->
<div class="topbar"></div>
<!-- 头部 -->
<div class="header"></div>
<!-- 主导航区 -->
<div class="main-nav"></div>
<!-- 主要内容区 -->
<div class="main-content">
<div class="container clearfix">
<!-- 左侧导航栏 -->
<ul class="left-nav leftfix"></ul>
<!-- 中部轮播图 -->
<div class="center-banner leftfix"></div>
<!-- 右侧侧边栏 -->
<div class="right-nav leftfix">
<!-- 尚品快报 -->
<div class="message">
<div class="title clearfix">
<span class="leftfix">尚品快报</span>
<a class="rightfix" href="#">更多 ></a>
</div>
<ul class="message-list">
<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="other-nav"></div>
</div>
</div>
</div>
</html>
2. 其他菜单及精灵图优化
方案一: 图片直接显示
css/index.css
/* region 右侧侧边栏 start*/
/* 其他 start */
.right-nav .other-nav{
width: 290px;
height: 290px;
margin-top: 10px;
overflow: hidden;
}
.right-nav .other-nav li{
cursor: pointer;
}
.right-nav .other-nav .other-nav-list-1 li{
width: 48px;
height: 70px;
float: left;
margin: 0 11px;
text-align: center;
}
.right-nav .other-nav .other-nav-list-1{
margin-top: 16px;
}
.right-nav .other-nav .other-nav-list-1 li:first-child{
margin-left: 16px;
}
.right-nav .other-nav .other-nav-list-2 li{
width: 48px;
height: 70px;
float: left;
margin: 17px 11px;
text-align: center;
}
.right-nav .other-nav .other-nav-list-2 li:first-child{
margin-left: 16px;
}
.right-nav .other-nav .other-nav-list-3 li{
width: 48px;
height: 70px;
float: left;
margin: 0 11px;
text-align: center;
}
.right-nav .other-nav .other-nav-list-3 li:first-child{
margin-left: 16px;
}
/* 其他 end */
/* endregion 右侧侧边栏 end*/
/* endregion 主要内容区 end*/
index.html
<!-- 顶部导航条-->
<div class="topbar"></div>
<!-- 头部 -->
<div class="header"></div>
<!-- 主导航区 -->
<div class="main-nav"></div>
<!-- 主要内容区 -->
<div class="main-content">
<div class="container clearfix">
<!-- 左侧导航栏 -->
<ul class="left-nav leftfix"></ul>
<!-- 中部轮播图 -->
<div class="center-banner leftfix"></div>
<!-- 右侧侧边栏 -->
<div class="right-nav leftfix">
<!-- 尚品快报 -->
<div class="message"></div>
<div class="other-nav">
<!-- 整块分为三行编写 -->
<ul class="other-nav-list-1 clearfix">
<li>
<img src="./images/icon_话费_nor.png" alt="">
<span>话费</span>
</li>
<li>
<img src="./images/icon_huoche.png" alt="">
<span>火车票</span>
</li>
<li>
<img src="./images/icon_加油卡_nor.png" alt="">
<span>加油卡</span>
</li>
<li>
<img src="./images/icon_白条_nor.png" alt="">
<span>白条</span>
</li>
</ul>
<ul class="other-nav-list-2 clearfix">
<li>
<img src="./images/icon_电影票_nor.png" alt="">
<span>电影票</span>
</li>
<li>
<img src="./images/icon_酒店_nor.png" alt="">
<span>酒店</span>
</li>
<li>
<img src="./images/icon_理财_nor.png" alt="">
<span>理财</span>
</li>
<li>
<img src="./images/icon_机票_nor.png" alt="">
<span>机票</span>
</li>
</ul>
<ul class="other-nav-list-3 clearfix">
<li>
<img src="./images/icon_礼品卡_nor.png" alt="">
<span>礼品卡</span>
</li>
<li>
<img src="./images/icon_彩票_nor.png" alt="">
<span>彩票</span>
</li>
<li>
<img src="./images/icon_游戏_nor.png" alt="">
<span>游戏</span>
</li>
<li>
<img src="./images/icon_众筹_nor.png" alt="">
<span>众筹</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</html>
方案二: 精灵图优化
为了减少网络请求,节省带宽,会将一些同一区域内的小图片,拼成一张大图片,此为精灵图,用一个div标签,将精灵图作为div的背景图片,通过使用坐标系找到精灵图中想要的图标位置,即可显示
css/index.css
/* 其他 start */
.right-nav .other-nav{
width: 290px;
height: 290px;
margin-top: 10px;
overflow: hidden;
}
.right-nav .other-nav .other-nav-list-1 li{
width: 48px;
height: 70px;
float: left;
margin: 0 11px;
text-align: center;
}
.right-nav .other-nav .other-nav-list-1{
margin-top: 16px;
}
/* 根据坐标系调整精灵图的位置 start */
.other-nav .other-nav-list-1 .picture{
width: 48px;
height: 48px;
background-image: url("../images/精灵图-侧边功能.png");
}
.other-nav .other-nav-list-1 li:nth-child(2) .picture{
width: 48px;
height: 48px;
background-image: url("../images/精灵图-侧边功能.png");
background-position: -48px 0;
}
.other-nav .other-nav-list-1 li:nth-child(3) .picture{
width: 48px;
height: 48px;
background-image: url("../images/精灵图-侧边功能.png");
background-position: -96px 0;
}
.other-nav .other-nav-list-1 li:nth-child(4) .picture{
width: 48px;
height: 48px;
background-image: url("../images/精灵图-侧边功能.png");
background-position: -144px 0;
}
.right-nav .other-nav .other-nav-list-1 li:first-child{
margin-left: 16px;
}
.right-nav .other-nav .other-nav-list-2 li{
width: 48px;
height: 70px;
float: left;
margin: 17px 11px;
text-align: center;
}
.right-nav .other-nav .other-nav-list-2 li:first-child{
margin-left: 16px;
}
.other-nav .other-nav-list-2 .picture{
width: 48px;
height: 48px;
background-image: url("../images/精灵图-侧边功能.png");
background-position: 0 -48px;
}
.other-nav .other-nav-list-2 li:nth-child(2) .picture{
width: 48px;
height: 48px;
background-image: url("../images/精灵图-侧边功能.png");
background-position: -48px -48px;
}
.other-nav .other-nav-list-2 li:nth-child(3) .picture{
width: 48px;
height: 48px;
background-image: url("../images/精灵图-侧边功能.png");
background-position: -96px -48px;
}
.other-nav .other-nav-list-2 li:nth-child(4) .picture{
width: 48px;
height: 48px;
background-image: url("../images/精灵图-侧边功能.png");
background-position: -144px -48px;
}
.right-nav .other-nav .other-nav-list-3 li{
width: 48px;
height: 70px;
float: left;
margin: 0 11px;
text-align: center;
}
.right-nav .other-nav .other-nav-list-3 li:first-child{
margin-left: 16px;
}
.other-nav .other-nav-list-3 .picture{
width: 48px;
height: 48px;
background-image: url("../images/精灵图-侧边功能.png");
background-position: 0 -96px;
}
.other-nav .other-nav-list-3 li:nth-child(2) .picture{
width: 48px;
height: 48px;
background-image: url("../images/精灵图-侧边功能.png");
background-position: -48px -96px;
}
.other-nav .other-nav-list-3 li:nth-child(3) .picture{
width: 48px;
height: 48px;
background-image: url("../images/精灵图-侧边功能.png");
background-position: -96px -96px;
}
.other-nav .other-nav-list-3 li:nth-child(4) .picture{
width: 48px;
height: 48px;
background-image: url("../images/精灵图-侧边功能.png");
background-position: -144px -96px;
}
/* 根据坐标系调整精灵图的位置 end */
/* 其他 end */
/* endregion 右侧侧边栏 end*/
/* endregion 主要内容区 end*/
index.html
<!-- 顶部导航条-->
<div class="topbar">
</div>
<!-- 头部 -->
<div class="header">
</div>
<!-- 主导航区 -->
<div class="main-nav">
</div>
<!-- 主要内容区 -->
<div class="main-content">
<div class="container clearfix">
<!-- 左侧导航栏 -->
<ul class="left-nav leftfix"></ul>
<!-- 中部轮播图 -->
<div class="center-banner leftfix"></div>
<!-- 右侧侧边栏 -->
<div class="right-nav leftfix">
<!-- 尚品快报 -->
<div class="message"></div>
<!-- 其他 -->
<div class="other-nav">
<ul class="other-nav-list-1 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="other-nav-list-2 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="other-nav-list-3 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>
</html>
5. 秒杀专场
css/index.css
/* region 秒杀专场 */
.seckill{
margin-top: 10px;
}
.seckill img{
float: left;
margin-right: 11px;
cursor: pointer;
}
.seckill img:last-child{
margin-right: 0;
}
/* endregion 秒杀专场 */
index.html
<div class="seckill">
<div class="container clearfix">
<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>
6. 家用电器
css/index.css
/* region 家用电器 start */
/* 上半部分 start */
.floor .floor-top {
margin-top: 48px;
height: 29px;
line-height: 29px;
border-bottom: 2px solid #DD302D;
padding-bottom: 4px;
}
.floor .floor-top-list li {
float: left;
font-size: 16px;
}
.floor .floor-top .floor-top-title {
font-weight: bold;
font-size: 20px;
}
.floor .floor-top-list li a {
padding: 0 10px;
border-right: 1px solid #666;
}
.floor .floor-top-list li:first-child a {
border-left: 0;
}
.floor .floor-top-list li:last-child a {
border-right: 0;
}
/* 上半部分 end */
/* 下半部分 start */
.floor .floor-content .floor-content-item {
float: left;
}
.floor .floor-content .item1 {
width: 190px;
height: 392px;
padding: 20px;
background-color: #F4F4F4;
}
.item1 .item-top li {
width: 90px;
height: 22px;
padding-bottom: 3.5px;
border-bottom: 1px solid #D9D9D9;
font-size: 16px;
text-align: center;
}
/* 奇数左浮动 */
.item1 .item-top li:nth-child(2n-1) {
float: left;
}
/* 偶数右浮动 */
.item1 .item-top li:nth-child(2n) {
float: right;
}
.item1 .item-top li:nth-child(3),
.item1 .item-top li:nth-child(4) {
margin: 14.4px 0;
}
.floor-content .floor-content-item .img1 {
margin-top: 30px;
}
.floor .floor-content .item2 {
width: 340px;
height: 432px;
}
.floor .floor-content .item3,
.floor .floor-content .item4,
.floor .floor-content .item5 {
width: 206px;
height: 432px;
}
.floor .floor-content .item3,
.floor .floor-content .item4 {
border-right: 1px solid #e2e2e2;
}
.floor .floor-content .item5 img,
.floor .floor-content .item4,
.floor .floor-content .item3 img {
border-bottom: 1px solid #e2e2e2;
}
/* 下半部分 end */
/* endregion 家用电器 end */
index.html
<!-- 家用电器一 -->
<div class="floor">
<div class="container">
<!-- 上半部分 -->
<div class="floor-top clearfix">
<span class="floor-top-title leftfix">家用电器</span>
<ul class="floor-top-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-content clearfix">
<div class="floor-content-item item1">
<ul class="item-top 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 class="img1" src="./images/编组.png" alt="">
</div>
<div class="floor-content-item item2">
<img src="./images/appliance_banner07.png" alt="">
</div>
<div class="floor-content-item item3">
<img src="./images/微波炉.png" alt="">
<img src="./images/空气炸锅.png" alt="">
</div>
<div class="floor-content-item item4">
<img src="./images/冰箱.png" alt="">
</div>
<div class="floor-content-item item5">
<img src="./images/电饭煲.png" alt="">
<img src="./images/电饭煲2.png" alt="">
</div>
</div>
</div>
</div>
<!-- 家用电器二 -->
<div class="floor">
<div class="container">
<!-- 上半部分 -->
<div class="floor-top clearfix">
<span class="floor-top-title leftfix">家用电器</span>
<ul class="floor-top-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-content clearfix">
<div class="floor-content-item item1">
<ul class="item-top 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 class="img1" src="./images/编组.png" alt="">
</div>
<div class="floor-content-item item2">
<img src="./images/appliance_banner07.png" alt="">
</div>
<div class="floor-content-item item3">
<img src="./images/微波炉.png" alt="">
<img src="./images/空气炸锅.png" alt="">
</div>
<div class="floor-content-item item4">
<img src="./images/冰箱.png" alt="">
</div>
<div class="floor-content-item item5">
<img src="./images/电饭煲.png" alt="">
<img src="./images/电饭煲2.png" alt="">
</div>
</div>
</div>
</div>
7. 页脚
css/index.css
/* region 页脚 start */
.footer {
height: 440px;
background-color: #483E3E;
margin-top: 50px;
}
.line {
margin-top: 22px;
height: 1px;
background-color: #584D4D;
}
.footer .links-list {
width: 190px;
height: 176px;
float: left;
margin-top: 48px;
margin-right: 10px;
}
.footer .links-list:last-child {
margin-right: 0;
}
.footer .links-list a {
color: white;
}
.footer .links-list a:hover,
.bottom-links-list a:hover{
color: #DD302D;
}
/* ul 水平居中的两种方案:*/
/* 方案一: 必须有明确的宽度才能使用 margin 来水平居中 */
/*.bottom-links .bottom-links-list {*/
/* width: 1000px;
/* margin: 0 auto;*/
/*}*/
/* 方案二: 将ul变为行内块元素,用父元素的text-align来水平居中 */
.bottom-links{
text-align: center;
}
.bottom-links-list{
display: inline-block;
}
.bottom-links-list li {
float: left;
}
.bottom-links-list li a {
color: white;
padding: 0 26px;
border-right: 1px solid white;
}
.bottom-links-list li:last-child a {
border-right: 0;
}
.bottom-links-list li:first-child a {
padding-left: 0;
}
.copyright{
color: white;
margin-top: 10px;
}
/* endregion 页脚 end */
index.html
<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>
</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="#">付款、OPS机刷卡和售后上门</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>
python防脱发技巧
浙公网安备 33010602011771号