轻松搞定！新闻页面HTML代码及附带文件全解析

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>NewsPage</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>Breaking News</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">World</a></li> <li><a href="#">Politics</a></li> <li><a href="#">Business</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Technology</a></li> <li><a href="#">Entertainment</a></li> </ul> </nav> <section> <h2>Latest News</h2> <article> <h3>Headline 1</h3> <p>This is the first news article.</p> <a href="#">Read More</a> </article> <article> <h3>Headline 2</h3> <p>This is the second news article.</p> <a href="#">Read More</a> </article> <article> <h3>Headline 3</h3> <p>This is the third news article.</p> <a href="#">Read More</a> </article> </section> <footer> <p>© 2022 NewsPage. All rights reserved.</p> </footer> </body> </html> style.css: body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f2f2f2; } header { background-color: #333; color: #fff; text-align: center; padding: 20px; } nav { background-color: #666; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } nav ul li { float: left; } nav ul li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } nav ul li a:hover { background-color: #111; } section { width: 80%; margin: 20px auto; background-color: #fff; padding: 20px; } h2 { text-align: center; margin-bottom: 20px; } article { margin-bottom: 40px; } h3 { margin-bottom: 10px; } footer { background-color: #333; color: #fff; text-align: center; padding: 10px; position: fixed; bottom: 0; width: 100%; } a { color: #333; } a:hover { color: #111; } 保存为index.html和style.css的文件，并确保两个文件在同一目录下。 ######[AI写代码神器 | 1542点数解答 | 2024-11-15 11:26:25]

服务商

更多选项

快捷项

自定义