前端学习（1800）：前端调试之清除浮动练习2
生活随笔
收集整理的這篇文章主要介紹了
前端学习（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">小米<小愛老師></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;}運行結果
總結
以上是生活随笔為你收集整理的前端学习（1800）：前端调试之清除浮动练习2的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 嵌入式仿真用Qt播放器和录像机
- 下一篇： 前端学习（1559）：ng-classt