您的位置：首页 > Web前端 > CSS

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

2015-01-05 15:12 267 查看
说明：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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航