[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>