CSS 特征布局实例 - 导航栏、新闻列表、淘宝布局

Devops海洋的渔夫

发布于 2019-06-02 13:45:01

1.9K0

发布于 2019-06-02 13:45:01

文章被收录于专栏：Devops专栏

特征布局实例

为了更好地迎战各种前端示例，下面针对下面的内容，手写各种html答案。

1、特征布局：翻页（所需知识点：盒模型、内联元素）

重点：这里不能使用float:left的方式，因为这种方式不方便于居中。如果使用偏移的方式居中，当页数增加的时候，可能就不居中了。

所以要用一种内联块的居中方式：

子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

那么就是说，可以写一个ul>li>a的元素设置为块元素display:block;然后在父元素设置text-align:center;就可以使得子元素li居中了。

实现效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .menu{
            width: 600px;
            height: 40px;
            border: 1px solid #ccc;
            margin:50px auto 0;
            padding: 0;
            list-style: none;
            text-align: center;
        }
    
        .menu li{
            display: inline-block;
            height: 26px;
            line-height: 40px;
        }

        .menu li a{
            text-decoration: none;
            display: block;
            height: 26px;
            background-color: gold;
            font-size: 12px;
            font-family: "Microsoft YaHei";
            color: #000;
            line-height: 26px;
            /*padding-left: 10px;
            padding-right: 10px;*/
            padding: 0 10px;
        }

        .menu li a:hover{
            background-color: pink;
            color: #fff;
        }
    </style>
</head>
<body>
    <!-- ul.menu>(li>a{$})*11 -->
    <ul class="menu">
        <li><a href="#">上一页</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><span>……</span></li>
        <li><a href="#">17</a></li>
        <li><a href="#">18</a></li>
        <li><a href="#">19</a></li>
        <li><a href="#">20</a></li>
        <li><a href="#">下一页</a></li>
    </ul>
</body>
</html>

2、特征布局：导航条01（所需知识点：盒模型、行内元素布局）

这个导航栏实现的方式与上面的实现方式基本一致，居中布局采用还是使用内联块的子元素居中方式，其他里面的a则是可以使用margin扩展开来即可。

实现效果：

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .menu{
            width: 958px;
            height: 40px;
            border: 1px solid #ccc;
            padding: 0;
            margin:50px auto;
            list-style: none;
            text-align: center;
        }
        .menu li{
            display: inline-block;
            /*background-color: gold;*/
            height: 40px;
            line-height: 40px;
        }

        .menu li a{
            display: block;
            text-decoration: none;
            font-size: 14px;
            font-family: "Microsoft YaHei";
            color: #333;
        }

        .menu li a:hover{
            color: red;
        }

        .menu li span{
            font-size: 14px;
            font-family: "Microsoft YaHei";
            color: #333;
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li><a href="#">首页</a></li>
        <li><span>|</span></li>
        <li><a href="#">网站建设</a></li>
        <li><span>|</span></li>
        <li><a href="#">程序开发</a></li>
        <li><span>|</span></li>
        <li><a href="#">网络营销</a></li>
        <li><span>|</span></li>
        <li><a href="#">企业VI</a></li>
        <li><span>|</span></li>
        <li><a href="#">案例展示</a></li>
        <li><span>|</span></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>
</html>

3、特征布局：导航条02（所需知识点：盒模型、浮动、定位、字体对齐）

这个导航栏的方式与上面两种方式都不一样，因为不需要菜单来居中了，就可以使用浮动来处理了。记住使用浮动的时候使用clearfix的方式来清除浮动。

实现效果：

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .menu{
            width: 958px;
            margin:50px auto;
            padding: 0;
            list-style: none;
            background-color: #55a8ea;
            position: relative;
        }

        .menu li{
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .menu li a{
            text-decoration: none;
            font-size: 14px;
            font-family: "Microsoft YaHei";
            color: #fff;
        }

        .menu li:hover{
            background-color: #00618f;
        }

        .menu .new{
            position: absolute;
            top: -14px;
            left: 294px;
        }

        .clearfix:before,.clearfix:after{
            content: "";
            display: table;
        }
        .clearfix:after{
            clear:both;
        }
        .clearfix{
            zoom:1;
        }
    </style>
</head>
<body>
    <ul class="menu clearfix">
        <li><a href="#">首页</a></li>
        <li><a href="#">网站建设</a></li>
        <li><a href="#">程序开发</a></li>
        <li><a href="#">网络营销</a></li>
        <li><a href="#">企业VI</a></li>
        <li><a href="#">案例展示</a></li>
        <li><a href="#">联系我们</a></li>
        <li class="new"><img src="new.png" alt=""></li>
    </ul>
</body>
</html>

4、特征布局：图片列表（所需知识点：盒模型、浮动）

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outside{
            width: 958px;
            border: 1px solid #ccc;
        }
        
        .div1{
            width: 925px;
            height: 50px;
            margin-left: 20px;
            /*border: 1px solid #ccc;*/
            /*background-color: gold;*/
            border-bottom: 1px solid #ccc;
        }

        .div1 span{
            font-size: 18px;
            font-family: "Microsoft YaHei";
            font-weight: 700;
            line-height: 50px;
        }

        .div2 ul li{
            list-style: none;
            float: left;
            background-image: url(goods.jpg);
            width: 160px;
            height: 68px;
            margin-top: 25px;
            margin-left: 29px;
            border: 1px solid #000;
        }
        
        .div2 ul .fist{
            margin-left: -20px;
        }

        .div2 ul .upline{
            margin-top: 20px;
        }

        .div2 ul .downline{
            margin-bottom: 38px;
        }

        .clearfix:before,.clearfix:after{
            content: "";
            display: table;
        }
        .clearfix:after{
            clear:both;
        }
        .clearfix{
            zoom:1;
        }

    </style>
</head>
<body>
    <div class="outside clearfix">
        <div class="div1">
            <span>图片展示</span>
        </div>
        <div class="div2">
            <ul>
                <li class="upline fist"></li>
                <li class="upline"></li>
                <li class="upline"></li>
                <li class="upline"></li>
                <li class="upline"></li>
                <li class="downline fist"></li>
                <li class="downline"></li>
                <li class="downline"></li>
                <li class="downline"></li>
                <li class="downline"></li>
            </ul>
        </div>
    </div>
</body>
</html>

5、特征布局：新闻列表（所需知识点：盒模型、浮动）

实现效果：

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .menu{
            width: 600px;
            height: 290px;
            border: 1px solid #ccc;
            margin:50px auto;
            padding-left: 40px;
            list-style: none;
        }

        .menu .news_list{
            font-size: 18px;
            font-weight: 700;
            font-family: "Microsoft YaHei";
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #ccc;
            width: 560px;
        }

        .menu .news_list a{
            color: #000;
        }

        ul li div a{
            text-decoration: none;
        }

        ul .list{
            font-size: 14px;
            font-family: "Microsoft YaHei";
            width: 560px;
            margin:18px 0;
        }

        ul .list a{
            color: #000;
        }

        ul .list span{
            float: right;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li class="news_list">
            <div><a href="#">新闻列表</a></div>
        </li>
        <li class="list">
            <div>
                <a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
                <span>2016-06-23</span>
            </div>
        </li>
        <li class="list">
            <div>
                <a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
                <span>2016-06-23</span>
            </div>
        </li>
        <li class="list">
            <div>
                <a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
                <span>2016-06-23</span>
            </div>
        </li>
        <li class="list">
            <div>
                <a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
                <span>2016-06-23</span>
            </div>
        </li>
        <li class="list">
            <div>
                <a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
                <span>2016-06-23</span>
            </div>
        </li>
        <li class="list">
            <div>
                <a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
                <span>2016-06-23</span>
            </div>
        </li>
    </ul>
</body>
</html>

优化新闻列表

首先准备好两个图标素材：

point.gif

icon.jpg

实现效果如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .menu{
            width: 600px;
            height: 290px;
            border: 1px solid #ccc;
            margin:50px auto;
            padding-left: 40px;
            list-style: none;
        }

        .menu .new_list{
            width: 560px;
            height: 50px;
        }

        .menu .news_list .news{
            /*float: left;*/
            font-size: 18px;
            font-weight: 700;
            font-family: "Microsoft YaHei";
            line-height: 50px;
            /*background-color: red;*/
            border-bottom: 1px solid #ff0000;
            display: inline-block;
        }

        .menu .news_list a{
            color: #000;
        }

        .menu .news_list .more{
            display: inline-block;
            float: right;
            line-height: 50px;  
            margin-right: 50px;
            color: #ccc;
            /*border-bottom: 1px solid #ccc;*/
            /*background-color: cyan;*/
        }

        .menu .news_list .line{
            /*background-color: gold;*/
            border-bottom: 1px solid #ccc;
            width: 560px;
        }

        ul li div a{
            text-decoration: none;
        }

        ul .list{
            font-size: 14px;
            font-family: "Microsoft YaHei";
            width: 560px;
            margin:18px 0;
            border-bottom: 1px dotted;
        }

        ul .list a{
            color: #000;
        }

        ul .list .date{
            float: right;
        }

        ul .list .point{
            display: inline-block;
            /*border: 1px solid red;*/
            position: relative;
            top: -7px;
        }

        ul .list .icon{
            display: inline-block;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li class="news_list">
            <div class="news"><a href="#">新闻列表</a></div>
            <div class="more"><a href="#">更多&gt&gt</a></div>
            <div class="line"></div>
        </li>
        <li class="list">
            <div>
                <span class="point"><img src="point.gif" alt=""></span>
                <span class="icon"><img src="icon.jpg" alt=""></span>
                <a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
                <span class="date">2016-06-23</span>
            </div>
        </li>
        <li class="list">
            <div>
                <span class="point"><img src="point.gif" alt=""></span>
                <span class="icon"><img src="icon.jpg" alt=""></span>
                <a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
                <span class="date">2016-06-23</span>
            </div>
        </li>
        <li class="list">
            <div>
                <span class="point"><img src="point.gif" alt=""></span>
                <span class="icon"><img src="icon.jpg" alt=""></span>
                <a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
                <span class="date">2016-06-23</span>
            </div>
        </li>
        <li class="list">
            <div>
                <span class="point"><img src="point.gif" alt=""></span>
                <span class="icon"><img src="icon.jpg" alt=""></span>
                <a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
                <span class="date">2016-06-23</span>
            </div>
        </li>
        <li class="list">
            <div>
                <span class="point"><img src="point.gif" alt=""></span>
                <span class="icon"><img src="icon.jpg" alt=""></span>
                <a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
                <span class="date">2016-06-23</span>
            </div>
        </li>
        <li class="list">
            <div>
                <span class="point"><img src="point.gif" alt=""></span>
                <span class="icon"><img src="icon.jpg" alt=""></span>
                <a href="#">崔龙洙解苏宁因何打动他 要以学习的姿态去中超</a>
                <span class="date">2016-06-23</span>
            </div>
        </li>
    </ul>
</body>
</html>

淘宝女装

准备好图片如下：

banner.jpg

cloth.jpg

cloth02.jpg

实现如下：

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .outside{
            width: 498px;
            height: 343px;
            border: 1px solid #f00;
            margin: 50px auto;
        }

        .outside .title{
            width: 440px;
            height: 20px;
            /*background-color: gold;*/
            margin-top: 30px;
            margin-left: 30px;
            margin-bottom: 17px;
            border-left: 2px solid #f00;
            text-indent: 20px;
            font-size: 14px;
            font-family: "Microsoft YaHei";
            font-weight: 700;
            line-height: 20px;
        }

        .outside .banner{
            margin-left: 30px;
            /*width: 239px;*/
            /*height: 212px;*/
            display: inline-block;
            /*background-color: gold;*/
            position: relative;
            top: 3px;
            padding-right: 10px;
        }

        .outside .banner img{
            /*width: 239px;*/
            /*height: 212px;*/
        }

        .outside .right{
            width: 211px;
            height: 239px;
            /*border: 1px solid #000;*/
            display: inline-block;
            position: relative;
            top: -42px;
        }

        .outside .right{
            width: 222px;
        }
        
        .outside .right ul{
            list-style: none;
        }

        .outside .right li{
            display: inline-block;
        }
        
        
        .outside .right .up li span{
            position: relative;
            top: 22px;
            left: -75px;
        }

        .outside .right .up .shishang{
            position: relative;
            top: -4px;
            left: 4px;
            padding: 10px;
        }

        .outside .right .up .chaoliu{
            position: relative;
            top: -104px;
            right: -112px;
        }

        .outside .right .down{
            float: left;
            width: 211px;
            height: 97px;
            padding-left: 10px;
            /*background-color: gold;*/
            position: relative;
            top: -55px;
            text-align: center;
        }

        .outside .right .down .second{
            position: relative;
            left: -5px;
        }

        .outside .right .down li{
            height: 45px;
            width: 98px;
            border: 1px dotted #ccc;
            line-height: 45px;
        }



    </style>
</head>
<body>
    <div class="outside">
        <div class="title">淘宝女装</div>
        <div>
            <div class="banner">
                <img src="banner.jpg" alt="御姐潮装日记">
            </div>
            <div class="right">
                <ul class="up">
                    <li class="shishang">
                        <img src="cloth.jpg" alt="时尚包包">
                        <span>时尚包包</span>
                        <!-- 时尚包包 -->
                    </li>
                    <li class="chaoliu">
                        <img src="cloth02.jpg" alt="潮流美鞋">
                        <span>潮流美鞋</span>
                        <!-- 潮流美鞋 -->
                    </li>
                </ul>
                <ul class="down">
                    <li class="first">新品上市</li>
                    <li class="second">女装</li>
                    <li class="first">欧美风</li>
                    <li class="second">美搭</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.02.06 ，如有侵权请联系 cloudcommunity@tencent.com 删除

block