首页世界杯梦幻阵容html+css

世界杯梦幻阵容html+css

时间: 2023-11-14 22:08:00 浏览: 184

以下是一个简单的世界杯梦幻阵容的HTML和CSS代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>世界杯梦幻阵容</title> <style> body { font-size: 12px; color: #333; } body, ul, li { padding: 0; margin: 0; list-style: none; } #head { width: 730px; height: 150px; margin: 0 auto; } h1 { float: left; } .head_r { float: right; } #content { width: 800px; height: 300px; margin: 0 auto; } li { float: left; margin-right: 10px; } </style> </head> <body> <div id="head"> <h1>世界杯梦幻阵容</h1> <div class="head_r"> <img src="logo.png" alt="logo"> </div> </div> <div id="content"> <ul> <li><img src="player1.png" alt="player1"></li> <li><img src="player2.png" alt="player2"></li> <li><img src="player3.png" alt="player3"></li> <li><img src="player4.png" alt="player4"></li> <li><img src="player5.png" alt="player5"></li> <li><img src="player6.png" alt="player6"></li> <li><img src="player7.png" alt="player7"></li> <li><img src="player8.png" alt="player8"></li> <li><img src="player9.png" alt="player9"></li> <li><img src="player10.png" alt="player10"></li> <li><img src="player11.png" alt="player11"></li> </ul> </div> </body> </html> ``` 该示例中，使用了HTML和CSS来创建一个简单的世界杯梦幻阵容页面。其中，`<div>`元素用于创建页面头部，包括标题和logo；`<ul>`和`<li>`元素用于创建球员列表。CSS样式用于设置页面的布局和样式。