课后练习-CSS中的浮动
大志2019-02-15 15:00:10309<!DOCMENT TYPE>
<html>
<head>
<title>课后练习-CSS中的浮动</title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;border: 0;}
.header{width: 960px;margin: 0 auto;height: 60px;background: pink;}
ul li{list-style: none;float: left;width: 150px;height: 60px;line-height: 60px;text-align: center;font-size: 16px;font-weight: 700;color: #fff;}
.main{width: 960px;margin: 0 auto;background: #ccc;}
.left{width: 160px;float: left;background: #666;color:#fff;padding: 20px;}
.left div{width:100%;height:240px;}
.right{width: 720px;float: left;padding: 20px;}
h1{font-size: 24px;padding: 20px;}
p{font-size: 12px;color: #999;}
.footer{width: 960px;margin: 0 auto;height: 60px;background: #ccc;text-align: center;color:#fff;padding-top: 30px;}
.clear{clear: both;}
</style>
<body>
<div class="header">
<ul>
<li>首页</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>PHP</li>
</ul>
</div>
<div class="main">
<div class="left">
<div>模块一</div>
<div>模块二</div>
</div>
<div class="right">
<h1>成都市中小学生课后服务最迟将于4月实施</h1>
<p>四川在线消息（记者 江芸涵）记者2月14日从成都市教育局获悉，备受关注的《成都市中小学生课后服务实施意见》正式出台。方案明确，成都市中小学课后服务从2019年春季学期开始，不晚于4月。具体方案由各区（市）县制定，该项工作将逐步完善，形成常态机制。成都市教育局就各界关心的问题进行了详细解读。</p>
</div>
</div>
<div class="clear"></div>
<div class="footer">Copyright 2014-2018 http://www.php.cn/ All Rights Reserved</div>
</body>
</html>