css浮动学习_php.cn手记

abstract：<!DOCTYPE html> <html> <head> <title>css中的浮动</title> <style type="text/css"> li{ list-style: none; /*列表样式去掉*/ width: 80px;he

<!DOCTYPE html>
<html>
<head>
	<title>css中的浮动</title>
	<style type="text/css">
		li{
			list-style: none;	/*列表样式去掉*/
			width: 80px;height: 40px;
			background: #ccc;
			line-height: 40px;
			text-align: center;
			margin-left: 2px;
			float: left;
		}
		.clear{clear: both;}	/*也有上下左右之分*/
		.box{
			width: 100px;height: 100px;
			background: red;
			float: right;
			margin: 100px 100px;
		}
	</style>
</head>
<body>
	<!-- 一般两个块级元素是向下排列的,用浮动就可以使他们并列在一行;浮动用完后必须消除 -->
	<ul>
		<li>html</li>
		<li>js</li>
		<li>web</li>
		<li>php</li>
	</ul>
	<!-- 上面有用到浮动,那么后面布局就要清除浮动 -->
	<div class="clear"></div>
	<div class="box"></div>
</body>
</html>

Correcting teacher：查无此人Correction time：2019-04-03 13:29:23
Teacher's summary：完成的不错。浮动有时候很难控制，要多练习。继续加油

css浮动学习

Popular Entries