美文网首页
CSS 特征布局实例 - 导航栏、新闻列表、淘宝布局

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

作者: Devops海洋的渔夫 | 来源:发表于2019-02-06 14:13 被阅读69次

仅供学习，转载请注明出处

特征布局实例

为了更好地迎战各种前端示例，下面针对下面的内容，手写各种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年全套Java、Android、HTML5前端、Python、大数据视频，价值数万资源大放送

寻找资源的地址如下：

扫描微信公众号

寻找价值数万的视频资源

相关文章

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

    仅供学习，转载请注明出处 特征布局实例 为了更好地迎战各种前端示例，下面针对下面的内容，手写各种html答案。 1...

  • CSS布局

    CSS布局 什么是布局 现有样式不能满足人们的需求 文档流 浮动 定位 人们需要： 导航栏+内容 导航栏+内容+广...

  • 特殊布局方法

    关于圣杯布局和双飞翼布局：CSS布局之--淘宝双飞翼布局双飞翼布局介绍CSS控制自适应宽度两三栏布局圣杯布局的实现...

  • 布局

    单栏布局两栏布局三栏布局风景列表卡片

  • NavigationView

    一、DrawerLayout 侧面滑动导航栏。 第一个子布局：内容区。 第二个子布局：导航栏布局。 注意导航栏布局...

  • CSS - 导航栏布局

    内联元素与块级元素 今天踩坑里了,这两家伙,终于见识到真面目.我得反思下哪些是块级元素,行内元素. Block 可...

  • 网站开发之Bootstrap篇

    1.概念 2.使用 引用 2.1 布局 响应式网格系统 表格 列表 2.2. 组件 2.2.1 导航栏 导航栏na...

  • CSS布局 与 元素居中

    什么是布局 现有样式的布局，不能满足需求 文档流 浮动 定位 现实需要的布局： 导航栏+内容 导航栏+内容+广告栏...

  • 小程序自定义导航栏

    1.wxml页面 （自定义导航栏的布局） //css就不粘出来了 2. 自定义导航栏 js （要跳转的页面 对...

  • CSS布局技巧总结

    目录 详解 CSS 七种三栏布局技巧 16种方法实现水平居中垂直居中 详解 CSS 七种三栏布局技巧 三栏布局，顾...

网友评论

      本文标题：CSS 特征布局实例 - 导航栏、新闻列表、淘宝布局

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

      延伸阅读

      深度阅读

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

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|CSS 特征布局实例 - 导航栏、新闻列表、淘宝布局|投稿指南|网站地图|RSS订阅|排版工具|手机版

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

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

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

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

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