美文网首页
11.7-8.首页其它模块的静态结构和样式实现

11.7-8.首页其它模块的静态结构和样式实现

作者: Aurochsy | 来源:发表于2018-09-22 22:43 被阅读0次

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">更多限免佳作&gt;&gt;</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="/专题书单">更多精彩专题&gt;&gt;</a>
    </div>
</section>

相关文章

  • 11.7-8.首页其它模块的静态结构和样式实现

    Chapter：11.前端页面开发 11.7-9.首页其它模块的静态结构和样式实现 首页中的男频列表，女频列表，热...

  • 2018-11-01自己写的静态网页

    线上商店的静态首页 跳转到叶材的页面(静态的) 叶材样式表(css) 未完待续～

  • 品优购 首页快捷导航

    说明 网站的首页一般使用index命名首页的头部和底部，根据模块化开发，样式要写到common.css里 快捷导航...

  • 关于外卖统计

    1.使用教程 使用教程 2.总体结构和功能模块 总体结构和功能模块 3.功能实现 功能实现 4.附加功能 fee ...

  • 关于开发视图

    什么是开发视图 开发视图是逻辑视图的实现，它又叫实现视图，描述了在开发环境中软件的静态组织结构，主要侧重于软件模块...

  • Tree-Shaking 和ES6 module

    ES6 module 静态结构 当前的JavaScript模块格式具有动态结构：导入和导出的内容可以在运行时（ru...

  • Flutter 搭建具有 Drawer 和 BottomNavi

    文章目录 相关文章推荐 实现效果 实现分析首页实现侧边栏实现 源码 相关文章Flutter Widget 静态布局...

  • 菜鸟学习iOS－0002 UITableView

    下厨房的首页通过UITableView实现展现信息.想实现首页，首先我们需要先去了解UITableView的结构....

  • 轮播-淡入淡出

    JS实现功能 CSS样式以及布局结构

  • 静态库

    为什么使用静态库 1.实现iOS程序的模块化,可以把固定的业务模块化成静态库 2.和别人分享你的代码库,但不想让别...

网友评论

      本文标题：11.7-8.首页其它模块的静态结构和样式实现

      本文链接：https://www.haomeiwen.com/subject/cotfoftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|11.7-8.首页其它模块的静态结构和样式实现|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！