首页html制作如图所示列表框

html制作如图所示列表框

时间: 2024-02-16 14:58:24 浏览: 41

以下是两种制作列表框的HTML代码示例： 1. 使用图片作为列表项： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片列表框</title> <style> ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 10px; } img { width: 100px; height: 100px; } </style> </head> <body> <ul> <li><img src="img/timg(12).jpg"></li> <li><img src="img/timg(13).jpg"></li> <li><img src="img/timg(14).jpg"></li> </ul> </body> </html> ``` 2. 使用文本和图片混合作为列表项： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本和图片列表框</title> <style> ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 10px; } img { width: 100px; height: 100px; } </style> </head> <body> <ul> <li> <h1>科技 <img src="img/img1.png"></h1> <hr> </li> </ul> </body> </html> ```

阅读全文