[Web 每日一练] 图文练习（1）
目标：熟练掌握图片和文字的搭配
图例：
思路：我们可以采用一个div里面包一个 img 和 p 的结构实现一部分
实现:
<!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> <style> *{ margin: 0; padding: 0; } div{ width: 100px; float: left; } p{ width: 68px; text-align: center; } </style></head><body> <div> <img src="img1/1.png" alt=""> <p>很不推荐</p> </div> <div> <img src="img1/2.png" alt=""> <p>不推荐</p> </div> <div> <img src="img1/3.png" alt=""> <p>一般</p> </div> <div> <img src="img1/4.png" alt=""> <p>推荐</p> </div> <div> <img src="img1/5.png" alt=""> <p>强烈推荐</p> </div> </body></html>总结
- 将大问题转化为小块
- 处理好一部分再去解决其他的部分
- 熟悉下简单的图文操作和居中用法
