css


1.实现下图(postion定位方法)

 

css

 

<!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.实现下图(浮动的方法)

css

 

 

<!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

(0)
上一篇 2022年6月21日
下一篇 2022年6月21日

相关推荐

发表回复

登录后才能评论