abstract：<!DOCTYPE html><html><head><mate charset="UTF-8"><link rel="stylesheet" type="text/css" href="css.css"><link rel="shortcut
<!DOCTYPE html>
<html>
<head>
<mate charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css.css">
<link rel="shortcut icon" type="image/x-icon" href="">
<title>边框效果作业</title>
<style>
.content{width: 1040px;border: 1px solid #ccc; margin: 0px auto;}
.box{width: 200px;height: 300px;border: 1px solid #ccc;float: left;margin: 3px;}
.box img{width: 200px;height: 200px;}
*{margin: 0px;border: 0px;}
.box a{text-decoration: none;border: 1px solid #ccc; padding: 4px 10px;background: yellow;}
.box-content{width: 200px;height: 212px;}
.box-bottom{width: 200px;height: 88px;}
p{margin: 5px;text-align: center;}
.clear{clear: both;}
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="box-content">
<img src="http://www.php.cn/static/images/index_learn_first.jpg" alt="图片"> </div>
<div class="box-bottom">
<p>PHP中文网前端VIP课程</p>
<p style="color: red;"><del style="font-size: 10px;">原价1988元.</del> <strong>现价998元</strong> </p>
<p><a href="" style="text-align: center;">立即购买</a></p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://www.php.cn/static/images/index_learn_first.jpg" alt="图片"> </div>
<div class="box-bottom">
<p>PHP中文网前端VIP课程</p>
<p style="color: red;"><del style="font-size: 10px;">原价1988元.</del> <strong>现价998元</strong> </p>
<p><a href="" style="text-align: center;">立即购买</a></p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://www.php.cn/static/images/index_learn_first.jpg" alt="图片"> </div>
<div class="box-bottom">
<p>PHP中文网前端VIP课程</p>
<p style="color: red;"><del style="font-size: 10px;">原价1988元.</del> <strong>现价998元</strong> </p>
<p><a href="" style="text-align: center;">立即购买</a></p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://www.php.cn/static/images/index_learn_first.jpg" alt="图片"> </div>
<div class="box-bottom">
<p>PHP中文网前端VIP课程</p>
<p style="color: red;"><del style="font-size: 10px;">原价1988元.</del> <strong>现价998元</strong> </p>
<p><a href="" style="text-align: center;">立即购买</a></p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://www.php.cn/static/images/index_learn_first.jpg" alt="图片"> </div>
<div class="box-bottom">
<p>PHP中文网前端VIP课程</p>
<p style="color: red;"><del style="font-size: 10px;">原价1988元.</del> <strong>现价998元</strong> </p>
<p><a href="" style="text-align: center;">立即购买</a></p></div>
</div>
<div class="clear"></div>
<div class="box">
<div class="box-content">
<img src="http://www.php.cn/static/images/index_learn_first.jpg" alt="图片"> </div>
<div class="box-bottom">
<p>PHP中文网前端VIP课程</p>
<p style="color: red;"><del style="font-size: 10px;">原价1988元.</del> <strong>现价998元</strong> </p>
<p><a href="" style="text-align: center;">立即购买</a></p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://www.php.cn/static/images/index_learn_first.jpg" alt="图片"> </div>
<div class="box-bottom">
<p>PHP中文网前端VIP课程</p>
<p style="color: red;"><del style="font-size: 10px;">原价1988元.</del> <strong>现价998元</strong> </p>
<p><a href="" style="text-align: center;">立即购买</a></p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://www.php.cn/static/images/index_learn_first.jpg" alt="图片"> </div>
<div class="box-bottom">
<p>PHP中文网前端VIP课程</p>
<p style="color: red;"><del style="font-size: 10px;">原价1988元.</del> <strong>现价998元</strong> </p>
<p><a href="" style="text-align: center;">立即购买</a></p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://www.php.cn/static/images/index_learn_first.jpg" alt="图片"> </div>
<div class="box-bottom">
<p>PHP中文网前端VIP课程</p>
<p style="color: red;"><del style="font-size: 10px;">原价1988元.</del> <strong>现价998元</strong> </p>
<p><a href="" style="text-align: center;">立即购买</a></p></div>
</div>
<div class="box">
<div class="box-content">
<img src="http://www.php.cn/static/images/index_learn_first.jpg" alt="图片"> </div>
<div class="box-bottom">
<p>PHP中文网前端VIP课程</p>
<p style="color: red;"><del style="font-size: 10px;">原价1988元.</del> <strong>现价998元</strong> </p>
<p><a href="" style="text-align: center;">立即购买</a></p></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
Correcting teacher：韦小宝Correction time：2019-01-23 16:09:33
Teacher's summary：写的很不错 前端没有什么太复杂的地方 多多练习就可以掌握了 继续加油吧！