首页要求：网页保存为index.html，CSS文件保存为test.css，并使用外链式引用CSS文件；设计页面为上中下主结构，整个页面居中显示；上方有横向导航栏；使用DIV+CSS结构布局。

要求：网页保存为index.html，CSS文件保存为test.css，并使用外链式引用CSS文件；设计页面为上中下主结构，整个页面居中显示；上方有横向导航栏；使用DIV+CSS结构布局。

时间: 2024-09-10 22:20:51 浏览: 47

要创建一个包含上中下主结构的网页，并且要求使用外链式引用CSS文件，你可以按照以下步骤进行： 1. 创建HTML文件（index.html）： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>页面标题</title> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div id="header">  <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">服务</a></li> <li><a href="#">关于我们</a></li> </ul> </div> <div id="content">  <p>这里是页面的主要内容区域。</p> </div> <div id="footer">  <p>版权所有 © 2023</p> </div> </body> </html> ``` 2. 创建CSS文件（test.css）： ```css /* 全局样式 */ body { text-align: center; /* 整个页面居中 */ } /* 导航栏样式 */ #header ul { list-style-type: none; /* 移除列表的默认样式 */ padding: 0; margin: 0; overflow: hidden; /* 清除浮动 */ background-color: #f2f2f2; } #header li { float: left; /* 横向排列 */ } #header li a { display: block; padding: 8px 16px; text-decoration: none; /* 移除下划线 */ color: black; } #header li a:hover { background-color: #ddd; } /* 主内容区域样式 */ #content { margin: auto; /* 上下自动外边距，实现居中 */ width: 80%; /* 宽度为视口宽度的80% */ background-color: #fff; } /* 页面底部样式 */ #footer { clear: both; /* 清除浮动 */ margin-top: 10px; padding: 10px; background-color: #f2f2f2; } ``` 确保HTML文件和CSS文件放置在同一个目录下，并且CSS文件的路径正确指向HTML文件中`<link>`标签的`href`属性值。

阅读全文