以网站首页为题，完成网站的设计与制作。设计时要求HTML、CSS、JavaScript三方代码分离，不要混在一个文件里。外观尽量都用css设计，尽量不要HTML属性设计。具体要求： 1）“头部”的高度为 80px，“logo 图片”如图显示在左侧，图片宽 181px，高 45px，垂直居中。

以下是一个简单的网站首页设计与制作示例，满足题目中的要求： HTML 文件（index.html）： ``` <!DOCTYPE html> <html> <head> <title>网站首页</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="script.js"></script> </head> <body> <header> <div class="logo"> <img src="logo.png" alt="Logo"> </div> <nav> <ul> <li><a href="#">导航链接1</a></li> <li><a href="#">导航链接2</a></li> <li><a href="#">导航链接3</a></li> <li><a href="#">导航链接4</a></li> </ul> </nav> </header> <main> <h1>欢迎来到网站首页</h1> <p>这里是网站的主要内容区域。</p> </main> <footer> <p>版权所有 © 2021 网站名称</p> </footer> </body> </html> ``` CSS 文件（style.css）： ``` /* 全局样式 */ body { margin: 0; padding: 0; } /* 头部样式 */ header { height: 80px; background-color: #333; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; } .logo img { width: 181px; height: 45px; vertical-align: middle; } nav ul { margin: 0; padding: 0; list-style: none; display: flex; } nav li { margin-left: 20px; } nav a { color: #fff; text-decoration: none; font-size: 16px; } nav a:hover { text-decoration: underline; } /* 主要内容区样式 */ main { padding: 20px; } h1 { font-size: 36px; } p { font-size: 18px; line-height: 1.5; } /* 页脚样式 */ footer { padding: 10px; background-color: #f2f2f2; text-align: center; } ``` JavaScript 文件（script.js）： ``` // 空文件，这里只是为了演示三方代码分离 ``` 注意：以上示例中的 logo.png 图片需要自行准备，并放置在与 HTML 文件同级的目录下。以上示例中，HTML、CSS、JavaScript 代码都是分离开的，不混在一个文件里。外观也尽量都用 CSS 设计，尽量不用 HTML 属性设计。其中头部的高度为 80px，logo 图片显示在左侧，图片宽 181px，高 45px，垂直居中。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通