这种情势的弱项是html代码和css代码混合在共同,直接在html语句的习性中设置

块级标签在页面中是操纵1行的,能够设置宽度和惊人

每三个要素自个儿都会有四条线,顶线,中线,基线,底线

此地用到叁个新的属性:清除浮动 clear,有四个属性值

 (2)line-height

 那明明不是大家想要的,出现那么些主题材料的原故是其壹父级标签没有内容,当子级标签加上margin-top那脾性情后,他会往自身的下边找。假诺找到的是弟兄标签,那没至极。不过只要找到的是父级标签,将在看那么些老爸是否合格的父亲(有未有内容),要是未有内容,就不认那个老爹了,就会以自个儿代码之上的另一个标签为尺度,修改自身的上方距,假设地点未有成分,就会以body为准。

在html中,列表的每一种前面包车型地铁圆点大家无法修改,在css中就足以了

View Code

威尼斯人娱乐 1威尼斯人娱乐 2

1.none

right: 右侧区别意有生成成分

  a:hover    鼠标悬浮在要素上的体裁

利用中能够对父级标签设置成相对稳固,但不用偏移,那样子级成分即能够父级标签为条件移动地方了

对于标签的原来属性,如id和class,能够经过#或.的措施找到。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        @media screen and (max-width: 1200px) {
            div{
            width: 100%;
            height: 100px;
            background: red;
            }
        }


        @media screen and (max-width: 900px){
            div{
            width: 100%;
            height: 100px;
            background: green;
            }
        }

        @media screen and (max-width: 600px) {
            div{
            width: 100%;
            height: 100px;
            background: black;
            }
        }
    </style>
</head>
<body>
    <div>

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

安装maigin恐怕padding时,后边的值能够设置2个,也足以安装八个,顺序是上,右,下,左

第一想到的应有是给父级标签加叁个定点高度,那样无论有未有内容,地方反正都曾经占好了。然而这一个惊人应该扩展少吧,至少要能包含住子成分,又不可能超越许多,那是个难点,而且那几个主意很笨重,一点都不优雅

5、选择器的先期级

直白在html语句的性质中安装,那种方法的症结是html代码和css代码混合在协同,耦合性太强,维护困难

二、css的引进格局

要害说一下vertical-align和line-heigh,那五个属性在对齐的时候平常会用到

安装为绝对定位的因素会以近来的已定位的下面成分定位,倘诺持有的顶头上司成分都不曾定点,则以body为标准地方偏移。绝对定位属于完全退出文书档案流,本人的原来地方会被别的因素攻克。

以后给c叁加二个margin-top:30px;再来看功能:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">

一、css简介

能够单独设置多个样子的边距,分别为top,right,bottom,left

在style标签中引进外部的css文件

8、盒子模型

 

 2.背景

4.inline-block,那个才是最常用的,那个天性能够让标签既能并排呈现,又有块级标签能够安装宽高的特色

clear只会对自身起效果,不会潜移默化其余因素。

只借使自定义属性,将在通过中括号的不二等秘书技

四.inline-block,这些才是最常用的,这些天性能够让标签既能并排展现,又有块级标签能够安装宽高的表征

直白在html语句的特性中设置,那种艺术的毛病是html代码和css代码混合在一起,耦合性太强,维护困难

但是难点依旧尚未深透消除,首先c2依然坍缩成了一条线,此外还有个难点,c1标签加多margin属性的时候会开采,margin失效了

  我们浏览网页的时候,有时会超越鼠标放在三个要素上时,成分会爆发变化的状态,那就是由此anchor伪类完毕的,不止有鼠标悬浮的样式,还是能安装点击时,以及点击后的体制

我们来看一下父级塌陷难点

left:  右边差异意有生成的成分

 <style type="text/css">
        @import "index.css";
    </style>

float属性便是会让元素浮在例行文档流之上,能够向左飘也许向右飘,要是全部的竹签都扭转起来,那就既能够调宽高,又能够在壹排展现了,和display:inline-block;的机能一样

二.relative绝对稳住

  a:link   私下认可状态

list-style-image 用图片当作列表项的标记

那般会在浏览器中展现helloworld,可是从网页的html源码中是找不到world的,这一个伪类的严重性效率正是把1部分会让读者看不懂的代码,写到伪类中,举例布局的时候要求一个空的div标签,若是写到源码中,读者读到这几个岗位可能会变成误解。所以就写到伪类中。content的属性值,越多的时候是空的。

  a:hover    鼠标悬浮在要素上的样式

威尼斯人娱乐 3威尼斯人娱乐 4

威尼斯人娱乐 5

1.

1.anchor伪类:

 平常情况下,大家写的竹签在网页中是全自动根据从左到右,从上到下的依次依次排列的,在那之中内联标签是同样重视摆列,块级成分是独占1行,那正是正规文书档案流

 

四.列表属性

主题素材又来了,看这一个事例

在html中,列表的每1项前面包车型地铁圆点我们无法修改,在css中就足以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .out{
            width: 300px;
            height: 300px;
            background: greenyellow;
        }
        .c1{
            width: 100px;
            height: 100px;
            background: gold;
        }
        .out:hover .c1{
            background: red;
        }
        .out:visited{
            background: white;
        }
        .out:active{
            background: black;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>

</body>
</html>

1旦是浮动流,就并排贴到它的右侧

二.block 把内联标签形成块级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .clearfix{
            content: '';
            display: block;
            clear: both;
        }
        .header{
            width: 100%;
            height: 44px;
            background: #2459a2;
        }
        .header_box{
            width: 1016px;
            height: 44px;
            /*border:1px red solid;*/
            margin:0 auto;
        }
        .logo{
            /*line-height: 44px;*/
            float: left;
            margin-top: 11px;
        }
        .option{
            float: left;
            line-height: 44px;
            background: #2459a2;
            /*margin: 0 20px;*/
            padding-left: 16px;
            padding-right:13px;;
        }
        .option:hover{
            background:#396bb3
        }
        .header_box .left .option a{
            text-decoration: none;
            color: white;
        }
        .header_box .right input{
            height: 30px;
            float: right;
            margin-top: 3px;

        }
        .header_box .right a{
            text-decoration: none;
            color: white;
            float: right;
            text-align: center;
            line-height: 44px;
            padding-left: 16px;
            padding-right:13px;;
        }
        .header_box .right form{
            float: right;
            margin-top: 7px;
            width: 160px;
            height: 30px;
            /*border:1px green solid;*/
            background: whitesmoke;
        }
        .header_box .right form input{
            /*background: ;*/
            width: 130px;
            height: 30px;
            float: left;
            margin: 0;
            /*padding: 0;*/
            border: 0px white;
        }
        .header_box .right form a{
            width: 30px;
            height: 30px;
            float: right;
            /*background: red;*/
            margin:0;
            padding:0;
        }

        .header_box .right form span{
            width: 13px;
            height: 13px;
            float: right;
            /*background: red;*/

            background: url("icon.png") no-repeat 0 -197px;
            margin-top: 8px;
            margin-right: 8px;
            padding: 0;
        }
        .body{
            width: 100%;
            height: 1160px;
            /*background: red;*/
            margin:0 auto;
            overflow: hidden;
            background: #ededed;
        }
        .body_box{
            /*margin: 25px;*/

            width: 1016px;
            height: 1160px;

            margin: 10px auto;
            background: #fff;
            margin-top: 0;

            /*background: green;*/

        }
        .body_box .left{
            float: left;
            width: 630px;
            height: 1010px;
        }
        .body .body_box .left .top{
            width: 630px;
            height: 43.2px;
            /*background: gold;*/
            border-bottom: 1px #dec7f4 solid;
            margin-left: 15px;
        }
        .body .body_box .left .top a{
            text-decoration: none;
            color: #369;
            font-size: 14px;
            text-align: center;
            line-height: 26px;


        }
        .body .body_box .left .top a.title_left{
            float: left;
            margin-left:15px;
            width: 60px;
            height: 26px;
            margin-top:8px ;
            font-size: 13px;
            font-weight: 700;
            /*margin-right: 5px;*/

        }
        .body .body_box .left .top a.title_right{
            float: right;
            margin:10px auto;
            margin-right: 15px;
            font-size: 13px;
            color: #390;

        }

        .body .body_box .left .top a.最热{
            background: #f0f4f8;
            border-radius:25px;
            color: #333;
        }
        .body .body_box .left .top a.即时排序{
            color: #b4b4b4;
        }
        .body .body_box .left .top a.发布{
            width: 100px;
            height: 26px;
            background: #84a42b;
            color: #fff;
            margin-right: 0;

        }
        .article li{
            margin-left: 15px;
            width: 630px;
            height:120px;
            border-bottom: 1px #dec7f4 solid;
            list-style: none;
            display: inline-block;
            margin-top: 5px;
            /*position: relative;*/

        }
        li>a img{
            float: right;
        }
        .article .artical_content{
            /*margin-right: 0;*/
            float: left;
            width:546.88px;
            height: 38.4px;

        }
        .qu{
            font-size: 12px!important;
            text-decoration: underline!important;
            color: grey!important;
         }
        .article .artical_content a{
            text-decoration: none;
            color: #369;
            font-weight: 600;
            font-size: 15px;
        }
        .article .artical_content a:hover{
            text-decoration:underline;
        }
        .article .artical_content span{
            font-size: 12px;
            color: grey;
        }

        .artical_bottom{
            display: inline-block;
            width: 630px;
            height: 26.8px;
            /*background: red;*/
            float: left;
            margin-top:21px;
            font-size: 13px;
            color: #777777;
        }
        .artical_bottom:hover .share{
            display: inline-block;
        }
        .label{
            float: left;
            margin-top:6px;;
            margin-right: 10px;
            width:36px;
            height:16px;
            /*background: grey;*/
        }
        label:hover{

        }
        .like_img{
            /*line-height: 26.8px;*/
            /*margin-right: 15px;*/
            float: left;
            width: 17px;
            height: 18px;
            background: url("like.png") no-repeat 0 -41px;
            /*margin:18px auto;*/
        }
        .like_img:hover{
            background: url("like.png") no-repeat 0 -21px;
        }
        .count{
            float: left;
            margin-left: 4px;
            font-size: 16px;
            margin-top: -1px;
            color: #99accb;
        }
        .count:hover{
            text-decoration: underline;
            color: #369;

        }
        .comment .like_img{
             background: url("like.png") no-repeat 0 -100px;
        }
        .comment .like_img:hover{
            background: url("like.png") no-repeat 0 -80px;
        }
        .favorite{
            width: 56px;
        }
        .favorite .like_img{
             background: url("like.png") no-repeat 0 -160px;

        }
        .favorite .like_img:hover{
            background: url("like.png") no-repeat 0 -140px;
        }
        .favorite .text{
            color: #99accb;
            font-weight: 400;
        }
        .favorite .text:hover{
            color: #369;
            text-decoration: underline;
        }
        .issue_time{
            margin-top: 4px;
            width: 100px;
        }
        .origin{
            float: left;
            margin-top:6px;;
            margin-right: 5px;
            width:66px;
            height:16px;
        }

        .origin img{

            float: left;
        }
        a .text{
            float: left;
            margin-top:2px;
            font-size: 12px;
        }
        .origin b{
            margin-top:1px;;
            color: #99accb;
            font-weight: 400;
        }
        .origin b:hover{
            color: #369;
            text-decoration: underline;
        }
        .issue_time .time{
            color: #e59373;
            font-weight: 400;
        }
        .issue_time .time:hover{
            text-decoration: underline;
        }
        .issue_time .issue{
            color: #ccc;
            font-weight: 400px;
        }
        .share{
            font-size: 12px;
            float: left;
            width: 180px;
            height: 17px;
            margin-left: 20px;
            display: none;
            /*background: honeydew;*/
        }
        .share_text{
            float: left;
        }
        .share_img{
            width: 17px;
            height:15px;
            float: left;
            /*background: red;*/
            background: url("share_icon.png") no-repeat 0 1px;
            margin-left: 7px;
        }
        .sina:hover{
            background: url("share_icon.png") no-repeat 0 -89px;
        }
        .douban{
         background: url("share_icon.png") no-repeat 0 -14px;
        }
        .douban:hover{
            background: url("share_icon.png") no-repeat 0 -103px;
        }
        .qq{
         background: url("share_icon.png") no-repeat 0 -30px;
        }
        .qq:hover{
            background: url("share_icon.png") no-repeat 0 -119px;
        }

        .renren{
         background: url("share_icon.png") no-repeat 0 -60px;
        }
        .renren:hover{
            background: url("share_icon.png") no-repeat 0 -150px;
        }
        .page .page_box{
            width:532px;
            height: 34px;
            /*background: beige;*/
            /*position: absolute;*/
            /*top:12px;*/
            float: left;
            margin:20px auto;
            margin-left: 15px;
        }
        .page li {
            list-style: none;
            float: left;
        }
        .page li a{
        }
        .page li .page_count{
            text-decoration: none;
            float: left;
            margin-right:6px;
            height: 34px;
            width: 34px;
            text-align: center;
            border: 1px #e1e1e1 solid;
            border-radius: 8px;
            line-height: 34px;
            color: #369;
        }
        .page li .nextpage{
            width: 77px;
        }
        .page li .pagefirst{
            border: none;
            color: #333;
            font-weight: 700;
        }
        .body_box>.right{
            width:320px;
            height: 1000px;
            /*background: #2459a2;*/
            float: right;
        }
        .body_box .right li{
            list-style: none;
            margin-top: 5px;
        }
        .body_box>.bottom{
            width: 980px;
            height: 150px;
            /*background: green;*/
            float: left;
            margin-left: 20px;
            margin-top: 35px;
            border-top:1px solid #ccdcef;;
        }
        .body_box>.bottom .outer_link{
            width: 800px;
            height: 20px;
            margin:10px auto;
        }

        .body_box>.bottom li{
            list-style: none;
            float: left;
            font-size: 12px;
            color: #369;
            margin-left: 10px;
            margin-right: 10px;
            line-height: 20px;

        }
        .body_box>.bottom li a{
            text-decoration: none;
        }
        .body_box>.bottom li a img{
            margin-top:1px;;
        }
        /*.body_box>.bottom .outer_link{*/
            /*margin-top: 64px;*/
        /*}*/
        .body_box>.bottom .outer_link span{
            float: left;
        }
        .body_box>.bottom .lower_item div{
            /*float: left;*/
            width: 800px;
            height: 20px;
            margin:5px auto;
            text-align: center;
            font-size: 12px;


        }
        .body_box>.bottom .lower_item a{
            text-decoration: none;
            color: #333;
        }
        .gozap_logo{
            vertical-align: -2px;
        }
        .turn2top a{
            position: fixed;
            bottom: 60px;
            right: 200px;
            text-decoration: none;
            font-size: 19px;
            font-weight: 800;
            width: 38px;
            height: 38px;
            background: url("Back-to-the-top_38_78.png") no-repeat 0 0;
        }
        .turn2top a:hover{
            background: url("Back-to-the-top_38_78.png") no-repeat 0 -40px;

        }

    </style>
</head>
<body>
    <div id="start"></div>
    <div class="header clearfix">
        <div class="header_box clearfix">
            <div class="left">
                <div class="logo"><img src="抽屉logo.png" alt="威尼斯人娱乐 6"></div>
                <div class="option"><a href="#">全部</a></div>
                <div class="option"><a href="#">42区</a></div>
                <div class="option"><a href="#"> 段子</a></div>
                <div class="option"><a href="#">图片</a></div>
                <div class="option"><a href="#">挨踢1024</a></div>
                <div class="option"><a href="#"> 你问我答</a></div>
            </div>
            <div class="right">
                <form action="" >
                    <a href="#"></a>
                    <input type="text" >


                </form>

                        <!---->
                <a href="#">登录</a>
                <a href="#">注册</a>
            </div>
        </div>

    </div>
    <div class="body clearfix">
        <div class="body_box clearfix">
            <div class="left">
                <div class="top clearfix">
                    <a href="#" class="title_left 最热">最热</a>
                    <a href="#" class="title_left 发现">发现</a>
                    <a href="#" class="title_left 人类发布">人类发布</a>

                    <a href="#" class="title_right 发布">+ 发布</a>
                    <a href="#" class="title_right 3天">3天</a>
                    <a href="#" class="title_right 24小时">24小时</a>
                    <a href="#" class="title_right 即时排序">即时排序</a>
                </div>
                 <div class="article">
                     <ul>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="威尼斯人娱乐 7"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="威尼斯人娱乐 8">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="威尼斯人娱乐 9"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="威尼斯人娱乐 10">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="威尼斯人娱乐 11"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="威尼斯人娱乐 12">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="威尼斯人娱乐 13"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="威尼斯人娱乐 14">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="威尼斯人娱乐 15"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="威尼斯人娱乐 16">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="威尼斯人娱乐 17"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="威尼斯人娱乐 18">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                         <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="威尼斯人娱乐 19"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="威尼斯人娱乐 20">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                     </ul>
                 </div>
                <div class="page clearfix">
                      <div class="page_box ">
                            <ul>
                                <li>1</li>
                                <li><a href="#" class="page_count">2</a></li>
                                <li><a href="#" class="page_count">3</a></li>
                                <li><a href="#" class="page_count">4</a></li>
                                <li><a href="#" class="page_count">5</a></li>
                                <li><a href="#" class="page_count">6</a></li>
                                <li><a href="#" class="page_count">7</a></li>
                                <li><a href="#" class="page_count">8</a></li>
                                <li><a href="#" class="page_count">9</a></li>
                                <li><a href="#" class="page_count">10</a></li>
                                <li><a href="#" class="page_count nextpage">下一页</a></li>
                            </ul>
                    </div>
                </div>

            </div>
            <div class="right">
                <ul>
                    <li><img src="report_right.jpg" alt="威尼斯人娱乐 21" class="right_img"></li>
                    <li><img src="homepage_right.png" alt="威尼斯人娱乐 22" class="right_img"></li>
                    <li><img src="chen_right.jpg" alt="威尼斯人娱乐 23" class="right_img"></li>
                    <li><img src="erwema_right.jpg" alt="威尼斯人娱乐 24" class="right_img"></li>
                </ul>
            </div>
            <div class="bottom">
                <div class="outer_link">
                    <ul>
                    <li><a href="#" class="bottom_text">关于我们</a></li>
                    |
                    <li><a href="#" class="bottom_text">联系我们</a></li>
                    |
                    <li><a href="#" class="bottom_text">服务条款</a></li>
                    |
                    <li><a href="#" class="bottom_text">隐私政策</a></li>
                    |
                    <li><a href="#" class="bottom_text">抽屉新热榜工具</a></li>
                    |
                    <li><a href="#" class="bottom_text">下载客户端</a></li>
                    |
                    <li><a href="#" class="bottom_text">意见与反馈</a></li>
                    |
                    <li><a href="#" class="bottom_text">友情链接</a></li>
                    |
                    <li><a href="#" class="bottom_text">公告</a></li>
                    <li><a href="#" class="bottom_text"><img src="rss.png" alt="威尼斯人娱乐 25"></a></li>
                </ul>

                </div>
                <div class="lower_item">
                    <div class="row1">
                        <a href="#"><img src="gozap-logo.png" alt="威尼斯人娱乐 26"class="gozap_logo"></a>
                        旗下站点 &copy2017 chouti.com
                        <a href="#">京ICP备052302号-3 京公网安备 397272979</a>
                    </div>
                    <div class="row2">
                        违法和不良信息举报: 电话: 13021552997 &nbsp邮箱:zhangcan121@163.com
                    </div>
                    <div class="row3">
                        版权所有:北京格物致知科技有限公司
                    </div>

                </div>

            </div>
        </div>
    </div>
    <div class="turn2top">
        <a href="#start"></a>
    </div>
</body>
</html>

图片都是本地图片

威尼斯人娱乐 27威尼斯人娱乐 28

本条事例,.c三的权重值是10,

display:none
 隐藏标签,那一个隐蔽的情致是不单这么些标签看不到了,而且以此标签在页面中据为己有的职位也未曾了,其余剧情会来据为己有这么些地点,比如京东天猫那么些网址的首页中相当轮播图,其实是多多益善张图纸都在同叁个职分,可是同样时刻只呈现一张,其余的都隐藏

当有多个一律的自定义属性时,还能用属性值区分,如div[zhang=”123″]{}

假如是自定义属性,就要通过中括号的点子

  对齐格局的品质是text-align,属性值:

把背景设置成图片,应用最多的是网页上的小Logo,一大半那些图标并不是一张张小的图样,而是1整张大的图片,包蕴众多小图标,通过运动地点让她们在盼望的职务显得想要的部分。

二.relative相对永远

 那鲜明不是我们想要的,出现这几个题材的原故是这些父级标签未有内容,当子级标签加上margin-top那特性情后,他会往团结的上方找。借使找到的是兄弟标签,那尚未难点。但是假如找到的是父级标签,将在看那么些阿爸是还是不是合格的生父(有未有内容),假如没有内容,就不认这些阿爹了,就会以友好代码之上的另一个标签为准绳,修改本人的上方距,如若地方未有成分,就会以body为准。

在这一个事例中,
在父级标签c2上边包车型大巴c壹标签被c二的子标签覆盖,同时父级标签坍缩成一条线

四、伪类

 (2)line-height

威尼斯人娱乐 29威尼斯人娱乐 30

九、float属性

(4)导入式:

            font-size: 12px;文本字体大小

            font-weight: 500;字体粗细,100-900

            font-family: Arial;字体库

            font-style: italic;斜体;

            line-height: 20px;行高

            vertical-align: middle;设置元素的垂直对齐方式,对块级元素无效

            text-decoration: none;这个主要用于去除a标签的下划线,当然也可以添加下划线

            text-indent: 100px;首行缩进

            word-spacing: 10px;单词间距

            letter-spacing:20px;字符间距

            text-shadow:2px 2px #ff000;文字阴影

            text-transform:uppercase;  文本转换属性,把所有字母变成大写

margin:10px,20px;        表示盒子上上边距是十px,左右是20px

四、伪类

list-style-position    设置列表项标记的岗位

能够独立设置多个趋势的边距,分别为top,right,bottom,left

View Code

 

三.absolute纯属定位

margin:十px,20px;        表示盒子上下面距是拾px,左右是20px

2.before after伪类

有多少个属性值:none,block,inline ,inline-block

一.字体的性质

相对牢固以成分和煦的原始地方为参照物,可是relative属于半退出符合规律文书档案流,因为她的本来地方还在,其余因素无法侵吞。那脾特性首要与absolute协作使用

float属性便是会让成分浮在符合规律文书档案流之上,能够向左飘只怕向右飘,假如全体的标签都扭转起来,那就既能够调宽高,又有啥不可在1排呈现了,和display:inline-block;的功能等同

威尼斯人娱乐 31

在html中head部分添加css样式

(1)vertical-align

b.链接式链接文件数量并未上限,可是导入式有上限

导入式和链接式引进有分别:

(1)颜色:设置颜色有二种办法:

 十一、响应式布局

威尼斯人娱乐 32威尼斯人娱乐 33

叁.absolute相对定位

在style标签中引进外部的css文件

  css(Cascading Style
Sheets)层叠样式表,是1种为html文书档案增多样式的言语,主要有多个功用:渲染和布局。使用css首要关怀八个点:查找到标签,属性操作  

并发这几个主题材料的缘故是三个子成分浮动起来后,脱离了常规文书档案流,父标签未有内容,也一贯不被多少个有内容的子元素撑开,由此坍缩成了一条线,消除办法:

再有贰个艺术,在父级标签的样式中丰硕   overflow:hidden
 那种办法算是一叶障目吧,就算能缓慢解决难点,但不引入用

background: url("logo.png") no-repeat 0 0;

list-style-image 用图形当作列表项的申明

 

(一)颜色:设置颜色有三种办法:

威尼斯人娱乐 34威尼斯人娱乐 35

(贰)嵌入式引进:

让图片和文字在一行显示的时候,私下认可是依据基线对齐的,大家能够在图纸标签的样式中装置按中线对齐也许底线

大家来看一下父级塌陷难点

另壹种就是暗中同意承接的样式,那种最怂,权重值最低

利用中得以对父级标签设置成绝对固化,但不要偏移,那样子级成分即能够父级标签为原则移动位置了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .clearfix{
            content: '';
            display: block;
            clear: both;
        }
        .header{
            width: 100%;
            height: 44px;
            background: #2459a2;
        }
        .header_box{
            width: 1016px;
            height: 44px;
            /*border:1px red solid;*/
            margin:0 auto;
        }
        .logo{
            /*line-height: 44px;*/
            float: left;
            margin-top: 11px;
        }
        .option{
            float: left;
            line-height: 44px;
            background: #2459a2;
            /*margin: 0 20px;*/
            padding-left: 16px;
            padding-right:13px;;
        }
        .option:hover{
            background:#396bb3
        }
        .header_box .left .option a{
            text-decoration: none;
            color: white;
        }
        .header_box .right input{
            height: 30px;
            float: right;
            margin-top: 3px;

        }
        .header_box .right a{
            text-decoration: none;
            color: white;
            float: right;
            text-align: center;
            line-height: 44px;
            padding-left: 16px;
            padding-right:13px;;
        }
        .header_box .right form{
            float: right;
            margin-top: 7px;
            width: 160px;
            height: 30px;
            /*border:1px green solid;*/
            background: whitesmoke;
        }
        .header_box .right form input{
            /*background: ;*/
            width: 130px;
            height: 30px;
            float: left;
            margin: 0;
            /*padding: 0;*/
            border: 0px white;
        }
        .header_box .right form a{
            width: 30px;
            height: 30px;
            float: right;
            /*background: red;*/
            margin:0;
            padding:0;
        }

        .header_box .right form span{
            width: 13px;
            height: 13px;
            float: right;
            /*background: red;*/

            background: url("icon.png") no-repeat 0 -197px;
            margin-top: 8px;
            margin-right: 8px;
            padding: 0;
        }
        .body{
            width: 100%;
            height: 1160px;
            /*background: red;*/
            margin:0 auto;
            overflow: hidden;
            background: #ededed;
        }
        .body_box{
            /*margin: 25px;*/

            width: 1016px;
            height: 1160px;

            margin: 10px auto;
            background: #fff;
            margin-top: 0;

            /*background: green;*/

        }
        .body_box .left{
            float: left;
            width: 630px;
            height: 1010px;
        }
        .body .body_box .left .top{
            width: 630px;
            height: 43.2px;
            /*background: gold;*/
            border-bottom: 1px #dec7f4 solid;
            margin-left: 15px;
        }
        .body .body_box .left .top a{
            text-decoration: none;
            color: #369;
            font-size: 14px;
            text-align: center;
            line-height: 26px;


        }
        .body .body_box .left .top a.title_left{
            float: left;
            margin-left:15px;
            width: 60px;
            height: 26px;
            margin-top:8px ;
            font-size: 13px;
            font-weight: 700;
            /*margin-right: 5px;*/

        }
        .body .body_box .left .top a.title_right{
            float: right;
            margin:10px auto;
            margin-right: 15px;
            font-size: 13px;
            color: #390;

        }

        .body .body_box .left .top a.最热{
            background: #f0f4f8;
            border-radius:25px;
            color: #333;
        }
        .body .body_box .left .top a.即时排序{
            color: #b4b4b4;
        }
        .body .body_box .left .top a.发布{
            width: 100px;
            height: 26px;
            background: #84a42b;
            color: #fff;
            margin-right: 0;

        }
        .article li{
            margin-left: 15px;
            width: 630px;
            height:120px;
            border-bottom: 1px #dec7f4 solid;
            list-style: none;
            display: inline-block;
            margin-top: 5px;
            /*position: relative;*/

        }
        li>a img{
            float: right;
        }
        .article .artical_content{
            /*margin-right: 0;*/
            float: left;
            width:546.88px;
            height: 38.4px;

        }
        .qu{
            font-size: 12px!important;
            text-decoration: underline!important;
            color: grey!important;
         }
        .article .artical_content a{
            text-decoration: none;
            color: #369;
            font-weight: 600;
            font-size: 15px;
        }
        .article .artical_content a:hover{
            text-decoration:underline;
        }
        .article .artical_content span{
            font-size: 12px;
            color: grey;
        }

        .artical_bottom{
            display: inline-block;
            width: 630px;
            height: 26.8px;
            /*background: red;*/
            float: left;
            margin-top:21px;
            font-size: 13px;
            color: #777777;
        }
        .artical_bottom:hover .share{
            display: inline-block;
        }
        .label{
            float: left;
            margin-top:6px;;
            margin-right: 10px;
            width:36px;
            height:16px;
            /*background: grey;*/
        }
        label:hover{

        }
        .like_img{
            /*line-height: 26.8px;*/
            /*margin-right: 15px;*/
            float: left;
            width: 17px;
            height: 18px;
            background: url("like.png") no-repeat 0 -41px;
            /*margin:18px auto;*/
        }
        .like_img:hover{
            background: url("like.png") no-repeat 0 -21px;
        }
        .count{
            float: left;
            margin-left: 4px;
            font-size: 16px;
            margin-top: -1px;
            color: #99accb;
        }
        .count:hover{
            text-decoration: underline;
            color: #369;

        }
        .comment .like_img{
             background: url("like.png") no-repeat 0 -100px;
        }
        .comment .like_img:hover{
            background: url("like.png") no-repeat 0 -80px;
        }
        .favorite{
            width: 56px;
        }
        .favorite .like_img{
             background: url("like.png") no-repeat 0 -160px;

        }
        .favorite .like_img:hover{
            background: url("like.png") no-repeat 0 -140px;
        }
        .favorite .text{
            color: #99accb;
            font-weight: 400;
        }
        .favorite .text:hover{
            color: #369;
            text-decoration: underline;
        }
        .issue_time{
            margin-top: 4px;
            width: 100px;
        }
        .origin{
            float: left;
            margin-top:6px;;
            margin-right: 5px;
            width:66px;
            height:16px;
        }

        .origin img{

            float: left;
        }
        a .text{
            float: left;
            margin-top:2px;
            font-size: 12px;
        }
        .origin b{
            margin-top:1px;;
            color: #99accb;
            font-weight: 400;
        }
        .origin b:hover{
            color: #369;
            text-decoration: underline;
        }
        .issue_time .time{
            color: #e59373;
            font-weight: 400;
        }
        .issue_time .time:hover{
            text-decoration: underline;
        }
        .issue_time .issue{
            color: #ccc;
            font-weight: 400px;
        }
        .share{
            font-size: 12px;
            float: left;
            width: 180px;
            height: 17px;
            margin-left: 20px;
            display: none;
            /*background: honeydew;*/
        }
        .share_text{
            float: left;
        }
        .share_img{
            width: 17px;
            height:15px;
            float: left;
            /*background: red;*/
            background: url("share_icon.png") no-repeat 0 1px;
            margin-left: 7px;
        }
        .sina:hover{
            background: url("share_icon.png") no-repeat 0 -89px;
        }
        .douban{
         background: url("share_icon.png") no-repeat 0 -14px;
        }
        .douban:hover{
            background: url("share_icon.png") no-repeat 0 -103px;
        }
        .qq{
         background: url("share_icon.png") no-repeat 0 -30px;
        }
        .qq:hover{
            background: url("share_icon.png") no-repeat 0 -119px;
        }

        .renren{
         background: url("share_icon.png") no-repeat 0 -60px;
        }
        .renren:hover{
            background: url("share_icon.png") no-repeat 0 -150px;
        }
        .page .page_box{
            width:532px;
            height: 34px;
            /*background: beige;*/
            /*position: absolute;*/
            /*top:12px;*/
            float: left;
            margin:20px auto;
            margin-left: 15px;
        }
        .page li {
            list-style: none;
            float: left;
        }
        .page li a{
        }
        .page li .page_count{
            text-decoration: none;
            float: left;
            margin-right:6px;
            height: 34px;
            width: 34px;
            text-align: center;
            border: 1px #e1e1e1 solid;
            border-radius: 8px;
            line-height: 34px;
            color: #369;
        }
        .page li .nextpage{
            width: 77px;
        }
        .page li .pagefirst{
            border: none;
            color: #333;
            font-weight: 700;
        }
        .body_box>.right{
            width:320px;
            height: 1000px;
            /*background: #2459a2;*/
            float: right;
        }
        .body_box .right li{
            list-style: none;
            margin-top: 5px;
        }
        .body_box>.bottom{
            width: 980px;
            height: 150px;
            /*background: green;*/
            float: left;
            margin-left: 20px;
            margin-top: 35px;
            border-top:1px solid #ccdcef;;
        }
        .body_box>.bottom .outer_link{
            width: 800px;
            height: 20px;
            margin:10px auto;
        }

        .body_box>.bottom li{
            list-style: none;
            float: left;
            font-size: 12px;
            color: #369;
            margin-left: 10px;
            margin-right: 10px;
            line-height: 20px;

        }
        .body_box>.bottom li a{
            text-decoration: none;
        }
        .body_box>.bottom li a img{
            margin-top:1px;;
        }
        /*.body_box>.bottom .outer_link{*/
            /*margin-top: 64px;*/
        /*}*/
        .body_box>.bottom .outer_link span{
            float: left;
        }
        .body_box>.bottom .lower_item div{
            /*float: left;*/
            width: 800px;
            height: 20px;
            margin:5px auto;
            text-align: center;
            font-size: 12px;


        }
        .body_box>.bottom .lower_item a{
            text-decoration: none;
            color: #333;
        }
        .gozap_logo{
            vertical-align: -2px;
        }
        .turn2top a{
            position: fixed;
            bottom: 60px;
            right: 200px;
            text-decoration: none;
            font-size: 19px;
            font-weight: 800;
            width: 38px;
            height: 38px;
            background: url("Back-to-the-top_38_78.png") no-repeat 0 0;
        }
        .turn2top a:hover{
            background: url("Back-to-the-top_38_78.png") no-repeat 0 -40px;

        }

    </style>
</head>
<body>
    <div id="start"></div>
    <div class="header clearfix">
        <div class="header_box clearfix">
            <div class="left">
                <div class="logo"><img src="抽屉logo.png" alt="威尼斯人娱乐 36"></div>
                <div class="option"><a href="#">全部</a></div>
                <div class="option"><a href="#">42区</a></div>
                <div class="option"><a href="#"> 段子</a></div>
                <div class="option"><a href="#">图片</a></div>
                <div class="option"><a href="#">挨踢1024</a></div>
                <div class="option"><a href="#"> 你问我答</a></div>
            </div>
            <div class="right">
                <form action="" >
                    <a href="#"></a>
                    <input type="text" >


                </form>

                        <!---->
                <a href="#">登录</a>
                <a href="#">注册</a>
            </div>
        </div>

    </div>
    <div class="body clearfix">
        <div class="body_box clearfix">
            <div class="left">
                <div class="top clearfix">
                    <a href="#" class="title_left 最热">最热</a>
                    <a href="#" class="title_left 发现">发现</a>
                    <a href="#" class="title_left 人类发布">人类发布</a>

                    <a href="#" class="title_right 发布">+ 发布</a>
                    <a href="#" class="title_right 3天">3天</a>
                    <a href="#" class="title_right 24小时">24小时</a>
                    <a href="#" class="title_right 即时排序">即时排序</a>
                </div>
                 <div class="article">
                     <ul>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="威尼斯人娱乐 37"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="威尼斯人娱乐 38">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="威尼斯人娱乐 39"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="威尼斯人娱乐 40">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="威尼斯人娱乐 41"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="威尼斯人娱乐 42">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="威尼斯人娱乐 43"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="威尼斯人娱乐 44">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="威尼斯人娱乐 45"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="威尼斯人娱乐 46">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                        <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="威尼斯人娱乐 47"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="威尼斯人娱乐 48">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                         <li>
                            <div class="artical_content">
                                <a href="#" class="artical_title">
                                [杂技孤儿]32个孩子,从6岁到7岁,想离开就离开,走到记忆之外,没有什么需要膜拜。想回来就回来,旅行后才明白,我把从前留在境外。我不看将来,也不问未来。境外莫文蔚不散不见都投奔到河南濮阳县南环的张挥公园里。。。
                                </a>
                                -international.caixin.com
                                <a href="#" class="qu">42区</a>
                            </div>
                            <a href="#"><img src="1.jpg" alt="威尼斯人娱乐 49"></a>

                            <a href="#" class="artical_bottom">


                                    <b class="count">3</b>



                                    <b class="count">1</b>



                                    <b class="text">私藏</b>


                                    <img src="origin.jpg" alt="威尼斯人娱乐 50">
                                    <b class="text">财新网</b>


                                    <b class="text time">2小时6分钟前</b>
                                    <b class="text issue" >发布</b>


                                    <b class="share_text">分享到</b>





                            </a>
                        </li>
                     </ul>
                 </div>
                <div class="page clearfix">
                      <div class="page_box ">
                            <ul>
                                <li>1</li>
                                <li><a href="#" class="page_count">2</a></li>
                                <li><a href="#" class="page_count">3</a></li>
                                <li><a href="#" class="page_count">4</a></li>
                                <li><a href="#" class="page_count">5</a></li>
                                <li><a href="#" class="page_count">6</a></li>
                                <li><a href="#" class="page_count">7</a></li>
                                <li><a href="#" class="page_count">8</a></li>
                                <li><a href="#" class="page_count">9</a></li>
                                <li><a href="#" class="page_count">10</a></li>
                                <li><a href="#" class="page_count nextpage">下一页</a></li>
                            </ul>
                    </div>
                </div>

            </div>
            <div class="right">
                <ul>
                    <li><img src="report_right.jpg" alt="威尼斯人娱乐 51" class="right_img"></li>
                    <li><img src="homepage_right.png" alt="威尼斯人娱乐 52" class="right_img"></li>
                    <li><img src="chen_right.jpg" alt="威尼斯人娱乐 53" class="right_img"></li>
                    <li><img src="erwema_right.jpg" alt="威尼斯人娱乐 54" class="right_img"></li>
                </ul>
            </div>
            <div class="bottom">
                <div class="outer_link">
                    <ul>
                    <li><a href="#" class="bottom_text">关于我们</a></li>
                    |
                    <li><a href="#" class="bottom_text">联系我们</a></li>
                    |
                    <li><a href="#" class="bottom_text">服务条款</a></li>
                    |
                    <li><a href="#" class="bottom_text">隐私政策</a></li>
                    |
                    <li><a href="#" class="bottom_text">抽屉新热榜工具</a></li>
                    |
                    <li><a href="#" class="bottom_text">下载客户端</a></li>
                    |
                    <li><a href="#" class="bottom_text">意见与反馈</a></li>
                    |
                    <li><a href="#" class="bottom_text">友情链接</a></li>
                    |
                    <li><a href="#" class="bottom_text">公告</a></li>
                    <li><a href="#" class="bottom_text"><img src="rss.png" alt="威尼斯人娱乐 55"></a></li>
                </ul>

                </div>
                <div class="lower_item">
                    <div class="row1">
                        <a href="#"><img src="gozap-logo.png" alt="威尼斯人娱乐 56"class="gozap_logo"></a>
                        旗下站点 &copy2017 chouti.com
                        <a href="#">京ICP备052302号-3 京公网安备 397272979</a>
                    </div>
                    <div class="row2">
                        违法和不良信息举报: 电话: 13021552997 &nbsp邮箱:zhangcan121@163.com
                    </div>
                    <div class="row3">
                        版权所有:北京格物致知科技有限公司
                    </div>

                </div>

            </div>
        </div>
    </div>
    <div class="turn2top">
        <a href="#start"></a>
    </div>
</body>
</html>

图片都是本地图片

有多个属性:border-width:壹px边框宽度

  分化的选取器,有不相同的权重值,

1.static  默认值

    <style>
        p:after{
            content: 'world';
            color: #2b99ff;
        }
    </style>
</head>
<body>
    <p>hello</p>
</body>

那三个标签是针对于a标签用的,但不限于a标签,当中hover是最常用的

对于标签的原始属性,如id和class,能够由此#或.的措施找到。

能够看到,c三的阿爸c贰也随后向下移动了,那正是父级塌陷现象

单身写3个css文件,在html的头文件中引进。那种方法最常用

      border-style:solid边框样式,能够是拳拳也得以是虚线、点实线。。。

三.inline 把块级标签产生内联标签

 

威尼斯人娱乐 57

威尼斯人娱乐 58

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        *{
            margin:0;
        }
        .c1{
            width: 300px;
            height: 100px;
            background: gold;
        }
        .c2{
            background: purple;
        }
        .c3 {
            width: 100px;
            height: 100px;
            background: green;
        }
        .c4{
            width: 100px;
            height: 100px;
            background: #2b99ff;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2">
        <div class="c3"></div>
        <div class="c4"></div>
    </div>
</body>
</html>

威尼斯人娱乐 59

 

 element(标签):    1

margin:十px;         表示盒子上下左右四个边距都以拾px

威尼斯人娱乐 60

网页上的每一种元素,都得以领略为1个盒子,盒子有自己的上空,有大幅度(width)和可观(height),盒子里面存放东西(content),存放的东西与盒子间的相距正是内边距(padding),盒子有友好的边框(border),盒子与盒子之间的离开叫做外边距(margin)

  • c一,c二    多成分选拔器,同时同盟全部的c一成分和c贰成分
  • c一 c2    后代选拔器,相配全体属于c壹后代的c2成分
  • c一 > c2 子代选拔器,用后代选取器有个难题,全部属于c1的后生都会被选用,包含孙子代,用子代选择器就不会有这几个主题素材,子代选拔器只会挑选自身的幼子那壹层级
  • c一+c2    毗邻成分采纳器,相配全体紧挨着c一因素之后的同级成分
  • c1~c二  
     普通兄弟成分,这一个和毗邻成分选拔器的分裂就是,未有了紧挨着的限量

View Code

看一下以此事例,c壹和c2是手足关系,c叁,c四是c贰的子级,未来在浏览器中是那样的:

View Code

采取的时候一般都简写成 border:1px solid red    那多少个属性值没有各种

          id:                    100

四.还有一种方法:overflow:hidden;在父级标签的样式中加上那一个就行了,不过那几个有包容性难点,不引入用

此后假设遇上样式改不了的情形,就要思虑是或不是在事先有比它预先级更加高的标签

七、display属性

当块级标签在定点的时候,假若她的上贰个标签是例行文书档案流,就贴到他的垂直下方

每2个因素自己都会有四条线,顶线,中线,基线,底线

  css(Cascading Style
Sheets)层叠样式表,是1种为html文书档案增多样式的言语,首要有四个职能:渲染和布局。使用css首要关切七个点:查找到标签,属性操作  

3.

  行内式:             1000

  差异的选拔器,有例外的权重值,

二.免除浮动

(4)导入式:

5、选取器的先期级

  • left  左对齐
  • center  居中
  • right  右对齐
  • justify  两端对齐

1.

    <style>
        p:after{
            content: 'world';
            color: #2b99ff;
        }
    </style>
</head>
<body>
    <p>hello</p>
</body>

看一下以此例子,c1和c二是兄弟关系,c三,c四是c二的子级,今后在浏览器中是那般的:

list-style-type   设置列表项标记的项目,disc是衷心圆点,square是长方形实心块。。

     .c二 .c三的权重是十+10=20,

再有二种,1种是在体制后边加!import的,那种是不看规则的,他的权重最高,惹不起

3.

第二想到的相应是给父级标签加二个一定高度,那样无论有未有内容,地方反正都曾经占好了。可是那些惊人应该加多少吧,至少要能包蕴住子成分,又不能够凌驾多数,那是个难题,而且这些主意很笨重,一点都不优雅

  a:active    在要素上按下鼠标时的样式

能够见到,难题已经到家的化解了,再优化一下,实际运用中大家的代码料定会十分短,不容许对各样有需求的父级标签都丰硕1个新的子标签,大家能够用几个类,对这一个类增加样式,哪个标签要求,就在类中丰盛这几个类名,就足以了

威尼斯人娱乐 61

威尼斯人娱乐 62

比方说浏览网页时,右下角有个重回顶部的按钮,就是用的那性情子

 

能够用边框的性质画3个三角:

而内联标签是并排呈现,除非壹行放不下了才会换行,内联标签设置宽高无效

地点四种引进css样式的办法中,除了缺点最强烈的行内式,其余二种艺术都急需先找到标签,技术对标签样式进行操作

一.字体的质量

  a:link   暗许状态

     .c二 .c三的权重是10+拾=20,

a.加载格局各异:导入式会开头入html,再用css渲染,假使此刻网络卡了,在浏览器上突显的正是从未样式的剧情,然后再一丝丝渲染,而链接式是1块加载的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .out{
            width: 300px;
            height: 300px;
            background: greenyellow;
        }
        .out:hover{
            background: red;
        }
        .out:visited{
            background: white;
        }
        .out:active{
            background: black;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        *{
            margin:0;
        }
        .c2{
            border: 1px solid red;
        }
        .c1{
            width: 300px;
            height: 200px;
            background: gold;
        }
        .c3 {
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        .c4{
            width: 100px;
            height: 100px;
            background: #2b99ff;
            float: left;
        }
    </style>
</head>
<body>

    <div class="c2">
        <div class="c3"></div>
        <div class="c4"></div>
    </div>
    <div class="c1"></div>
</body>
</html>

  a:visited   点击过的要素的样式

缓和那个主题材料的主意正是:给父级标签加上内容,有多少个法子:有边界border能够,有内边距padding能够,有内容content也能够。

让图片和文字在一行突显的时候,暗许是根据基线对齐的,我们能够在图片标签的样式中装置按中线对齐只怕底线

笔者们在html那篇博客里提到过id,id唯壹标记1个标签,可是只要大家想对壹多种标签增加同样的体制,肯定不可能都用id,能够用class,从字面上理解就是一类具备类似功效的价签,在选取这几个标签时用“点类名”的方法,而且class
也未尝不可能重名的限制

right: 左边不容许有变动成分

 <style>
        #cl1{
            color: #000;
        }
        .c1{
            font-size: 12px;
        }
        div[zhang]{
            background: red;
        }
    </style>
</head>
<body>
    <div class="c1" id="cl1" zhang="123">123</div>
</body>
 <style type="text/css">
        @import "index.css";
    </style>

(三)链接式引进:

当块级标签在一向的时候,假如她的上贰个标签是平日文书档案流,就贴到他的垂直下方

  • 通配选拔器  *{color:red}
  • 标签选用器 div{background:green}
  • id选择器  #user{font-size:12px}
  • class选择器  .user{border:1px solid red}
    <style>
        .c3{
            background: red;
        }
        .c2 .c3{
            background: green;
        }
        .c1 .c2 .c3{
            background: gold;
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2">
            <div class="c3">123</div>
        </div>
    </div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        *{
            margin:0;
        }
        .c2{
            border: 1px solid red;
        }
        .c1{
            width: 300px;
            height: 200px;
            background: gold;
            clear: both;
            margin-top: 10px;
        }
        .c3 {
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        .c4{
            width: 100px;
            height: 100px;
            background: #2b99ff;
            float: left;
        }
        .c5{
            content: "";
            clear: both;
        }
    </style>
</head>
<body>

    <div class="c2">
        <div class="c3"></div>
        <div class="c4"></div>
        <div class="c5"></div>
    </div>
    <div class="c1"></div>
</body>
</html>
background: url("logo.png") no-repeat 0 0;
  • url前面放的是图表的地点,能够是地方地址,也能够是互联网地址
  • no-repeat是设置图片的的填写格局,仍是能够设置成横向填充(repeat-x),纵向填充(repeat-y)
  • 末段多个值是图形地方,以像素为单位,0 0
    就表示在页面包车型大巴左上角,能够设置成center center 就在页面中央了

后天给c三加一个margin-top:30px;再来看效用:

1.static  默认值

另一种正是私下认可承接的样式,那种最怂,权重值最低

(1)vertical-align

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        *{
            margin:0;
        }
        .c2{
            border: 1px solid red;
        }
        .c1{
            width: 300px;
            height: 200px;
            background: gold;
            clear: both;
            margin-top: 10px;
        }
        .c3 {
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        .c4{
            width: 100px;
            height: 100px;
            background: #2b99ff;
            float: left;
        }
        .clearfix{
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>

    <div class="c2 clearfix">
        <div class="c3"></div>
        <div class="c4"></div>
    </div>
    <div class="c1"></div>
</body>
</html>

在这些例子中,
在父级标签c贰下边包车型大巴c1标签被c贰的子标签覆盖,同时父级标签坍缩成一条线

 <style>
        #cl1{
            color: #000;
        }
        .c1{
            font-size: 12px;
        }
        div[zhang]{
            background: red;
        }
    </style>
</head>
<body>
    <div class="c1" id="cl1" zhang="123">123</div>
</body>

三、css选择器

还能够在父级增加伪类,修改子级标签,那种景观选拔也很普及

能够看来,难题已经到家的化解了,再优化一下,实际应用中大家的代码明确会相当长,不可能对每一种有必要的父级标签都抬高2个新的子标签,我们得以用3个类,对那些类增添样式,哪个标签须求,就在类中加多那几个类名,就能够了

View Code

偶然只用基本选用器并不可能让我们规范找到标签,还索要利用一些结缘标签

威尼斯人娱乐 63威尼斯人娱乐 64

对于块级标签,把行高设置成和块级成分的万丈壹致,就会笔直居中了。

(3)链接式引进:

 响应式正是当我们的浏览器分辨率产生变化的时候,页面布局保持不改变,所以要求判别分辨率,依照不一样的分辨率设置差异的体裁

还足以单独设置五个样子的边框

六、css属性

单身写3个css文件,在html的头文件中引进。那种艺术最常用

(2)嵌入式引进:

4.fixed 完全剥离

(二)对齐情势:暗中认可是左对齐

View Code

咱俩掌握能够在标签的体制中加背景象,其实背景不仅能够是纯色,还足以是图片

实际上,大家也应当把每一种块级成分都看成2个盒子,不点名宽高的话,暗中同意宽度是浏览器宽度,暗中认可中度是内容高度

View Code

both:  两边都不允许有浮动成分

            font-size: 12px;文本字体大小

            font-weight: 500;字体粗细,100-900

            font-family: Arial;字体库

            font-style: italic;斜体;

            line-height: 20px;行高

            vertical-align: middle;设置元素的垂直对齐方式,对块级元素无效

            text-decoration: none;这个主要用于去除a标签的下划线,当然也可以添加下划线

            text-indent: 100px;首行缩进

            word-spacing: 10px;单词间距

            letter-spacing:20px;字符间距

            text-shadow:2px 2px #ff000;文字阴影

            text-transform:uppercase;  文本转换属性,把所有字母变成大写

clear只会对本人起功效,不会影响其余因素。

 101、响应式布局

威尼斯人娱乐 65威尼斯人娱乐 66

  • left  左对齐
  • center  居中
  • right  右对齐
  • justify  两端对齐

威尼斯人娱乐 67

(1)行内式引进:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        *{
            margin:0;
        }
        .c2{
            border: 1px solid red;
        }
        .c1{
            width: 300px;
            height: 200px;
            background: gold;
            clear: both;
            margin-top: 10px;
        }
        .c3 {
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        .c4{
            width: 100px;
            height: 100px;
            background: #2b99ff;
            float: left;
        }
        .c5{
            content: "";
            clear: both;
        }
    </style>
</head>
<body>

    <div class="c2">
        <div class="c3"></div>
        <div class="c4"></div>
        <div class="c5"></div>
    </div>
    <div class="c1"></div>
</body>
</html>

both:  两边都不一致意有浮动成分

三、css选择器

1.none

唯独难点只怕未有彻底消除,首先c二照旧坍缩成了一条线,其余还有个难题,c一标签加多margin属性的时候会意识,margin失效了

    <style>
        div{
            width: 0;
            height: 0;
            border:50px solid green;
            border-bottom-color: red;
            border-top:none;;
        }
    </style>

a.加载格局各异:导入式会发轫入html,再用css渲染,借使此刻互联网卡了,在浏览器上出示的固然未有样式的内容,然后再一小点渲染,而链接式是一块加载的

 

8、盒子模型

那种差十倍的,我们就不可比了,就比较个差三个权重的,意思意思就行了

勤学苦练:抽屉网首页

View Code

比方多少个同级盒子的左左侧距设置分别为十px和20px,最后多个并列的盒子之间的相距是20px,会取五个值的最大值,而不是多少个值相加

威尼斯人娱乐 68

(三)别的属性

 

  行内式:             1000

 常常情状下,大家写的竹签在网页中是电动遵照从左到右,从上到下的相继依次排列的,个中内联标签是一碗水端平摆列,块级元素是垄断(monopoly)一行,这正是健康文书档案流

壹旦将成分浮动起来,从常常排版中拿开,那么其余因素在一向的时候就会忽略那一个因素,那一个因素就叫脱离符合规律文档流

那八个标签是本着于a标签用的,但不限于a标签,在那之中hover是最常用的

b.链接式链接文件数量未有上限,可是导入式有上限

而内联标签是并排显示,除非壹行放不下了才会换行,内联标签设置宽高无效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">

所以最终结果,背景颜色一定是海军蓝色,通过这么些例子就能清楚选拔器的事先级

境遇子类,权重值是相加的

四.还有壹种艺术:overflow:hidden;在父级标签的体裁中增添这一个就行了,可是那个有包容性难点,不推荐用

 

 

margin还有3个常用的地点,正是调动子成分 在父标签左右居中

2.组合选拔器

 

  大家浏览网页的时候,有时会遇到鼠标放在三个要素上时,元素会发生变化的景色,那正是通过anchor伪类落成的,不止有鼠标悬浮的体裁,还是能安装点击时,以及点击后的体制

 2.背景

 

          id:                    100

  假设大家十分大心用区别的采纳器,选定了同叁个标签,那那几个标签的体制,应该在于哪个采纳器呢,那就用到了选取器的先行级。

(2)对齐格局:暗中认可是左对齐

设置position属性后,通过内外左右(top,buttom,left,right)多少个职位设定的相距举办偏移

 十、position属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        *{
            margin:0;
        }
        .c2{
            border: 1px solid red;
        }
        .c1{
            width: 300px;
            height: 200px;
            background: gold;
            clear: both;
            margin-top: 10px;
        }
        .c3 {
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        .c4{
            width: 100px;
            height: 100px;
            background: #2b99ff;
            float: left;
        }
        .clearfix{
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>

    <div class="c2 clearfix">
        <div class="c3"></div>
        <div class="c4"></div>
    </div>
    <div class="c1"></div>
</body>
</html>

在父级标签中再加一个有内容的块级标签,对这几个标签清除浮动,有内容不过不能够对总体布局导致影响,所以内容设置为空

 

威尼斯人娱乐 69威尼斯人娱乐 70

相遇子类,权重值是相加的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        @media screen and (max-width: 1200px) {
            div{
            width: 100%;
            height: 100px;
            background: red;
            }
        }


        @media screen and (max-width: 900px){
            div{
            width: 100%;
            height: 100px;
            background: green;
            }
        }

        @media screen and (max-width: 600px) {
            div{
            width: 100%;
            height: 100px;
            background: black;
            }
        }
    </style>
</head>
<body>
    <div>

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

能够观察,c三的阿爹c二也跟着向下活动了,那就是父级塌陷现象

那种差10倍的,我们就不及较了,就相比较个差1个权重的,意思意思就行了

 十、position属性

威尼斯人娱乐 71威尼斯人娱乐 72

4.fixed 完全退出

威尼斯人娱乐 73威尼斯人娱乐 74

View Code

网页上的每种元素,都可以掌握为贰个盒子,盒子有友好的空间,有大幅(width)和中度(height),盒子里面存放东西(content),存放的东西与盒子间的离开正是内边距(padding),盒子有本人的边框(border),盒子与盒子之间的相距叫做外边距(margin)

如果三个同级盒子的内外边距设置分别为十px和20px,最后四个并列的盒子之间的离开是20px,会取多个值的最大值,而不是七个值相加

咱俩在html那篇博客里提到过id,id唯1标记2个标签,可是借使我们想对一层层标签增多同样的体制,料定无法都用id,能够用class,从字面上掌握就是一类具备类似功用的竹签,在甄选这几个标签时用“点类名”的办法,而且class
也尚未不能够重名的界定

威尼斯人娱乐 75

 3.边框

list-type:none

对此块级标签,把行高设置成和块级成分的莫斯中国科学技术大学学学一年级致,就会笔直居中了。

还有多个方法,在父级标签的样式中丰硕   overflow:hidden
 那种措施算是只见树木吧,就算能消除难题,但不引入用

    class:                     10

list-style-type   设置列表项标记的门类,disc是衷心圆点,square是长方形实心块。。

(一)行内式引进:

margin还有一个常用的地点,便是调节子成分 在父标签左右居中

display:none
 隐藏标签,那个隐蔽的乐趣是不单那几个标签看不到了,而且以此标签在页面中侵吞的岗位也尚未了,其余故事情节会来据为己有那么些职务,举个例子京东天猫商铺那么些网址的首页中丰裕轮播图,其实是广大张图纸都在同3个位置,不过同样时刻只展示一张,其余的都隐藏

  • 十陆进制值,如#3e3e3e
  • RGB值,如RGB(255,255,0)
  • 颜色的英文名称,如red,green
  • rgba :在RAV4GB的时候,还足以钦定折射率,如 奥迪Q三GBa(25伍,120,120,0,5)

并发这么些标题标由来是多少个子成分浮动起来后,脱离了正常文书档案流,父标签未有内容,也不曾被四个有内容的子元素撑开,因而坍缩成了一条线,消除格局:

      border-style:solid边框样式,能够是衷心也得以是虚线、点实线。。。

2.before after伪类

设置maigin恐怕padding时,后边的值能够安装叁个,也足以安装多少个,顺序是上,右,下,左

在html中head部分加多css样式

以此伪类的成效是在采用的标签的先头或然后边加一个内容

2.block 把内联标签形成块级标签

<div style="color:red;font-size: 16px">hello</div>

     .c一 .c2 .c三 的权重值是10+10+十=30

(3)别的属性

安装position属性后,通过上下左右(top,buttom,left,right)多少个职位设定的相距实行偏移

九、float属性

故而最后结果,背景颜色一定是苔藓孔雀蓝,通过那几个例子就能掌握选拔器的预先级

left:  左侧不容许有变动的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .out{
            width: 300px;
            height: 300px;
            background: greenyellow;
        }
        .c1{
            width: 100px;
            height: 100px;
            background: gold;
        }
        .out:hover .c1{
            background: red;
        }
        .out:visited{
            background: white;
        }
        .out:active{
            background: black;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>

</body>
</html>

叁.属性接纳器

 

  • c1,c二    多成分采纳器,同时相配全体的c一成分和c贰成分
  • c一 c二    后代选择器,相配全体属于c一后代的c2成分
  • c1 > c二 子代接纳器,用后代选用器有个难点,全部属于c一的儿孙都会被挑选,包含外甥代,用子代选取器就不会有这些标题,子代选用器只会选用自个儿的幼子这1层级
  • c1+c二    毗邻成分选取器,相称全数紧挨着c1成分之后的同级成分
  • c1~c贰  
     普通兄弟成分,这些和毗邻成分选拔器的分别正是,未有了紧挨着的限量

none: 暗许值,允许两边有转移成分

当有三个同样的自定义属性时,还足以用属性值区分,如div[zhang=”123″]{}

View Code

倘使将成分浮动起来,从经常排版中拿开,那么别的因素在平昔的时候就会忽略这个成分,那个成分就叫脱离平常文书档案流

  • 通配采用器  *{color:red}
  • 标签选用器 div{background:green}
  • id选择器  #user{font-size:12px}
  • class选择器  .user{border:1px solid red}

本条事例,.c3的权重值是十,

margin:0 auto;  第二个值是上边距,可以依靠须求调动

然则,以上用的都不多,用的最多的是收回列表项标记

 

仍是能够在父级增加伪类,修改子级标签,那种景观使用也很分布

 

 3.边框

威尼斯人娱乐 76

有了那脾性格,我们在c一标签中拉长那一个个性,就能够消除现行反革命的主题素材

本条伪类的效劳是在选择的标签的前头可能前面加多个剧情

margin:0 auto;  第多少个值是上边距,能够依赖供给调动

六、css属性

      border-color:red 边框颜色

通用选拔器一般用在预管理,初识化的时候

安装为相对定位的因素会以近日的已稳定的上级元素定位,如若具备的上司成分都未有定点,则以body为准绳地点偏移。相对定位属于完全退出文书档案流,本人的本来地方会被别的因素攻下。

其后只要碰着样式改不了的景色,将要思考是还是不是在此前有比它预先级更加高的竹签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .out{
            width: 300px;
            height: 300px;
            background: greenyellow;
        }
        .out:hover{
            background: red;
        }
        .out:visited{
            background: white;
        }
        .out:active{
            background: black;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>

</body>
</html>

把背景设置成图片,应用最多的是网页上的小图标,超过八分之四这几个Logo并不是一张张小的图样,而是1整张大的图片,蕴含众多小图标,通过运动地方让他俩在期待的职分显示想要的片段。

 <style>
        div{
            color: red;
            font-size: 16px;
            background: grey;
        }
    </style>

margin:10px,20px,30px;    上边距10px,右边距20px,下边距30px

通用采纳器一般用在预管理,初识化的时候

以窗口为参照物,尽管出现滚动的境况,设置为fixed的因素也不会趁机滚动,须要小心,设置为fixed的要素无法在设置float,那是多少个例外的文书档案流

威尼斯人娱乐 77威尼斯人娱乐 78

    <style>
        div{
            width: 0;
            height: 0;
            border:50px solid green;
            border-bottom-color: red;
            border-top:none;;
        }
    </style>

肆.列表属性

 <style>
        div{
            color: red;
            font-size: 16px;
            background: grey;
        }
    </style>

  对齐形式的习性是text-align,属性值:

  固然大家相当大心用分裂的采纳器,选定了同三个标签,这这几个标签的体裁,应该在于哪个选取器呢,这就用到了选取器的事先级。

View Code

威尼斯人娱乐 79威尼斯人娱乐 80

威尼斯人娱乐 81

题材又来了,看这么些事例

一旦是浮动流,就并排贴到它的左边

      border-color:red 边框颜色

 

壹.着力采纳器

块级标签在页面中是独占①行的,能够设置宽度和高度

3.属性选取器

其实,大家也应有把每一种块级元素都当做三个盒子,不点名宽高的话,私下认可宽度是浏览器宽度,暗许中度是内容惊人

有了那本性情,大家在c①标签中丰硕这几个特性,就能够减轻现行反革命的主题材料

 element(标签):    1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        *{
            margin:0;
        }
        .c1{
            width: 300px;
            height: 100px;
            background: gold;
        }
        .c2{
            background: purple;
        }
        .c3 {
            width: 100px;
            height: 100px;
            background: green;
        }
        .c4{
            width: 100px;
            height: 100px;
            background: #2b99ff;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2">
        <div class="c3"></div>
        <div class="c4"></div>
    </div>
</body>
</html>

     .c一 .c二 .c三 的权重值是十+拾+十=30

 响应式正是当大家的浏览器分辨率发生变化的时候,页面布局保持不改变,所以要求决断分辨率,根据分裂的分辨率设置差别的体制

none: 暗中认可值,允许两边有变动成分

而是,以上用的都不多,用的最多的是收回列表项标记

还足以独立设置多少个样子的边框

能够用边框的品质画二个三角:

 

  • url前边放的是图片的地址,能够是地点地址,也足以是互联网地址
  • no-repeat是设置图片的的填写格局,还是能设置成横向填充(repeat-x),纵向填充(repeat-y)
  • 最后五个值是图片地方,以像素为单位,0 0
    就象征在页面包车型地铁左上角,能够安装成center center 就在页面中央了

2、css的引进格局

地点八种引进css样式的不二诀窍中,除了缺点最显眼的行内式,别的三种艺术都亟待先找到标签,技能对标签样式举办操作

还有三种,一种是在体制前面加!import的,那种是不看规则的,他的权重最高,惹不起

二.免去浮动

那里用到贰个新的性质:清除浮动 clear,有多个属性值

list-type:none

行使的时候一般都简写成 border:一px solid red    那多少个属性值没有各类

 

导入式和链接式引进有分别:

奇迹只用基本接纳器并不能够让大家正确找到标签,还索要动用一些结缘标签

    class:                     10

  a:active    在要素上按下鼠标时的体制

一、css简介

View Code

相持固化以成分协和的原有地点为参照物,可是relative属于半脱离寻常文书档案流,因为他的原始地点还在,别的因素不能够并吞。这几个天性重要与absolute协作使用

2.组合选择器

威尼斯人娱乐 82威尼斯人娱乐 83

器重说一下vertical-align和line-heigh,那多个天性在对齐的时候平时会用到

以窗口为参照物,即便出现滚动的情事,设置为fixed的元素也不会趁机滚动,需求专注,设置为fixed的要素无法在装置float,这是八个例外的文书档案流

威尼斯人娱乐 84威尼斯人娱乐 85

威尼斯人娱乐 86威尼斯人娱乐 87

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        *{
            margin:0;
        }
        .c2{
            border: 1px solid red;
        }
        .c1{
            width: 300px;
            height: 200px;
            background: gold;
        }
        .c3 {
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        .c4{
            width: 100px;
            height: 100px;
            background: #2b99ff;
            float: left;
        }
    </style>
</head>
<body>

    <div class="c2">
        <div class="c3"></div>
        <div class="c4"></div>
    </div>
    <div class="c1"></div>
</body>
</html>

在父级标签中再加三个有内容的块级标签,对这几个标签清除浮动,有内容可是不能够对总体布局导致影响,所以内容设置为空

诸如浏览网页时,右下角有个重回顶部的开关,正是用的那天性情

威尼斯人娱乐,七、display属性

<div style="color:red;font-size: 16px">hello</div>

  a:visited   点击过的成分的体制

View Code

1.主导采用器

三.inline 把块级标签产生内联标签

演练:抽屉网首页

大家掌握能够在标签的体制中加背景象,其实背景不仅能够是纯色,还是能够是图片

有多少个属性值:none,block,inline ,inline-block

View Code

 

margin:10px;         表示盒子上下左右几个边距都以十px

如此会在浏览器中展现helloworld,可是从网页的html源码中是找不到world的,这些伪类的机要意义便是把一部分会让读者看不懂的代码,写到伪类中,举个例子布局的时候必要1个空的div标签,假使写到源码中,读者读到这么些地方可能会促成误会。所以就写到伪类中。content的属性值,越多的时候是空的。

1.anchor伪类:

 

  • 十6进制值,如#3e3e3e
  • RGB值,如RGB(255,255,0)
  • 水彩的英文名称,如red,green
  • rgba :在RubiconGB的时候,还足以钦定反射率,如 昂科拉GBa(25五,120,120,0,伍)

有多少个本性:border-width:1px边框宽度

View Code

margin:10px,20px,30px;    上边距10px,右边距20px,下边距30px

化解这些主题材料的主意就是:给父级标签加上内容,有多少个主意:有境界border能够,有内边距padding能够,有内容content也能够。

    <style>
        .c3{
            background: red;
        }
        .c2 .c3{
            background: green;
        }
        .c1 .c2 .c3{
            background: gold;
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2">
            <div class="c3">123</div>
        </div>
    </div>
</body>

list-style-position    设置列表项标识的职责

View Code

 

威尼斯人娱乐 88