品优购网站实战项目——首页nav模块
#大有学问#
nav模块布局思路
分为上中下以及侧边栏四个模块：nav-top、nav-center、nav-bottom、aside。
nav-top模块代码
index.css文件中添加CSS样式
.nav-top {
height: 48px;
border-bottom: 2px solid #b1191a;
}
.nav-top li {
float: left;
height: 48px;
text-align: center;
line-height: 48px;
margin-left: 5px;
}
.nav-top li:first-of-type {
width: 210px;
background-color: #b11a1a;
margin-left: 0;
}
.nav-top li a {
font-size: 16px;
color: #333;
padding: 0 25px;
}
.nav-top li:first-of-type a {
color: #fff;
}
.nav-top li:hover {
background-color: #b11a1a;
}
.nav-top li:hover a,
.nav-center ul:first-child li a{
color: #fff;
}
在index.html文件中添加布局代码
<nav>
<div class="nav-top">
<ul class="bW">
<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>
</nav>
nav-center模块代码
nav-center模块、nav-bottom模块、aside模块均存在同一个<div class=“bW”></div>中。
index.css文件
.nav-center ul:first-child {
width: 210px;
background-color: #c81822;
}
.nav-center ul:first-child li {
height: 31px;
padding: 0 10px;
line-height: 31px;
position: relative;
}
.nav-center ul:first-child li a {
font-size: 14px;
}
.nav-center ul:first-child li a::after {
font-family: 'icomoon';
content: '\e902';
color: #fff;
position: absolute;
right: 8px;
}
.nav-center ul:first-child li:hover {
background-color: #f7f7f7;
}
.nav-center ul:first-child li:hover a,
ul:first-child li:hover a::after
{
color: #c81623;
}
.nav-center img {
height: 455px;
margin: 10px 10px 0 10px;
vertical-align: middle;
}
div.fR {
width: 250px;
border-bottom: none;
margin: 10px 0 0 -1px;
}
div.fR>div:first-child {
height: 32px;
border: 1px solid #e5e5e5;
border-bottom: 1px dotted #eaeaea;
line-height: 32px;
padding: 0 15px;
}
div.fR>div:first-child h3 {
display: inline-block;
font-weight: 400;
font-size: 14px;
color: #333;
}
div.fR>div:first-child a::after {
font-family: 'icomoon';
content: '\e902';
padding-left: 10px;
}
div.fR ul:nth-child(2) {
padding: 5px 15px;
border-left: 1px solid #eaeaea;
border-right: 1px solid #eaeaea;
}
div.fR ul:nth-child(2) li {
height: 24px;
line-height: 24px;
}
div.fR ul:nth-child(2) span {
font-weight: 600;
margin-right: 5px;
}
div.fR ul:nth-child(3) {
height: 210px;
border: 1px solid #eaeaea;
border-bottom: none;
margin-bottom: 5px;
}
div.fR ul:nth-child(3) li {
width: 41px;
padding: 15px 10px 2px;
text-align: center;
float: left;
border-right: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
}
div.fR ul:nth-child(3) li:nth-of-type(4),
div.fR ul:nth-child(3) li:nth-of-type(8),
div.fR ul:nth-child(3) li:nth-of-type(12) {
margin-right: -2px;
border-right: none;
}
div.fR ul:nth-child(3) div:first-of-type {
width: 25px;
height: 26px;
margin: 0 auto;
background-image: url(../images/sprite.png);
margin-bottom: 10px;
}
div.fR ul:nth-child(3)>li:nth-of-type(1) div {
background-position: -19px -16px;
}
div.fR ul:nth-child(3)>li:nth-of-type(2) div {
background-position: -82px -17px;
}
div.fR ul:nth-child(3)>li:nth-of-type(3) div {
background-position: -144px -17px;
}
div.fR ul:nth-child(3)>li:nth-of-type(4) div {
background-position: -208px -16px;
}
div.fR ul:nth-child(3)>li:nth-of-type(5) div {
background-position: -19px -87px;
}
div.fR ul:nth-child(3)>li:nth-of-type(6) div {
background-position: -82px -87px;
}
div.fR ul:nth-child(3)>li:nth-of-type(7) div {
background-position: -145px -87px;
}
div.fR ul:nth-child(3)>li:nth-of-type(8) div {
background-position: -209px -87px;
}
div.fR ul:nth-child(3)>li:nth-of-type(9) div {
background-position: -19px -158px;
}
div.fR ul:nth-child(3)>li:nth-of-type(10) div {
background-position: -81px -158px;
}
div.fR ul:nth-child(3)>li:nth-of-type(11) div {
background-position: -145px -158px;
}
div.fR ul:nth-child(3)>li:nth-of-type(12) div {
background-position: -209px -158px;
}
div.fR>div:last-child {
width: 250px;
height: 75px;
background-image: url(../images/sprite.png);
background-position: 0 -219px;
}
index.html
<div class="bW">
<div class="nav-center clearF">
<ul class="fL clearF">
<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>
<img src="../images/gG.png" alt="">
<div class="fR">
<div>
<h3>品优购快报</h3>
<a href="#" class="fR">更多</a>
</div>
<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>
</ul>
<ul>
<li>
<a href="#">
<div></div>
<p>话费</p>
</a>
</li>
<li>
<a href="#">
<div></div>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<div></div>
<p>电影票</p>
</a>
</li>
<li>
<a href="#">
<div></div>
<p>游戏</p>
</a>
</li>
<li>
<a href="#">
<div></div>
<p>彩票</p>
</a>
</li>
<li>
<a href="#">
<div></div>
<p>加油卡</p>
</a>
</li>
<li>
<a href="#">
<div></div>
<p>酒店</p>
</a>
</li>
<li>
<a href="#">
<div></div>
<p>火车票</p>
</a>
</li>
<li>
<a href="#">
<div></div>
<p>众筹</p>
</a>
</li>
<li>
<a href="#">
<div></div>
<p>理财</p>
</a>
</li>
<li>
<a href="#">
<div></div>
<p>礼品卡</p>
</a>
</li>
<li>
<a href="#">
<div></div>
<p>白条</p>
</a>
</li>
</ul>
<div></div>
</div>
</div>
nav-bottom模块代码
index.css文件
.nav-bottom {
margin: 11px 0 34px;
height: 163px;
position: relative;
}
.nav-bottom>div {
width: 207px;
height: 163px;
background-color: #5c5351;
}
.nav-bottom>div::before {
font-family: 'icomoon';
content: '\e903';
color: #fff;
font-size: 62px;
position: absolute;
top: 32px;
left: 68px;
}
.nav-bottom>div::after {
content: '今日推荐';
color: #fff;
font-size: 18px;
position: absolute;
bottom: 35px;
left: 63px;
}
.nav-bottom ul {
padding: 9px 2px;
background-color: #ebebeb;
}
.nav-bottom li {
/* width: 207px; */
height: 119px;
float: left;
padding: 13px 25px;
border-right: 1px solid #dddddd;
}
.nav-bottom li:last-of-type {
border-right: none;
}
.nav-bottom li h4 {
color: #333;
}
.nav-bottom li p:first-of-type,
.nav-bottom li p:nth-of-type(3) {
font-size: 14px;
color: #fff;
}
.nav-bottom li p:first-of-type {
background-color: #00a0e8;
margin: 10px 25px 3px 0;
padding: 0 3px;
font-weight: 600;
}
.nav-bottom li:nth-child(2) p:nth-child(2) {
background-color: #5fb200;
}
.nav-bottom li p:nth-of-type(3) {
width: 60px;
height: 18px;
line-height: 18px;
background-color: #5fb200;
border-radius: 30px;
text-align: center;
margin-top: 22px;
}
.nav-bottom li:nth-child(3) p:nth-child(2),
.nav-bottom li:nth-child(3) p:nth-child(4) {
background-color: red;
}
.nav-bottom li:nth-child(4) p:nth-child(2),
.nav-bottom li:nth-child(4) p:nth-child(4) {
background-color: #0085fb;
}
index.html文件
<div class="bW">
<div class="nav-bottom clearF">
<div class="fL"></div>
<ul class="fR">
<li>
<div class="fL">
<h4>优质好货</h4>
<p>满300减100</p>
<p>满500减200</p>
</div>
<img src="../images/cFj.png" alt="">
</li>
<li>
<div class="fL">
<h4>品牌尾货</h4>
<p>满300减100</p>
<p>团购低至9.9</p>
<p>团购</p>
</div>
<img src="../images/mJ.png" alt="">
</li>
<li>
<div class="fL">
<h4>时尚穿搭</h4>
<p>低至3.6折</p>
<p>暑期出游季</p>
<p>闪购</p>
</div>
<img src="../images/shirt.png" alt="">
</li>
<li>
<div class="fL">
<h4>0点上新</h4>
<p>全场包邮</p>
<p>低至1折</p>
<p>闪购</p>
</div>
<img src="../images/watch.png" alt="">
</li>
</ul>
</div>
</div>
侧边栏aside模块
index.css文件
nav>div.bW:nth-child(2) {
position: relative;
}
aside {
width: 66px;
position: absolute;
top: 165px;
left: -85px;
}
aside li {
height: 30px;
text-align: center;
line-height: 30px;
border-bottom: 1px solid #eee;
}
aside li:last-child {
border-bottom: none;
}
aside li:hover,
aside li:hover a {
background-color: #c81623;
color: #fff;
}
index.html文件
<aside>
<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>
<li><a href="#">图书音像</a></li>
<li><a href="#">金融彩票</a></li>
</ul>
</aside>
aside——侧边栏模块
下部分内容下篇文章更。拜拜~
[注：本文部分图片来自互联网！未经授权，不得转载！每天跟着我们读更多的书]
互推传媒文章转载自第三方或本站原创生产，如需转载，请联系版权方授权，如有内容如侵犯了你的权益，请联系我们进行删除！
如若转载，请注明出处：http://www.hfwlcm.com/info/115042.html
