CSS是一種常用的網頁排版語言,其中可以使用文字加圖片下表來美化網頁。以下是一段使用CSS實現文字加圖片下表的代碼:
<html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } img { width: 100%; height: auto; } </style> </head> <body> <table> <thead> <tr> <th>名稱</th> <th>圖片</th> </tr> </thead> <tbody> <tr> <td>CSS</td> <td></td> </tr> <tr> <td>HTML</td> <td></td> </tr> <tr> <td>JavaScript</td> <td></td> </tr> </tbody> </table> </body> </html>
以上代碼使用了table、th、td和img標簽。其中,table表示表格元素,th表示表頭單元格,td表示表格單元格,img表示圖片。通過設置這些元素的樣式,可以讓表格看起來更美觀。
在樣式中,我們為表格和單元格設置了邊框,并將邊框合并。同時,我們為單元格設置了padding屬性,使其與邊框之間有一定的間距。對于圖片,我們將其寬度設置為100%,高度自適應,這樣可以保證圖片始終填滿整個單元格。
最后,我們只需要在表格中輸入內容和圖片的路徑即可。這樣,就實現了一個簡單的文字加圖片下表。
上一篇div。this
下一篇div。1和div。2