2016.01.27--html5第六天之css

来源：互联网发布：数控机床螺纹编程实例编辑：程序博客网时间：2024/05/15 07:30

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;}

0 0