css练习一：常用的布局实例（分页、导航条、图片列表）

作者: joyitsai | 来源:发表于2019-05-05 17:20 被阅读0次

css练习一：常用的布局实例（分页、导航条、图片列表）
CSS 图片
点时创新Web前端课程大纲
表格与表单
CSS常用布局实现
分页、导航条1、导航条2
小程序CSS知识点
分页导航栏开班信息
CSS 分页实例
##深入学习CSS布局系列（一）布局常用属性

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

翻页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>分页</title>
    <style type="text/css">
        .pagination{
            width: 960px;
            height: 40px;
            border: 1px solid #000;
            margin: 30px auto 0;
            /*a标签换行会出现间隙，在父元素中设置font-size:0来消除a标签之间的间隙
               并在相应的子元素中设置需要的字体大小，即可解决代码中a标签换行带来的间隙
             */
            font-size: 0;
            text-align: center;
        }
        .pagination a{
            /*将a标签设置为行内块元素，能够设置width、height、padding上下、margin上下等属性*/
            display: inline-block;
            background-color: gold;
            padding: 5px 10px;
            text-decoration: none;
            font: 12px 'Microsoft Yahei';
            margin: 8px 6px;
        }
        .pagination span{
            display: inline-block;
            padding: 5 10px;
            font: 12px 'Microsoft Yahei';
        }

    </style>
</head>
<body>
    <!--分页用a标签来做，相对来说结构简单清晰-->
    <div class="pagination">
        <a href="#">上一页</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <span>...</span>
        <a href="#">9</a>
        <a href="#">10</a>
        <a href="#">11</a>
        <a href="#">12</a>
        <a href="#">下一页</a>
    </div>
</body>
</html>

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

导航条01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>导航条</title>
    <style type="text/css">
        .menu{
            width: 960px;
            height: 40px;
            border: 1px solid #000;
            margin: 0 auto;
            list-style: none;
            padding: 0;
            font-size: 0;
            text-align: center;
            line-height: 40px;
        }
        .menu li{
            display: inline-block; /*将li元素设置为行内块元素，能够排列在一行*/
            font-size: 14px;
            color: #333;
            margin: 0 10px;
        }
        .menu a{
            text-decoration: none;
            font:14px 'Microsoft Yahei';
            color: #333;
        }
    </style>
</head>
<body>
     <!--直接通过ul标签来作为导航条的盒子主体-->
    <ul class="menu">
        <li><a href="#">首页</a></li>
        <li>|</li>
        <li><a href="#">网站建设</a></li>
        <li>|</li>
        <li><a href="#">程序开发</a></li>
        <li>|</li>
        <li><a href="#">网络营销</a></li>
        <li>|</li>
        <li><a href="#">企业VI</a></li>
        <li>|</li>
        <li><a href="#">案例展示</a></li>
        <li>|</li>
        <li><a href="#">联系我们</a></li>
    </ul>
</body>
</html>

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

导航条2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>导航栏2</title>
    <style type="text/css">
        .menu{
            width: 960px;
            height: 40px;
            background-color: #55a8ea;
            margin: 0 auto;
            padding: 0;
            list-style: none;
            font-size: 0;
        }
        .menu li{
            display: inline-block;  
            font: 16px/40px 'Microsoft Yahei';
            width: 100px;
            text-align: center;
        }
        .menu a{
            text-decoration: none;
            color: white;
        }
        .menu li:hover{
            background-color: #00619f;
        }

    </style>
</head>
<body>
    <ul class="menu">
        <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>
    </ul>
</body>
</html>

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

图片列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>图片列表</title>
    <style type="text/css">
        .pic_list_con{
            width: 960px;
            /*没有height，让子元素撑开父元素*/
            border: 1px solid #ddd;
            margin: 0 auto;
            overflow: hidden;
        }
        .pic_list_con h3{
            width: 920px;
            height: 50px;
            margin: 0 auto;
            border-bottom: 1px solid #ddd;
        }
        .pic_list_con h3 span{
            display: inline-block;
            height: 50px;
            font:18px/50px 'Microsoft Yahei';
            font-weight: 700;
            border-bottom: 2px solid red;
            position: relative;
        }
        .pic_list_con ul{
            width: 950px;
            list-style: none;
            padding: 0;
            margin: 20px 20px 13px 20px;
        }
        /*浮动的子元素，无法将父元素撑开，需要在父元素上清除浮动*/
        .pic_list_con ul li{
            width: 160px;
            height: 68px;
            float: left;
            margin: 0 29px 25px 0;
        }
        .pic_list_con ul img{
            border-radius: 5px;
        }
        .clearfix:before,.clearfix:after{
            content: "";
            display: table;
        }
        .clearfix:after{
            clear: both;
        }
        .clearfix{
            zoom:1;
        }
    </style>
</head>
<body>
    <div class="pic_list_con">
        <h3><span>图片展示</span></h3>
        <ul class="clearfix">
            <li><a href="#"><img src="1.jpg"></a></li>
            <li><a href="#"><img src="1.jpg"></a></li>
            <li><a href="#"><img src="1.jpg"></a></li>
            <li><a href="#"><img src="1.jpg"></a></li>
            <li><a href="#"><img src="1.jpg"></a></li>
            <li><a href="#"><img src="1.jpg"></a></li>
            <li><a href="#"><img src="1.jpg"></a></li>
            <li><a href="#"><img src="1.jpg"></a></li>
            <li><a href="#"><img src="1.jpg"></a></li>
            <li><a href="#"><img src="1.jpg"></a></li>
        </ul>
    </div>
</body>
</html>

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

新闻列表1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>新闻列表</title>
    <style type="text/css">
        .news_list_con{
            width: 602px;
            height: 291px;
            border: 1px solid #ddd;
            margin: 0 auto;
        }
        .news_list_con h3{
            width: 560px;
            height: 50px;
            margin: 0 auto;
            border-bottom: 1px solid #ddd;
        }
        .news_list_con h3 span{
            /*让span内联元素变成行内块元素，此时的width和height生效*/
            display: inline-block;
            height: 50px;
            font:18px/50px 'Microsoft Yahei';
            border-bottom: 2px solid red;
            padding: 0 15px;
            /*
            有的浏览器可能会将行内块元素以外的border部分hidden掉，使用
            relative的定位，是相对于自身相对定位的，不存在自身以外的部分被hidden   
            */
            position: relative;
        }
        .news_list_con ul{
            list-style: none;
            width: 560px;
            height: 238px;
            padding: 0;
            margin: 7px auto 0;
        }
        .news_list_con ul li{
            height: 38px;
            border-bottom: 1px solid #ddd;
        }
        .news_list_con ul a {
            float: left;
            text-decoration: none;
            height: 38px;
            font:14px/38px 'Microsoft Yahei';
            color: #000;
        }
        .news_list_con ul span{
            float: right;
            height: 38px;
            font:14px/38px 'Microsoft Yahei';
            color: #000;
        }
        .news_list_con ul a:before{
            content: "· ";
        }
        .news_list_con ul a:hover{
            color: red;
        }
    </style>
</head>
<body>
    <div class="news_list_con">
        <h3><span>新闻列表</span></h3>
        <ul>
            <li><a href="#">特征布局：新闻列表，所需知识点：盒模型、浮动</a><span>2019-5-5</span></li>
            <li><a href="#">特征布局：新闻列表，所需知识点：盒模型、浮动</a><span>2019-5-5</span></li>
            <li><a href="#">特征布局：新闻列表，所需知识点：盒模型、浮动</a><span>2019-5-5</span></li>
            <li><a href="#">特征布局：新闻列表，所需知识点：盒模型、浮动</a><span>2019-5-5</span></li>
            <li><a href="#">特征布局：新闻列表，所需知识点：盒模型、浮动</a><span>2019-5-5</span></li>
            <li><a href="#">特征布局：新闻列表，所需知识点：盒模型、浮动</a><span>2019-5-5</span></li>
        </ul>
    </div>
</body>
</html>

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

新闻列表2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>新闻列表2</title>
    <style type="text/css">
        .news_list_con{
            width: 602px;
            height: 291px;
            margin: 0 auto;
            border: 1px solid #ddd;
        }
        .news_list_con h3{
            width: 560px;
            height: 50px;
            border-bottom: 1px solid #ddd;
            margin: 0 auto;
        }
        .news_list_con h3 span{
            display: inline-block;
            height: 50px;
            font: 18px/50px 'Microsoft Yahei';
            color: #000;
            font-weight: 600;
            padding: 0 15px;
            border-bottom: 2px solid red;
            position: relative;
        }
        .news_list_con h3 a{
            float: right;
            text-decoration: none;
            font: 14px/50px 'Microsoft Yahei';
            color: #666;
        }
        .news_list_con ul{
            list-style: none;
            width: 560px;       
            padding: 0;
            margin: 7px auto 0;
        }
        .news_list_con ul li{
            float: left;
            width: 560px;
            height: 38px;
            border-bottom: 1px solid #ddd;
            text-indent: 10px;
            background: url('dot.jpg') no-repeat;
            background-size: 10px 38px;
        }
        .news_list_con ul a{
            /*a标签设置为行内块元素，设置text-indent才有效*/
            display: inline-block;
            text-decoration: none;
            font: 14px/38px 'Microsoft Yahei';
            color: #000;
            background: url('icon.jpg') no-repeat;
            text-indent: 65px;
        }
        .news_list_con ul span{
            float: right;
            font: 14px/38px 'Microsoft Yahei';
        }
    </style>
</head>
<body>
    <div class="news_list_con">
        <h3><span>新闻列表</span><a href="#">更多&gt;&gt;</a></h3>
        <ul>
            <li><a href="#">特征布局：新闻列表,所需知识点：盒模型、浮动</a><span>2019-5-5</span></li>
            <li><a href="#">特征布局：新闻列表,所需知识点：盒模型、浮动</a><span>2019-5-5</span></li>
            <li><a href="#">特征布局：新闻列表,所需知识点：盒模型、浮动</a><span>2019-5-5</span></li>
            <li><a href="#">特征布局：新闻列表,所需知识点：盒模型、浮动</a><span>2019-5-5</span></li>
            <li><a href="#">特征布局：新闻列表,所需知识点：盒模型、浮动</a><span>2019-5-5</span></li>
            <li><a href="#">特征布局：新闻列表,所需知识点：盒模型、浮动</a><span>2019-5-5</span></li>
        </ul>
    </div>
</body>
</html>

css练习一：常用的布局实例（分页、导航条、图片列表）
1、特征布局：翻页（所需知识点：盒模型、内联元素） 2、特征布局：导航条01（所需知识点：盒模型、行内元素布局） ...
CSS 图片
CSS 图片本章节将为大家介绍如何使用 CSS 来布局图片。圆角图片实例圆角图片: 尝试一下 » 实例椭...
点时创新Web前端课程大纲
一、html常用标签、列表、表格、表单... 二、css 样式字体设置、盒模型、网页布局... 三、JavaScr...
表格与表单
表格 table常用标签 table常用属性传统布局表单分页
CSS常用布局实现
该系列用于整理记录常用的CSS布局实现。 CSS常用布局实现01-水平居中 CSS常用布局实现02-垂直居中 CS...
分页、导航条1、导航条2
分页导航条1 导航条2
小程序CSS知识点
一、flex布局Flex 布局教程：语法篇Flex 布局教程：实例篇二、CSS position 属性总结CSS...
分页导航栏开班信息
分页导航条导航条2 开班信息
CSS 分页实例
本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。简单分页如果你的网站有很多个页面，你就需要使用分...
##深入学习CSS布局系列（一）布局常用属性
@(CSS)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性一直感觉自己对CSS的各个属性很了解，可...