css高级
html:
<!doctype html>
/*css 定位,css 浮动,css 尺寸,css 导航栏,css 图片*/
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css高级.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="position1"></div>
<div class="position2"></div>
<p>this is china!</p>
<p>this is beijing!</p>
<p>this is Bianca!</p>
<p>this is a rich girl!</p>
<div class="container">
<div class="qd">ds</div>
<div class="wd">dd</div>
<div class="text">hello world</div>
<div class="ed"></div>
</div>
<p class="p1">hellllllllllloooooooooooooooo<br>ooooooooooooooooooooooooooooooooooooo</p>
<p class="p2">helllllllllllooooooooooooooooo<br>oooooooooooooooooooooooooooooooooooo</p>
<p class="p3">helllllllllllooooooooooooooooo<br>oooooooooooooooooooooooooooooooooooo</p>
<ul class="ul1">
<li><a href="http://www.baidu.com">link1</a></li>
<li><a href="http://www.baidu.com">link2</a></li>
<li><a href="http://www.baidu.com">link2</a></li>
<li><a href="http://www.baidu.com">link2</a></li>
</ul>
<ul class="ul2">
<li><a href="http://www.baidu.com">link1</a></li>
<li><a href="http://www.baidu.com">link2</a></li>
<li><a href="http://www.baidu.com">link2</a></li>
<li><a href="http://www.baidu.com">link2</a></li>
</ul>
</body>
</html>
css:
.position1{
width:100px;
height:100px;
background-color: cornflowerblue;
position:relative;/*相对的*/
/*position: absolute;/*绝对的*/
/*position: fixed;/*元素固定*/
left:60px;/*向左偏移*/
z-index: 2;
}
.position2{
width:100px;
height:100px;
background-color: aquamarine;
position:relative;
left:10px;
top:10px;
z-index: 1;/*在最下面*/
}
.qd{
width:100px;
height:100px;
background-color: lightskyblue;
float: left;/*浮动*/
}
.wd{
width:100px;
height:100px;
background-color:lightseagreen;
float:left;
}
.ed{
width:100px;
height:100px;
background-color:palevioletred;
float: right;
}
.container{
width:280px;
height:600px;
background-color: gray;
}
.text{
clear:both;/*取消div浮动属性*/
}
.p1{
line-height:normal;/*css尺寸*/
width:400px;
}
.p2{
line-height:50%;
width:400px;
}
.p3{
line-height: 200%;
width:400px;
}
ul{
text-align: center;
color:white;
list-style: none;/*去掉无序链表前的修饰*/
width:200px;
}
.ul1 a:link,a:visited{
text-decoration: none;
background-color: lightgray;
display:block;/*作为块来显示*/
}
.ul2 a:link,a:visited{
text-decoration: none;
background-color: lightgray;
}
.ul2 li{
display:inline;
}
a:active,a:hover{/*一定放在link和visited后面*/
background-color: cadetblue;
}