继续。
还是把两段内容压成一段，先看第一个示例(想了一下只显示样式表了，列表内容的代码就不单独放出来了)：
<style type="text/css">
html,body{
margin: 0;
height: 100%;
}
ol{
background-image: url(../03%20using%20image/img/9.PNG);
background-repeat: no-repeat;
background-position: left center;
}
body{
background-image: url(../03%20using%20image/img/1.jpg);
background-repeat: no-repeat;
background-position: center;
}
.p1{color: deepskyblue;}
.p3{font-family: "微软雅黑";}
.p2{font-size: 20px;}
.p4{font-weight: bold;}
.p5{font-style: italic;}
.p6{text-indent: 50px; background-color: #2D9CE1;}
.p7{text-align: center; color: #FFFFFF;}
.p8{height: 100px;}
.p9{
height: 100px;
line-height: 100px;
text-align: center;
background-color: #00BFFF;
}
.p10{text-decoration: underline;}
</style>
运行结果：
可以看到各式各样的文字以及图片。
先整理一下常用的文本属性：
| 项目 | 内容 | 值 |
|---|---|---|
| background-repeat | 背景图片是否要重复展示（当图片大小小于所在块的大小时） | no-repeat（不重复）；repeat-x（横向重复）；repeat-y（纵向重复）；（默认值）repeat（全方位重复塞满所有空位置） |
| background-image | 背景采用图片显示 | 图片的url地址 |
| background-position | 背景图片（不能重复填充屏幕时）靠着的位置 | 在 top，bottom和left，right之间各选一个来决定位置 |
| font-family | 文本内容的字体 | 英文或中文的字体名称 |
| font-size | 文本内容的字体大小 | px |
| font-weight | 文本内容的字体粗度 | 0~1000或bold（相对于默认的加粗） |
| font-style | 文本内容的字体倾不倾斜 | italic或oblique：倾斜 |
| text-indent | 文字的行首顶格距离 | px |
| text-align | 文本内容的位置 | 居左：left；居中：center；居右：right |
可能有一些重复的，请不要在意（
然后来看重点的下一次示例，我管它叫做让div“飞”：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>飘浮效果</title>
</head>
<style type="text/css">
#item1{
background-color: #00BFFF;
float: left;
width: 100px;
height: 100px;
}
#item2{
width: 200px;
height: 200px;
background-color: #FFA500;
color: #FF0000;
}
#item3{
width: 150px;
background-color: #4169E1;
}
#item4{
width: 700px;
background-color: #2d9ce1;
}
#item5{
width: 200px;
background-color: #56e1b8;
}
#item3,#item4,#item5{
height: 300px;
float: left;
}
</style>
<body>
<p>文字环绕效果</p>
<div id="item1">
我是恋恋
</div>
<div id="item2">
看你背后看你背后看你背后看你背后看你背后看你背后看你背后看你背后看你背后
看你背后看你背后看你背后看你背后看你背后看你背后看你背后看你背后看你背后
</div>
<p>横向排版布局</p>
<div id="item3">
</div>
<div id="item4">
</div>
<div id="item5">
</div>
</body>
</html>
可以看到多个div都被塞进了浏览器同一行内容里。这是大部分网站能够在一行里塞入多个不同的方形的内容的奥秘。
用到的属性就是float，后面的值可以为left和right，即靠左浮动和靠右浮动。
漂浮的原理也不难，看示例都能看出七七八八，就是把赋予了同一方向的浮动属性的容器按照（代码里）从上到下顺序依次排列到同一行里。
当然，细心的朋友可能发现了，既然把这个属性叫做浮动属性，是不是意味着这些漂浮着的容器的“里面”还能塞进别的容器或者元素呢？
确实可以，看这运行结果的上半部分就能看出来了（
除了像示例那样本身就想做出被文字环绕的效果的情况外，大部分情况下这都是坏事，因为一般都希望把这几个漂浮着的容器当成“没有漂浮着”的内容。
那该怎么办呢？
再来看一段示例（（ ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>聊天框</title>
</head>
<style type="text/css">
ul{
margin: auto;
height: 500px;
width: 300px;
border: #000000 solid 1px;
}
li{
clear: both;
height: auto;
width: 100px;
border: #000000 solid 1px;
}
.left{
float: left;
background-color: white;
}
.right{
float: right;
background-color: #8de34b;
}
</style>
<body>
<ul>
<li class="left">早上好，灵梦！</li>
<li class="left">...</li>
<li class="left">起~~~~床~~~~~啦！！！！！！</li>
<li class="right">吵死了！</li>
<li class="right">要不要每次都这么大声啊;(</li>
<li class="left">嘻嘻</li>
<li class="right">啊啊啊，华扇最差劲了！</li>
<li class="left">管你这么说，反正今天也要修行🎵</li>
</ul>
</body>
</html>
运行结果：
可以看到是在模拟一个聊天框，结合代码可以发现虽然这几个聊天框都带有漂浮属性，但是在运行结果上没有从左到右排列。
这是因为这些容器里除了有float属性外又多了个clear属性，它定义了该元素的两边能不能插入漂浮元素，值为left，左边不出现；为right右边不出现，为both则该元素所在行都不能出现其它的漂浮元素。
1999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
