<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="web2.css" rel="stylesheet">
</head>
<body>
<div class="c"></div>
<div class="d"></div>
<div class="a"></div>
<div class="b"></div>
<div class="e">
<div class="f"></div>
<div class="s">
<div class="h" ></div>
<div class="clear"></div>
<div class="i" ></div>
<div class="g" ></div>
</div>
</div>
<div class="z"></div>
<div class="m">
<div class="n"></div>
</div>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<!--w3cschool网站-->
</body>
</html>
.c{
width: 200px;
height: 200px;
background-color: palevioletred;
position: relative;
/* 使用相对定位不脱离文档流，对其他元素无影响，
相对定位不能乱跑，只能相对原来的地方移动，只能用left、top
*/
left: 30px;
top: 40px;
}
.d{
width: 300px;
height: 200px;
background-color: cadetblue;
z-index: 30;
}
.a{
width: 100%;
height: 200px;
background-color: palevioletred;
margin-top: 50px;
position: fixed;/*窗口定位,会脱离文档流，相对浏览器窗口，无论怎么拉都不会看不见*/
left: 0;
top: 0;
}
.b{
width:100%;
height: 2000px;
background-color: cadetblue;
}
.e{
width: 400px;
height: 400px;
background-color: palevioletred;
position: relative;
left: 0;
top: 0;
}
.f{/*子绝父相，父元素定位，子元素在父元素中跑，
如果父元素没有定位就找父元素的父元素，如果实在没有，那就再body里面跑*/
width: 200px;
height: 200px;
background-color: cadetblue;
position: absolute;
}
.clear{
clear: both;/*清除浮动，消除上一个div造成的影响*/
}
.h{
width: 200px;
height: 200px;
background-color: lightpink;
float: right;
/* float: left;*/
/*浮动，向左向右，特点：浮动的元素会脱离文档流,只能在一行上跑，
第一种：当浮动的元素遇到其他的浮动元素就会停下来，第二种，遇到父元素就会停下来
*/
}
.i{
width: 300px;
height: 300px;
background-color: palegreen;
}
.g{
width: 400px;
height: 400px;
background-color: peru;
}
.s{
width: 100%;
/* 如果没写高度，高度则就认为子元素高度之和,如果子元素全部浮动，则看不到父元素的黑色框*!
如果写了高度，父元素不会随着子元素的变化而变化*/
background-color: black;
}
.z {
width: 200px;
height: 200px;
background-color: peru;
display: block;/*块级元素展示，能将行变成块*/
display: none;/*元素消失，不占位置*/
display: inline-block; /*元素首先按块级元素展示，其次不在占一整行，会保留宽高*/
cursor:wait;/*进度条*/
/*progress;进度条*/
/*crosshair;/*十字*/
/*pointer;/*鼠标展示小手*/
}
.m{
width: 200px;
height: 300px;
background-color: lightpink;
/*overflow: hidden;!*超出的部分隐藏起来*!*/
/* opacity: 0.5;!*元素透明，0-1取值*!*/
}
/*鼠标点上去元素的样式，整体是个选择器*/
.m:hover{
background: black;
width: 500px;
cursor: progress;
}
.n{
width: 300px;
height: 200px;
background-color: cadetblue;
}
ul{
list-style: none;/*去点*/
}
网友评论