美文网首页工作生活
页面排版

页面排版

作者: 乔乔乔0126 | 来源:发表于2019-06-30 12:25 被阅读0次

灵活运用浮动排盘

页面内容及代码：

周考1.png

html代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>周考</title>
    <link rel="stylesheet" href="../css/周考.css">
</head>

<body>
    <div class="box1">
        <div class="box2">
            <!--导航，有声书-->
            <div class="box3">
                <ul>
                    <li class="juxing"><i></i></li>
                    <li class="youshusheng">有书声</li>
                    <li><span>有声的紫禁</span></li>
                    <li><span>斗破苍穹</span></li>
                    <li><span>多人小说剧</span></li>
                    <li><span>盗墓笔记</sspanpan>
                    </li>
                    <li><span>斗罗大陆</span></li>
                    <li><span>鬼吹灯</span></li>
                    <li>免费完结小说</li>
                    <li>更多</li>
                </ul>
            </div>
            <!--小说图片介绍-->
            <div class="box4">
                <!--第一排小说-->
                <div class="img-1">
                    <ul>
                        <li><img src="../img/摸金天师.png" alt="" title="摸金天师"></li>
                        <li><em><span>完本</span></em></li>
                        <li><span>摸金天师【紫气东来人在塔在】</span></li>
                        <li><span class="zuozhe">有声的紫金</span> </li>
                    </ul>
                    <!--王的女人-->
                    <ul>
                        <li><img src="../img/王的女人谁敢动.png" alt="" title="摸金天师"></li>
                        <li><em><span>完本</span></em></li>
                        <li><span>王的女人谁敢动|劲爆</span></li>
                        <li><span class="zuozhe">一刀苏苏</span> </li>
                    </ul>
                    <!--王的女人-->
                    <ul>
                        <li><img src="../img/阴间神探.png" alt="" title="摸金天师"></li>
                        <li><em><span>完本</span></em></li>
                        <li><span>阴间神探</span></li>
                        <li><span class="zuozhe">有声的紫金</span> </li>
                    </ul>
                    <!--王的女人-->
                    <ul>
                        <li><img src="../img/仙君重生.png" alt="" title="摸金天师"></li>
                        <li><em><span>完本</span></em></li>
                        <li><span>仙君重生|呆小鱼播讲</span></li>
                        <li><span class="zuozhe">演播呆小鱼</span> </li>
                    </ul>
                    <!--王的女人-->
                    <ul>
                        <li><img src="../img/冷王毒宠医妃.png" alt="" title="摸金天师"></li>
                        <li><em><span>完本</span></em></li>
                        <li><span>冷王毒宠医妃（神隐世家）</span></li>
                        <li><span class="zuozhe">神隐银月之光</span> </li>
                    </ul>
                </div>
                <!--第二排小说-->
                <div class="img-1">
                    <ul>
                        <li><img src="../img/雪中悍刀行.png" alt="" title="摸金天师"></li>
                        <li><em><span>完本</span></em></li>
                        <li><span>雪中悍刀行（我的大刀早已</span></li>
                        <li><span class="zuozhe">有声的紫金</span> </li>
                    </ul>
                    <!--王的女人-->
                    <ul>
                        <li><img src="../img/摸金天师.png" alt="" title="摸金天师"></li>
                        <li><em><span>完本</span></em></li>
                        <li><span>摸金天师【紫气东来人在塔在】</span></li>
                        <li><span class="zuozhe">有声的紫金</span> </li>
                    </ul>
                    <!--王的女人-->
                    <ul>
                        <li><img src="../img/摸金天师.png" alt="" title="摸金天师"></li>
                        <li><em><span>完本</span></em></li>
                        <li><span>摸金天师【紫气东来人在塔在】</span></li>
                        <li><span class="zuozhe">有声的紫金</span> </li>
                    </ul>
                    <!--王的女人-->
                    <ul>
                        <li><img src="../img/摸金天师.png" alt="" title="摸金天师"></li>
                        <li><em><span>完本</span></em></li>
                        <li><span>摸金天师【紫气东来人在塔在】</span></li>
                        <li><span class="zuozhe">有声的紫金</span> </li>
                    </ul>
                    <!--王的女人-->
                    <ul>
                        <li><img src="../img/摸金天师.png" alt="" title="摸金天师"></li>
                        <li><em><span>完本</span></em></li>
                        <li><span>摸金天师【紫气东来人在塔在】</span></li>
                        <li><span class="zuozhe">有声的紫金</span> </li>
                    </ul>
                </div>

            </div>
            <!--右边导航-->
            <div class="dj-right">
                <p>有声书飙升榜</p>
                <!--第一本书-->
                <div class="paihang">

                    <div>


                        <ol>

                            <li>
                                <dl>
                                    <dt>
                                        <img src="..//img/520.png" alt="">
                                    </dt>
                                    <dd>
                            <li><span>520主播情话集,只想废话多阿富汗大陆北方打偶</span></li>
                            <li><span>喜马拉雅有声剧</span></li>
                            </dd>

                            </ul>
                            </li>
                        </ol>
                    </div>
                </div>
                <!--第二本书-->
                <div class="paihang-2">

                    <div>


                        <ol>

                            <li>
                                <dl>
                                    <dt>
                                        <img src="../img/天下.png" alt="">
                                    </dt>
                                    <dd>
                            <li><span>战飞全勤天下</span></li>
                            <li><span>岳阳楼记</span></li>
                            </dd>

                            </ul>
                            </li>
                        </ol>
                    </div>
                </div>
                <!--第三本书-->
                <div class="paihang-2">
                    <div>
                        <ol>
                            <li>
                                <dl>
                                    <dt>
                                        <img src="../img/天下.png" alt="">
                                    </dt>
                                    <dd>
                            <li><span>战飞全勤天下</span></li>
                            <li><span>岳阳楼记</span></li>
                            </dd>

                            </ul>
                            </li>
                        </ol>
                    </div>
                </div>
                <!--第四本书-->
                <div class="wutu-4">
                    <ol>
                        <li>4</li>
                        <li>时间都知道(多人有声句）</li>
                    </ol>
                </div>
                <!--第五本书-->
                <div class="wutu-5">
                    <ol>
                        <li>5</li>
                        <li>我的姥姥是神仙</li>
                    </ol>
                </div>
                <!--第六本书-->
                <div class="wutu-6">
                    <ol>
                        <li>6</li>
                        <li>纵横都市之狼性于野(多人有声句）</li>
                    </ol>
                </div>

            </div>
        </div>
    </div>
</body>

</html>

css代码如下：

*{
    margin:0;
    padding: 0;
    outline: none;
    list-style: none;

}

.box1{
    width: 100%;
    height: 395px;  
    /* background-color: #cfc; */
    overflow: hidden;
}

.box2{
    width: 825px;
    height: 395px;
    /* background-color:#6c6c6c; */
    margin: 0 auto;
    overflow: hidden;

}

.box3{
    
    width: 598px;
    height: 17px;
    /* background-color: pink; */
    float: left;
    margin-top:20px;
    overflow: hidden;
}


.box3>ul{
    line-height: 17px;
    /* margin-top: 20px; */
}

.box1>.box2>.box3>ul>.youshusheng{
    font-size: 16px;
    color: black;
    font-weight:bold;
}

.juxing{
    display: inline-block;
    width: 5px;
    height: 12px;
    background-color: #e76d4d;
    border-radius: 5px;
    
}

.box3>ul{
    font-size: 0px;
}



.box3>ul>li{
    display: inline-block;
    font-size: 10px;
    color: #6c6c6c;
    /* margin-right: 9px; */
    
}

.box3>ul>li:nth-child(2){
    width: 55px;
    height: 14px;
    margin-left: 8px;

}

.box3>ul>li>span{
    padding: 0 8px;
    border-right: 1px solid #6c6c6c;
    height: 10px;
    
}

.box3>ul>li:nth-child(9){
    padding: 0 0 0 8px;  
}

.box3>ul>li:last-child{
    float:right;
    
}





/* .box1>.box2>.box3>ul>li>span{
    display: inline-block;
    border-right: 1px solid #6c6c6c;
    
} */

.box4{
    width: 598px;
    height: 315px;
    background-color: blue;
    margin-top: 20px;
    float: left;
    overflow: hidden;
}

.box1>.box2>.box4>.img-1>ul{
    font-size: 0px;
    /* display: inline-block; */
}

/*摸金天师*/

 .img-1{    
    width: 598px;
    height: 164px;;
    background-color: #fff;
    
    
} 

.box1>.box2>.box4>.img-1>ul{
    width: 109px;
    height: 143px;
    background-color: #fff;
    float: left;
    margin-right: 13px;
    overflow: hidden;
    
}

.box1>.box2>.box4>.img-1>ul>li>img{
    width: 110px;
    height: 110px;
}

em{
    display: inline-block;
    width: 30px;
    height: 15px;
    background-color: #86bc35;
    border-radius: 2px;
    margin-top: 2px;
    /* margin-top: -2px; */
    
}

.box1>.box2>.box4>.img-1>ul>li>em>span{
    font-size: 10px;
    line-height: 15px;
    color: white;
    margin-left: 4px;
    font-style: normal;
    
}

/* .box1>.box2>.box4>.img-1>ul>li{
    float: left;
} */

.box1>.box2>.box4>.img-1>ul>li:nth-child(2){
    float: left;
}

.box1>.box2>.box4>.img-1>ul>li:nth-child(3){
    float: left;
    /* display: inline-block; */
    margin-top:4px;
    width: 75px;
    height: 12px;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.box1>.box2>.box4>.img-1>ul>li>.zuozhe{
    display: inline-block;
    margin: 2px 0 0 -30px;
    font-size: 10px;
    color: #6c6c6c;
    
}

.box1>.box2>.box4>.img-1>ul:last-child{
    float: right;
    margin-right: 0px;
}

/* 右边导航 */

.dj-right{
    width: 225px;
    height: 339px;
    /* background-color: red; */
    float: right;
    margin-top: -18px;
}

.paihang{
    display: block;
    margin: 20px 0 0 30px;
    
}

p{
    margin-left: 30px;
    font-size: 15px;
}

.box1>.box2>.dj-right>.paihang>div{
    width: 201px;
    height: 64px;
}

.box1>.box2>.dj-right>.paihang>div>ol>li>dl>dt{
    display: inline;
    float: left;
    
           
}

.box1>.box2>.dj-right>.paihang>div>ol>li>dl>dd{
    /* display: inline; */
    font-size: 10px;
    color: black;
    vertical-align: middle;
    float: left;
    margin: 17px 0 0 16px;
        
}

.box1>.box2>.dj-right>.paihang>div>ol>li>dl>dd>li:first-child{
    display: inline-block;
    height: 12px;
    width: 117px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 

}

.box1>.box2>.dj-right>.paihang>div>ol>li>dl>dd>li:last-child{
    color: #6c6c6c;
}

/* 第二本书 */

.paihang-2{
    display: block;
    margin: 10px 0 0 30px;
}


p{
    margin-left: 30px;
    font-size: 15px;
    font-weight:bold;
}

.box1>.box2>.dj-right>.paihang-2>div{
    width: 201px;
    height: 64px;
}

.box1>.box2>.dj-right>.paihang-2>div>ol>li>dl>dt{
    display: inline;
    float: left;
    
           
}

.box1>.box2>.dj-right>.paihang-2>div>ol>li>dl>dd{
    /* display: inline; */
    font-size: 10px;
    color: black;
    vertical-align: middle;
    float: left;
    margin: 17px 0 0 16px;
        
}

.box1>.box2>.dj-right>.paihang-2>div>ol>li>dl>dd>li:first-child{
    display: inline-block;
    height: 12px;
    width: 117px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 

}

.box1>.box2>.dj-right>.paihang-2>div>ol>li>dl>dd>li:last-child{
    color: #6c6c6c;
}

/* 第四本书 */

.box1>.box2>.dj-right>.wutu-4{
    margin: 16px 0 0 30px;
    font-size: 10px;
    line-height: 20px;
    
}

.box1>.box2>.dj-right>.wutu-4>ol>li{
    color: #6c6c6c;
    display: inline-block;

}
.box1>.box2>.dj-right>.wutu-4>ol>li:last-child{
    color: black;
    display: inline-block;
    margin-left: 13px;
    
}

/* 第五本书 */

.box1>.box2>.dj-right>.wutu-5{
    margin: 3px 0 0 30px;
    font-size: 10px;
    line-height: 20px;
    
}

.box1>.box2>.dj-right>.wutu-5>ol>li{
    color: #6c6c6c;
    display: inline-block;

}
.box1>.box2>.dj-right>.wutu-5>ol>li:last-child{
    color: black;
    display: inline-block;
    margin-left: 13px;
    
}

/* 第六本书 */

.box1>.box2>.dj-right>.wutu-6{
    margin: 3px 0 0 30px;
    font-size: 10px;
    line-height: 20px;
    
}

.box1>.box2>.dj-right>.wutu-6>ol>li{
    color: #6c6c6c;
    display: inline-block;

}
.box1>.box2>.dj-right>.wutu-6>ol>li:last-child{
    color: black;
    display: inline-block;
    margin-left: 13px;
    
}

相关文章

  • 页面排版

    灵活运用浮动排盘 页面内容及代码： html代码如下 css代码如下：

  • Bootstrap[第二章:排版样式]

    一．页面排版 Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。 1.页面主体 Bootstr...

  • 页面与交互设计

    页面排版原则 元素在页面构成中排版要遵循四大原则:对齐、亲密性、重复、对比 页面元素包括: 内容与行为 ...

  • 排版——设计页面

    排版不存在于真空中。精心设计的排版有助于给定页面上的整体用户体验。如果不能很好地整合到整个页面组成中，即使是句子或...

  • Bootstrap排版样式（二）

    主要学习Bootstrap全局CSS中的排版样式，包括了标题、页面主体、对齐、列表等常规内容。 一、页面排版 1....

  • 怎么用CDR来批量导出图片

    我们通过CorelDRAW上方菜单栏“布局”中的“插入页面”可以创建多个页面，同时编辑，适合比如书籍排版，杂志排版...

  • 【基础】EM 还是 REM？这是一个问题！

    简言 应用象EM 和 REM这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用EM 和 R...

  • 前端的分工

    交互工程师 主要写页面排版，交互功能，数据显示，组件化。 业务工程师 主要关注业务逻辑，会一些简单的页面整体排版。

  • 清除浮动--跟着李南江学编程

    一、为什么要清除浮动 添加浮动的原因是不想让页面局限于标准流式排版（垂直排版），那么当我们想让浮动元素垂直排版时，...

  • 【转载】关于CSS中的float和position

    当构建页面排版时，有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求，在不同的情况下，某些方法可能好过于...

网友评论

    本文标题：页面排版

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

    延伸阅读

    深度阅读

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

    栏目导航

    热点阅读

    工作生活

    关于我们|服务条款|联系我们|页面排版|投稿指南|网站地图|RSS订阅|排版工具|手机版

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

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

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

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

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