2016.01.27--html5第六天之css-CSDN博客

本文链接：https://blog.csdn.net/weiyumeizi/article/details/50596438

css定位

index.html

  <title>定位</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="position1"></div>
    <div id="position2"></div>
    <div id="position3"></div>
    <!--引入代码流-->
    <script>
        for (var i=0;i<100;i++){
            document.write(i+"<br/>");
        }
    </script>
</body>

style.css

#position1{
    width: 100px;
    height: 100px;
    background-color: chartreuse;
    /*相对位置，就是可以改变位置*/
    /*position: relative;*/
    /*位置向右移，是left*/
    left:20px;
    top: 20px;
    /*right: 100px;*/
    /*div的位置不变*/
    position:absolute;
    /*z-index: 为覆盖的显示顺序，1,2,3，最先的为最上;*/
    z-index:3;
}

#position2{
    width: 100px;
    height: 100px;
    background-color: black;
    left:50px;
    top: 10px;
    position:absolute;
    z-index:2;
}

#position3{
    width: 100px;
    height: 100px;
    background-color:red;
    left:10px;
    top: 10px;
    position:absolute;
    z-index:1;
}

CSS定位-浮动

index.html

<body>
   <!--<div id="fd"></div>-->
    <!--<div id="sd"></div>-->
    <!--<div id="td"></div>-->
<div id="container">
    <div id="fd"></div>
    <div id="sd"></div>
    <div id="td"></div>
    <div id="text">Hello World!</div>
</div>
</body>

style.css

#fd{
    /*改变width 和height的大小可以根据float的属性改变在容器中的大小*/
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
#sd{
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
}
#td{
    width: 100px;
    height: 100px;
    background-color: green;
    /*向左浮动*/
    float: left;
}
#container{
    width: 300px;
    height: 500px;
    background-color: gray;
}
#text{
    /*去掉浮动*/
    clear: left;
}

添加浮动后的效果

css浮动的应用

index.html

 <title>瀑布流布局效果</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="div1">  /*在根目录下，新建img文件夹，存入9张图*/
        <ul>            <li><img src="img/1.png"></li>            <li><img src="img/2.png"></li>            <li><img src="img/3.png"></li>        </ul>        <ul>            <li><img src="img/4.png"></li>            <li><img src="img/5.png"></li>            <li><img src="img/6.png"></li>        </ul>        <ul>            <li><img src="img/7.png"></li>            <li><img src="img/8.png"></li>            <li><img src="img/9.png"></li>        </ul>    </div></body>

style.css

*{
    margin: 0px;
    padding: 0px;
}
li{
    list-style: none;
}
#div1{
    width: 350px;
    height: auto;
    /*第一个上下，第二个左右*/

选择器

index.html

<body>
  <!--<p>Hello World!</p>-->
<!--<div class="div">-->
    <!--Nice to meet U!!-->
<!--</div>-->
  <!--<h1>标题1</h1>-->
  <!--<h2>标题2</h2>-->
<p class="p1">this is my web pag.</p>
  <p class="p2">this is my web pag.</p>
  <!--<p class="p3">this is my web pag.</p>-->
  <!--拥有p1,p2的效果-->
  <p class="p1 p2">this is my web pag.</p>
</body>

style.css

/*!*!*p{*!*!*/
    /*!*!*color: blue;*!*!*/
/*!*!*}*!*!*/
/*!**{*!*/
    /*!*!*通配符给未使用特有的设置样式，则默认为此样式*!*!*/
    /*!*color: yellow;*!*/
    /*!*margin: 0px;*!*/
    /*!*padding: 0px;*!*/
/*!*}*!*/

/*!*h1,h2{*!*/
    /*!*color: green;*!*/
    /*!*font-size: 45px;*!*/
    /*!*margin: 10px;*!*/
/*!*}*!*/

/*.div{*/
     /*color: red;*/
 /*}*/
.p1{
    /*颜色*/
    color: blue;
}
.p2{
    /*字体*/
    font-size: 45px;
}
/*.p3{*/
    /*!*字体*!*/
    /*font-style: italic;*/
/*}*/

.p1.p2{
    font-style: italic;
}

index.html

  <title>选择器</title>
    <link href="style.css" type="text/css" rel="stylesheet">
    <style>
        [title]{
            color: aqua;
        }
        /*[href]{*/
            /*font-size: 30px;*/
        /*}*/
       [ href="http://www.jikexueyuan.com"]{
           font-size: 30px;
       }
       /*模糊识别带title 的*/
        [title~="title"]{
            font-size: 50px;
        }
    </style>
</head>
<body>
<!--id只有一个，class可以有多个-->
 <!--<div id="mydiv"> Hello World! </div>-->
<!--<div class="div1"></div>-->
<!--<div class="div1"></div>-->

<!--基本属性选择器的使用-->
    <p title="til">hello</p>
    <p title="title">Hello</p>
    <p title="t">Hello</p>
    <p title="title hello">Hello</p>
    <p title="">Hello</p>
    <a href="http://www.jikexueyuan.com">极客学院</a>
<!--p是爷爷，strong是父亲，i是儿子-->
    <!--<p>this is my<strong>web<i>hello</i>hello</strong>page.</p>-->
<p>This is my<strong>web<i>hello</i>helloo</strong> page.</p>

    <div>
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
        <ol>
            <!--不属于同一个父类不产生效果-->
            <li>item11</li>
            <li>item22</li>
            <li>item33</li>
        </ol>
    </div>
</body>

style.css

#mydiv{
    color: aqua;
}
/*p strong{*/
    /*!*对加粗字体的设置方式*!*/
    /*color: red;;*/
/*}*/
/*p>strong{*/
    /*color: green;*/
    /*font-size: 30px;*/
/*}*/
/*p>strong>i{*/
    /*!*这个效果和下一个效果相同*!*/
    /*color: red;*/
    /*font-size: 30px;*/
/*}*/
/*p>i{*/
    /*color: pink;*/
/*}*/
li+li{
    font-size: 50px;
    color: aqua;
}