CSS定位、浮动、选择器

来源：互联网发布：环保知乎编辑：程序博客网时间：2024/06/06 00:32

index01

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>定位</title>    <link href="style.css" type="text/css" rel="stylesheet">    <style>        [title]{            color: forestgreen;        }        a[href="http://www.baidu.com"]{            color: crimson;            font-size: 30px;        }        [style1 ~=sty]{  /* 在确定通过部分属性值来确定时，此处要加一个~，否则无法被加载*/            color: chartreuse;            font-size: 25px;        }    </style></head><body>    <div id="position1"></div>    <div id="position2"></div>    <div id="position3"></div>    <script>        for(var i =0;i<30;i++){            document.write(i+"<br/>");        }    </script>    <h3>CSS浮动</h3>    <div id="container">    <div id="fd"></div>    <div id="sd"></div>    <div id="td"></div>        <div id="text">Hello HTML!Hello World!</div>    </div>    <br/><h3>CSS浮动应用</h3>    <div id="div1">        <ul>            <li ><img src="image/1.jpg" width="400px" height="400px"></li>            <li ><img src="image/2.jpg" width="400px" height="400px"></li>            <li ><img src="image/3.jpg" width="400px" height="400px"></li>        </ul>        <ul>            <li ><img src="image/4.jpg" width="400px" height="400px"></li>            <li ><img src="image/5.jpg" width="400px" height="400px"></li>            <li ><img src="image/6.jpg" width="400px" height="400px"></li>        </ul>        <ul>            <li><img src="image/7.jpg" width="400px" height="400px"></li>            <li><img src="image/8.jpg" width="400px" height="400px" ></li>            <li><img src="image/9.jpg" width="400px" height="400px"> </li>        </ul>    </div>    <br/>    <br/><h3>选择器</h3><div>    <div id="did">id只可以使用一次，id选择器不能结合使用，当使用js的时候，需要用到id</div>    <div class="did">class可以多次使用</div>    <div class="did">class可以多次使用</div>    <div class="did">class可以多次使用</div></div><p title="tt">最简单的属性选择器</p><a href="http://www.baidu.com">根据具体的属性值来选择效果</a><a href="http://www.bafgfdgsdgfd.com">不匹配的属性值效果不会被加载</a><p style1="sty">属性与属性值必须匹配，否则无法显示</p>    <p style1="ssty">属性与属性值必须匹配，否则无法显示</p><p style1="sty hello">根据部分属性值来确定,包含属性值的可以被加载</p>    <p style1="st hello">不包含属性值的不能被加载</p><p>后代选择器<strong>可以指定谁被加载</strong>的效果</p><h4>子元素选择器用法为<strong>元素1 > 元素2</strong></h4><a href="http://m.blog.csdn.net/u012110719/article/details/41171517">子元素选择器与后代元素选择器区别，详情见网页</a><br/>    <ul>相邻兄弟选择器：必须要有相同的父级元素    <li>泰国</li>    <li>新加坡</li>    <li>印度尼西亚</li></ul></body></html>

style.css

#position1{    height: 100px;    width: 100px;    background-color: lightblue;    position: absolute;    top: 40px;    left: 30px;    z-index: 3;}#position2{    height: 100px;    width: 100px;    background-color: blueviolet;    position: absolute;    top: 50px;    left: 40px;    z-index: 1;}#position3{    height: 100px;    width: 100px;    background-color: palegreen;    position: absolute;    top: 60px;    left: 50px;    z-index: 2;}/*CSS浮动*/#fd{    width: 100px;    height: 150px;    background-color: chartreuse;    float: left;}#sd{    width: 150px;    height: 100px;    background-color: aqua;    float: left;}#td{    width: 100px;    height: 100px;    background-color: blueviolet;    float: left;}#container{    width: 300px;    height: 400px;    background-color: darkgray;}#text{    clear: left;  /* 文字清除浮动效果*/}/*CSS定位-浮动的应用*/*{    margin: 0px;    padding: 0px;}li{    list-style: none;}#div1{    width: 1500px;    height: auto;    margin: 20px auto;}ul{    width: 500px;    float: left;}/*选择器*/#did{    color: blue;    font-size: 20px;}.did{    color: crimson;    font-size: 20px;}/*后代选择器*/p strong{    color: lightgreen;    font-size: 30px;}/* 子元素选择器*/h4 > strong{    color: springgreen;    font-size: 30px;}/*相邻兄弟选择器*/li+li{    color: aquamarine;    font-size: 25px;}
部分截图

阅读全文

0 0