css

2022-06-21 11:02:28 阅读：138 来源： 互联网

标签：style color height width black border css

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>

</body>

3.id选择器

#bb{

color:red;

}

<body>

</body>

4.通配符选择器(全部标记都可以使用)

color；red;

5.标记指定选择器

h3.ss{

color:red;

}

<body>

</body>

标签：style,color,height,width,black,border,css
来源： https://www.cnblogs.com/zhangminhao/p/16396069.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css