> 文档中心 > [Web 每日一练] 图文练习(3)

[Web 每日一练] 图文练习(3)

目标:熟练掌握图片和文字的搭配

要求:结构清楚,语法简单

图例:

思路: 左边一个图片,右边一个div,做好一个之后复制粘贴其余即可

实现:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><style>    *{ margin:0; padding:0; list-style: none;    }    ul{ width: 232px;    }    ul li:nth-of-type(1){ background-color:#e6e6e6; height: 62px;    }    ul li img{ width: 40px; height: 40px; float: left; margin-left: 15px; margin-top: 12px;    }    ul li div{ height: 40px; width: 167px; margin-left: 10px; margin-top: 12px; float: left;    }    ul li div p{ height: 20px; line-height: 20px; font-size: 12px;    }</style><body>    <ul> <li>     <img src="img3/1.png" alt="">     <div>  <p>飙升榜</p>  <p style="color: #b1b1b1;">更新79首</p>     </div> </li> <li>     <img src="img3/2.png" alt="">     <div>  <p>原创榜</p>  <p style="color: #b1b1b1;">刚刚更新</p>     </div> </li> <li>     <img src="img3/3.png" alt="">     <div>  <p>热歌榜</p>  <p style="color: #b1b1b1;">每周四更新</p>     </div> </li> <li>     <img src="img3/4.png" alt="">     <div>  <p>新歌</p>  <p style="color: #b1b1b1;">每天更新</p>     </div> </li>    </ul></body></html>