摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css基础样式控制</title><style type="text/css" media="screen">*,body,span,a,ul,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css基础样式控制</title>
<style type="text/css" media="screen">
*,body,span,a,ul,li{margin:0;padding:0;}
li{list-style: none;}
a{text-decoration: none;color:#333;}
.clear{clear: both;}
.content{width:800px;margin:0 auto;border-left: 1px solid #ccc;border-right: 1px solid #ccc;padding: 0 20px;}
.content>span{display: block;height:80px;font-size: 24px;line-height: 80px;}
.content>ul{width:760px;border:1px solid #f0f0f0;border-radius: 20px;margin-top: 20px;padding: 0 20px 30px 20px;overflow: hidden;}
.content ul li{width:220px;height:80px;margin-left: 25px;margin-top:25px;background-color: #f1f1f1;float: left;}
.content ul li a>span{display:block;margin-left:10px;line-height: 40px;font-size: 14px;}
.content ul li a>div{margin-left: 10px;}
.content ul li a>div span{width:40px;font-size:12px;display:block;margin-right:5px;margin-top: 10px;float: left;background-color: #999;border-radius: 4px;text-align: center;color:#fff;}
</style>
</head>
<body>
<div>
<span>CSS基础样式控制</span>
<ul>
<li>
<a href="#">
<span>css基础</span>
<div>
<span>闯关</span>
<span>作业</span>
<span>文章</span>
</div>
</a>
</li>
<li>
<a href="#">
<span>CSS中的盒模型</span>
<div>
<span>闯关</span>
<span>作业</span>
<span>文章</span>
</div>
</a>
</li>
<li>
<a href="#">
<span>CSS中的边框样式</span>
<div>
<span>闯关</span>
<span>作业</span>
<span>文章</span>
</div>
</a>
</li>
<li>
<a href="#">
<span>CSS中的背景控制</span>
<div>
<span>闯关</span>
<span>作业</span>
<span>文章</span>
</div>
</a>
</li>
<li>
<a href="#">
<span>块级元素和行内元素相互转换</span>
<div>
<span>闯关</span>
<span>作业</span>
<span>文章</span>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2019-01-03 15:23:31
老师总结：border-radius: 4px, 这里推荐使用百分比比较好一些
