以下是一个简单的HTML和CSS代码示例,用于创建一个基本的网站布局: ``` <!DOCTYPE html> <html> <head> <title>科技进化 - Kejinshou</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <div class="logo"> <img src="logo.png" alt="Kejinshou"> </div> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">科技新闻</a></li> <li><a href="#">科技评测</a></li> <li><a href="#">关于我们</a></li> </ul> </nav> </header> <main> <section> <h1>欢迎来到Kejinshou</h1> <p>我们致力于为大家提供最新的科技资讯和评测。</p> <a href="#" class="button">了解更多</a> </section> <section> <h2>最新科技新闻</h2> <div class="news"> <article> <h3>全球首台5nm工艺芯片发布</h3> <p>台积电宣布推出全球首台5nm工艺芯片,性能提升达到了20%。</p> <a href="#">阅读全文</a> </article> <article> <h3>苹果发布新款iPad Pro</h3> <p>苹果公司发布了新款iPad Pro,支持5G网络和Mini LED显示屏。</p> <a href="#">阅读全文</a> </article> <article> <h3>SpaceX成功发射星际飞船</h3> <p>SpaceX成功发射了首次载人的星际飞船,将宇航员送往国际空间站。</p> <a href="#">阅读全文</a> </article> </div> </section> </main> <footer> <p>© 2021 Kejinshou. All rights reserved.</p> </footer> </body> </html> ``` 以下是对应的CSS样式代码: ``` * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; } header { background-color: #333; color: #fff; padding: 20px; display: flex; justify-content: space-between; align-items: center; } nav ul { list-style: none; display: flex; } nav ul li { margin-right: 20px; } nav ul li a { color: #fff; text-decoration: none; } main { max-width: 1200px; margin: 0 auto; padding: 20px; } section { margin-bottom: 40px; } h1, h2, h3 { font-weight: normal; margin-bottom: 10px; } h1 { font-size: 36px; } h2 { font-size: 24px; } h3 { font-size: 18px; } p { margin-bottom: 20px; } .news { display: flex; flex-wrap: wrap; } article { background-color: #f5f5f5; padding: 20px; margin-right: 20px; margin-bottom: 20px; width: calc(33.33% - 20px); } article:last-of-type { margin-right: 0; } button { background-color: #333; color: #fff; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer; font-size: 16px; text-decoration: none; transition: background-color 0.2s ease; } button:hover { background-color: #666; } footer { background-color: #ddd; padding: 20px; text-align: center; } ``` 请注意,这只是一个简单的示例,您可以根据需要进行更改和扩展。