11.7-8.首页其它模块的静态结构和样式实现
2018-09-22 本文已影响0人
Aurochsy
Chapter：11.前端页面开发
11.7-9.首页其它模块的静态结构和样式实现
首页中的男频列表，女频列表，热门都很相似，大量代码都是可以复用的。
本次代码修改的其它操作: 在index.html中引入了页面基础样式reset.html，之前粘贴了对应的代码了
1."本周热门"模块index-hot.html实现
<section class="channel-h5">
<div class="channel-h5__header"><!--本周最火顶栏-->
<p class="channel-h5__title">本周最火</p>
</div>
<ul class="list-h5"><!--书籍列表-->
<li><!--带封面书籍-->
<div class="book-h5">
<div class="book-h5__cover">
<img src="/static/img/book-cover1.jpg"/>
<p class="book-h5__finish">完结</p>
</div>
<div class="book-h5__info">
<p class="book-h5__title">书名</p>
<p class="book-h5__author">作者</p>
<p class="book-h5__summary">简介</p>
<div class="book-h5__wrap">
<div class="book-h5__tag">标签</div>
</div>
</div>
</div>
</li>
<li><!--带封面书籍-->
<div class="book-h5">
<div class="book-h5__cover">
<img src="/static/img/book-cover1.jpg"/>
<p class="book-h5__finish">完结</p>
</div>
<div class="book-h5__info">
<p class="book-h5__title">书名</p>
<p class="book-h5__author">作者</p>
<p class="book-h5__summary">简介</p>
<div class="book-h5__wrap">
<div class="book-h5__tag">标签</div>
</div>
</div>
</div>
</li>
<li><!--带封面书籍-->
<div class="book-h5">
<div class="book-h5__cover">
<img src="/static/img/book-cover1.jpg"/>
<p class="book-h5__finish">完结</p>
</div>
<div class="book-h5__info">
<p class="book-h5__title">书名</p>
<p class="book-h5__author">作者</p>
<p class="book-h5__summary">简介</p>
<div class="book-h5__wrap">
<div class="book-h5__tag">标签</div>
</div>
</div>
</div>
</li>
<li><!--带封面书籍-->
<div class="book-h5">
<div class="book-h5__cover">
<img src="/static/img/book-cover1.jpg"/>
<p class="book-h5__finish">完结</p>
</div>
<div class="book-h5__info">
<p class="book-h5__title">书名</p>
<p class="book-h5__author">作者</p>
<p class="book-h5__summary">简介</p>
<div class="book-h5__wrap">
<div class="book-h5__tag">标签</div>
</div>
</div>
</div>
</li>
</ul>
</section>
2."男频推荐书籍列表"模块index-male.html实现
女频推荐列表只需要在对应位置把"男"字改为"女"字即可
<style type="text/css">
.channel-h5__footer_next{
border-top:1px solid #f0f0f0;
overflow:hidden;
}
.channel-h5__footer_next>a{
float:left;/*可以用flex布局，也可以用float来做*/
width:50%;
padding:14px;
box-sizing:border-box;
font:13px/1.3em a;
color:rgba(0,0,0,0.9);
text-align:center;
}
.channel-h5__footer_next>a:first-child{
border-right:1px solid #f0f0f0;
}
</style>
<section class="channel-h5">
<div class="channel-h5__header"><!--男生频道列表顶栏-->
<p class="channel-h5__title">男生频道</p>
</div>
<div>
<div>
<ul class="list-h5"><!--书籍列表-->
<li><!--带封面书籍-->
<div class="book-h5">
<div class="book-h5__cover">
<img src="/static/img/book-cover1.jpg"/>
<p class="book-h5__finish">完结</p>
</div>
<div class="book-h5__info">
<p class="book-h5__title">书名</p>
<p class="book-h5__author">作者</p>
<p class="book-h5__summary">简介</p>
<div class="book-h5__wrap">
<div class="book-h5__tag">标签</div>
</div>
</div>
</div>
</li>
<li><!--带封面书籍-->
<div class="book-h5">
<div class="book-h5__cover">
<img src="/static/img/book-cover1.jpg"/>
<p class="book-h5__finish">完结</p>
</div>
<div class="book-h5__info">
<p class="book-h5__title">书名</p>
<p class="book-h5__author">作者</p>
<p class="book-h5__summary">简介</p>
<div class="book-h5__wrap">
<div class="book-h5__tag">标签</div>
</div>
</div>
</div>
</li>
<li><!--带封面书籍-->
<div class="book-h5">
<div class="book-h5__cover">
<img src="/static/img/book-cover1.jpg"/>
<p class="book-h5__finish">完结</p>
</div>
<div class="book-h5__info">
<p class="book-h5__title">书名</p>
<p class="book-h5__author">作者</p>
<p class="book-h5__summary">简介</p>
<div class="book-h5__wrap">
<div class="book-h5__tag">标签</div>
</div>
</div>
</div>
</li>
<li><!--带封面书籍-->
<div class="book-h5">
<div class="book-h5__cover">
<img src="/static/img/book-cover1.jpg"/>
<p class="book-h5__finish">完结</p>
</div>
<div class="book-h5__info">
<p class="book-h5__title">书名</p>
<p class="book-h5__author">作者</p>
<p class="book-h5__summary">简介</p>
<div class="book-h5__wrap">
<div class="book-h5__tag">标签</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="channel-h5__footer_next">
<a href="javascript:">换一换</a>
<a href="javascript:">男生频道</a>
</div>
</div>
</section>
3."免费专区"模块index-free.html实现
<style type="text/css">
.channel-group{
position:relative;
}
.channel-group__header{
position:relative;
padding:10px 14px;
border-bottom:1px solid #f0f0f0;
border-left:6px solid #ffab18;
}
.channel-group__title{
font-size:16px;
font-weight:normal;
color:#333;
}
.book-table{
padding:13px 14px 5px;
font-size:0px;/*inline-block元素之间是有空隙的，
会导致33%的设置无效，所以要将font-size设为0去掉空隙
但其实我实测是不这样设置也行，但是老师的会出问题(只能并排两个<li>)*/
}
.book-table li{
width:33%;
display:inline-block;
vertival-align:top;
line-height:1;
margin-bottom:8px;
}
.u-book{
width:86px;
position:relative;
overflow:hidden;
}
.book-cover{
position:relative;
width:86px;
height:113px;
background-color:#eeece9;
box-shadow:0px 6px 5px -3px #aaa;
border:1px solid #f0f0f0;
overflow:hidden;
border-bottom:none;
}
.book-cover img{
width:100%;
height:100%;
}
.title{
font-size:13px;
line-height:1.4em;
max-height:2.8em;
overflow:#8d8d8d;
margin-bottom:0px;
font-weight:400;
}
.u-tagRT{
position:absolute;
top:0px;
right:0px;
line-height:1.4;
background-color:#ef6c2c;
color:#fff;width:100%;
font-size:1.4em;
text-align:center;
-webkit-transform-origin:top center;
-webkit-transform:transloateX(50%) rotate(45deg) translateY(50%) scale(0.8);
}
.u-tagT.freefiction{background-color:#49ab3f;}
.u-tagT.freefiction:before{content:'\9650\514d'}
.channel-group__footer{
display:block;
border-top:10x solid #f0f0f0;
text-align:center;
font-size:14px;
padding:19px 0;
}
</style>
<section class="channel-group">
<div class="channel-group__header"><!--限时免费顶栏-->
<h2 class="channel-group__title">限时免费</h2>
</div>
<ul class="book-table">
<li>
<div class="u-book">
<div class="book-cover">
<img src="/static/img/book-cover1.jpg"/>
<div class="u-tagRT -freefiction"></div>
</div>
<div class="book-info">书籍名称</div>
</div>
</li>
<li>
<div class="u-book">
<div class="book-cover">
<img src="/static/img/book-cover1.jpg"/>
<div class="u-tagRT -freefiction"></div>
</div>
<div class="book-info">书籍名称</div>
</div>
</li>
<li>
<div class="u-book">
<div class="book-cover">
<img src="/static/img/book-cover1.jpg"/>
<div class="u-tagRT -freefiction"></div>
</div>
<div class="book-info">书籍名称</div>
</div>
</li>
<li>
<div class="u-book">
<div class="book-cover">
<img src="/static/img/book-cover1.jpg"/>
<div class="u-tagRT -freefiction"></div>
</div>
<div class="book-info">书籍名称</div>
</div>
</li>
</ul>
<a class="channel-group__footer" href="/free">更多限免佳作>></a>
</section>
4."热门专题"模块index-bottom.html实现
<style type="text/css">
.banner-h5__list{
padding: 13px 13px 0px;
}
.banner-h5__cover img {
position: absolute;
height: 100%;
width: 100%;
border-radius: 1px;
}
.channel-group__footer{
display:block;
border-top:10x solid #f0f0f0;
text-align:center;
font-size:14px;
padding:19px 0;
}
</style>
<section class="channel-h5">
<div class="channel-h5__header"><!--专题列表顶栏-->
<p class="channel-h5__title">精选专题<i>热</i></p>
</div>
<div class="banner-h5__list"><!--精选活动栏-->
<img src="/static/img/slider-banner-cover.jpg"/>
<img src="/static/img/slider-banner-cover2.jpg"/>
</div>
<div>
<a class="channel-group__footer" href="/专题书单">更多精彩专题>></a>
</div>
</section>
