上效果圖 :
上代碼 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body, dl { margin: 0; } img { max-width: 100%; } dl { float: left; width: 33.3333%; background-color: blueviolet; color: #fff; padding-bottom: 5px; } dd { text-align: center; margin: 10px auto; } </style> </head> <body> <dl> <dt> <img src="./wlx2.jpg" alt="" /> </dt> <dd>李信</dd> </dl> <dl> <dt> <img src="./wlx2.jpg" alt="" /> </dt> <dd>李信</dd> </dl> <dl> <dt> <img src="./wlx2.jpg" alt="" /> </dt> <dd>李信</dd> </dl> <dl> <dt> <img src="./wlx2.jpg" alt="" /> </dt> <dd>李信</dd> </dl> <dl> <dt> <img src="./wlx2.jpg" alt="" /> </dt> <dd>李信</dd> </dl> <dl> <dt> <img src="./wlx2.jpg" alt="" /> </dt> <dd>李信</dd> </dl> </body> </html>