css基础浮动、定位的运用
<!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; margin: 0px auto;}
.box{width: 200px;height: 300px;border: 1px solid #ccc;float: left;margin: 3px;position: relative;}
.box-top{position: absolute;left: 10px;}
.box-top img{width: 50px;height: 30px;}
.box-content 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-top">
<img src="http://img.php.cn/upload/manual/000/000/001/591014544d28e651.jpg" alt="">
</div>
<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-top">
<img src="http://img.php.cn/upload/manual/000/000/001/591014544d28e651.jpg" alt="">
</div>
<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-top">
<img src="http://img.php.cn/upload/manual/000/000/001/591014544d28e651.jpg" alt="">
</div>
<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-top">
<img src="http://img.php.cn/upload/manual/000/000/001/591014544d28e651.jpg" alt="">
</div>
<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-top">
<img src="http://img.php.cn/upload/manual/000/000/001/591014544d28e651.jpg" alt="">
</div>
<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-top">
<img src="http://img.php.cn/upload/manual/000/000/001/591014544d28e651.jpg" alt="">
</div>
<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-top">
<img src="http://img.php.cn/upload/manual/000/000/001/591014544d28e651.jpg" alt="">
</div>
<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-top">
<img src="http://img.php.cn/upload/manual/000/000/001/591014544d28e651.jpg" alt="">
</div>
<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-top">
<img src="http://img.php.cn/upload/manual/000/000/001/591014544d28e651.jpg" alt="">
</div>
<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-top">
<img src="http://img.php.cn/upload/manual/000/000/001/591014544d28e651.jpg" alt="">
</div>
<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>