CSS定位、浮动、选择器

最新推荐文章于 2024-07-18 14:29:38 发布

每一段路程都是一种领悟

最新推荐文章于 2024-07-18 14:29:38 发布

阅读量324

点赞数

文章标签： css 定位浮动选择器

本文链接：https://blog.csdn.net/qq_34290202/article/details/78353164

版权

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

收藏

觉得还不错? 一键收藏
0
评论
CSS定位、浮动、选择器

index01html>html>head lang="en"> meta charset="UTF-8"> title>定位title> link href="style.css" type="text/css" rel="stylesheet"> style> [title]{ color: forestgre
复制链接

扫一扫