css中div等块元素左右浮动代码测试

最新推荐文章于 2024-07-09 09:39:15 发布

贪玩小神

最新推荐文章于 2024-07-09 09:39:15 发布

阅读量4.7k

点赞数

本文链接：https://blog.csdn.net/q51522613/article/details/42423361

版权

说明：CSS学起来其实也不难，关键你要把CSS的作用了解清楚，CSS是用来对HTML标签设置颜色、背景、布局等等。

说白了，其实你只要把CSS中的position和float的布局以及color，font-size（字体颜色）等颜色、字体属性值了解透测，这CSS也算入门了。

改变body块中div块元素的class=s1.s2.s3中 float:left;和float:right;的值来观察实际效果。

代码如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2132" />
<title>ceshi</title>
<style type="text/css">
body{
margin:15px;
font-family:Arial;
font-size:12px;
}
.father{
border:10px solid #111111;
padding:50px;
background-color:#ffff99;
}
.father div{
padding:10px;
margin:10px;
background-color:#90baff;
border:5px dashed #111111;
}
.father p{
background-color:#ff90ba;
border:5px dashed #111111;
}
.s1{
float:left;
}
.s2{
float:right;
}
.s3{
float:left;
}
</style>
</head>
<body>
<div class="father">
<div class="s1">B1</div>
<div class="s2">B2</div>
<div class="s3">B3</div>
<p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字。</p>
</div>
</body>
</html>