1.实现下图（postion定位方法）
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>二</title>
<style type=”text/css”>
*{
margin: 0;
}
.pss_left{
position: absolute;
width:100px ;
height:400px ;
border-color: black;
border-style: solid;
}
.box_top{
position: absolute;
height:200px;
width:300px ;
left: 100px;
border-color: black;
border-style: solid;
}
.ps_bottom{
position: absolute;
height: 200px ;
width: 300px;
left: 100px;
top: 200px;
border-color: black;
border-style: solid;
}
</style>
</head>
<body>
<div class=”pss_left”></div>
<div class=”box_top”></div>
<div class=”ps_bottom”></div>
</body>
</html>
2.实现下图（浮动的方法）
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>练习</title>
<style>
.p{
width:400px;
height: 50px;
border-color:black;
border-style:solid;
}.ps{
width:400px;
height:300px;
border-color:black ;
border-style:solid;
}
.pss{
width: 400px;
height: 50px;
border-color: black;
border-style:solid;
}
.psss{
float:left;
width: 50px;
height: 300px;
border-color:black ;
border-style:solid;
}
</style>
</head>
<body>
<div class=”p”></div>
<div class=”psss”></div>
<div class=”ps”></div>
<div class=”pss”></div>
</body>
</html>
二.选择器
1.标记选择器
p{
color:red;
}
2.类选择器
.P{
color:red;
}
<body>
<h3 class=”p”></h3>
</body>
3.id选择器
#bb{
color:red;
}
<body>
<h3 id=”bb”></h3>
</body>
4.通配符选择器(全部标记都可以使用)
*{
color；red;
5.标记指定选择器
h3.ss{
color:red;
}
<body>
<h3 class=”ss”></h3>
</body>
原创文章，作者：dweifng，如若转载，请注明出处：https://blog.ytso.com/269392.html