摘要:<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="A
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>CSS中的浮动</title>
<style type="text/css">
ul li{list-style:none;width:100px;height:40px;line-height:40px;text-align:center;background-color:#ccc;margin:0px 1px;float:left;}
ol{color:#cc0033}
.box1{width:200px;height:200px;background-color:pink;float:right;}
.clear{clear:both;}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>css</li>
<li>javaScript</li>
<li>JQuery</li>
<li>php</li>
<li>c++</li>
</ul>
<div></div>
<div>1</div>
<div>2</div>
<div>3</div>
<br>
<br>
<br>
<br>
<br>
<font size="20" color="#c0c0c0">注释:</font>
<ol>
<li>list-style:none;去掉ul前面的圆点</li>
<li>line-height:40px行高40个像素</li>
<li>text-align:center;文本居中 center居中的意思</li>
<li>margin:5px 0px;5px是上下 0px是左右;把li标签区分开,分成一个一个的li。</li>
<li>浮动属性:float(方向的意思,有2个属性。向左或向右)一般都是向左浮动。</li>
<li>clear:both清除浮动,3个属性both两边都清,left,right</li>
</ol>
</body>
</html>
批改老师:西门大官人批改时间:2019-02-24 09:44:02
老师总结:css中定义了.box1的class,但是代码中貌似没有用到啊