前端学习（1800）：前端调试之清除浮动练习2

<!DOCTYPE html>
<html lang="en"><head><!--系统内置 start--><script type="text/javascript"></script><!--系统内置 end--><meta charset="UTF-8"><title>练习</title><!-- 不要忘记引入index.css --><link rel="stylesheet" href="index.css">
</head><body><div class="picture clearfix"><a class="phone" href="#"></a></div><ul><li class="title">小米&lt;小爱老师&gt;</li><li class="intro">口袋里的英语外教</li><li class="price">499元起</li></ul>
</body></html>

index.css

/* 清除所有的内外边距 */
* {margin: 0;padding: 0;}
body{width: 200px;
height: 256px;
background: #FFFFFF;
}
.phone{margin-top:22px;display:block;height:130px;background:url(./images/phone.jpg) no-repeat center;background-size:contain;margin-bottom:16px;}.clearfix::after{content:'';display:block;clear:both;
}
ul{list-style:none;}
.title{height: 17px;
font-size: 12px;
line-height: 17px;
color: #000000;
text-align:center;
margin-bottom:4px;}
.intro{height: 17px;
font-size: 12px;
line-height: 17px;
color: #A8A8A8;
text-align:center;
margin-bottom:8px;}
.price{height: 17px;
font-weight: 500;
font-size: 12px;
line-height: 17px;
color: #FD6821;
text-align:center;}

运行结果