简易首页制作
简易首页的组成由头部文件、导航、内容模块和底部四块组成。
1、初始化HTML基础框架
使用!DOCTYPE html声明文档类型，并通过html:5的快捷代码创建HTML5的基础结，并设置语言和标题。
<!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <title>WEB前端开发作业演示</title> </head> <body> </body> </html>
2、构建头部模块
在body框内写入代码
<header> <div class="row"> <div class="logo"><a href="/">WEB前端开发作业演示</a></div> </div> </header>
添加css代码（less写法）
header { //定义顶部 header 区域的样式
.row { //在 header 内部应用 Bootstrap 或自定义网格系统，设置一个宽度为1200px的行
width: 1200px; // 设置水平居中布局，自动计算左右外边距
margin: 0 auto; // 当屏幕宽度小于等于960px时，使用媒体查询改变行宽度为100%
@media(max-width: 960px) {
width: 100%;
}
.logo { // 定义 logo 部分的样式
text-align: center; // 设置 logo 的文字居中对齐
line-height: 80px; // 设置 logo 行高为80px，保证垂直居中
font-size: 26px; // 设置 logo 文字大小为26像素
a { // 为 logo 中的链接元素设置样式
color: #333; // 设置链接颜色为深灰色
font-weight: bolder; // 设置字体加粗以增强视觉效果
text-decoration: none; // 去除下划线，让链接看起来更像普通文本
}
}
}
}3、构建导航模块
在header模块下方添加代码
<div class="nav"> <div class="row"> <ul> <li class="on"><a href="#">首页</a></li> <li><a href="#">学习资料</a></li> <li><a href="#">作业演示</a> <ul> <li><a href="2">2-1</a></li> <li><a href="2">3-1</a></li> <li><a href="2">4-2</a></li> </ul> </li> <li><a href="#">关于</a></li> <li><a href="#">联系</a></li> </ul> </div> </div>
添加css代码（less写法）
// 设置body元素的外边距为0，消除浏览器默认样式的影响
body {
margin: 0;
}
.nav {
// 设置导航栏背景颜色为#008bc7（深蓝色）
background-color: #008bc7;
// 在.nav4内部定义.row类样式
.row {
// 设置.row容器宽度为1200px，并通过自动设置左右内边距使其水平居中显示
width: 1200px;
margin: 0 auto;
/* 使用媒体查询，在屏幕宽度小于等于960px时应用以下样式 */
@media(max-width: 960px) {
// 将.row类容器的宽度设置为100%，适应小屏幕自适应布局
width: 100%;
}
}
// 设置.nav4内的ul元素样式
ul {
// 移除默认外边距和内边距
margin: 0;
padding: 0;
// 文本居中对齐
text-align: center;
// 使用CSS Grid布局，并设置初始情况下有5列（每列自适应宽度）
display: grid;
grid-template-columns: auto auto auto auto auto;
list-style: none;
/* 使用媒体查询，在屏幕宽度小于等于960px时调整Grid布局列数 */
@media(max-width: 960px) {
// 当屏幕变小时，将Grid布局列数改为3列
grid-template-columns: auto auto auto;
}
li {
// 设置li元素为相对定位，以便其子元素（ul）可以进行绝对定位
position: relative;
// 设置行高为50px以使文本垂直居中
line-height: 50px;
// 鼠标指针悬停时变为手形
cursor: pointer;
// 当鼠标悬停在当前li元素上时，应用以下样式：
&:hover ul {
// 改变ul元素的透明度为1，使其可见
opacity: 1;
// 显示ul元素内容
visibility: visible;
// 设置display属性为block，确保ul显示为块状元素
display: block;
}
a {
// 设置文字颜色为白色
color: #ffffff;
// 去除下划线
text-decoration: none;
// 设置字体加粗，权重为900
font-weight: 900;
display: block;
}
// 当鼠标悬停在li上或li具有.on类时应用的样式
&:hover,
&.hover,
& ul li:hover,
& ul li.hover {
// 背景颜色为rgba(0, 0, 0, 0.13)，即带有一定透明度的黑色
background: #0079ad;
// 修改此时li内的a元素颜色为#ffea52（黄色）
a {
color: #ffea52;
}
}
// 在当前li元素下定义嵌套的ul子元素样式
ul {
// 将ul元素设置为绝对定位，并根据父级li元素定位
position: absolute;
// 设置ul元素距离左侧边界0像素
left: 0;
// 设置ul元素距离顶部50像素
top: 50px;
// 设置ul元素宽度为100%
width: 100%;
// 设置z-index值为6，使其在叠加上具有较高层级
z-index: 6;
// 初始化ul元素透明度为0，隐藏该元素
opacity: 0;
// 隐藏ul元素内容
visibility: hidden;
// 防止内容溢出
overflow: hidden;
// 添加过渡效果，当opacity属性改变时，会在0.8秒内完成变化
transition: opacity .8s;
// 对于当前li元素下的嵌套li子元素设置样式
li {
// 取消浮动
float: none;
// 设置嵌套li元素宽度为100%
width: 100%;
// 设置背景颜色为#C01E22（暗红色）
background-color: #008bc7;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
// 在嵌套li元素内部的a元素样式
a {
// 设置链接文字颜色为白色
color: #fff;
}
&:hover {
background-color: #0079ad;
}
}
}
}
}
}4、构建内容模块
在nav模块下方添加代码
<div class="content"> <div class="row"> <div class="caption"> <h3>欢迎来到我们的网站</h3> <p>这里是您的网站标语或者简介，突出展示关键信息。</p> </div> <div class="single"> 代码是未来的画笔，前端是创意的舞台。每一行代码都是迈向成功的脚步，每一次挑战都是成长的机遇。不要害怕错误，它们是通向真理的垫脚石。坚持不懈，不断学习，追求卓越，用技术创造无限可能。相信自己的能力，释放内心的创造力，在前端的世界里，你就是那个能改变未来的人！ <br><br><br><br><br><br><br><br><br><br><br><br> </div> </div> </div>
添加css代码（less写法）
.content {
.row {
padding: 15px;
width: 1200px;
margin: 0 auto;
@media(max-width: 960px) {
width: 100%;
}
.single{
padding: 20px 0;
}
.caption {
// 设置caption区域的上下内边距，并使其内容居中显示
padding: 30px 0 50px;
text-align: center;
// 在.caption区域内设置h3元素的字体大小和粗细
h3 {
font-size: 38px;
font-weight: 600;
}
}
}
}5、构建底部模块
在内容模块下方添加底部代码
<footer> <div class="copyright"> <p>Copyright Your WebSite.Some Rights Reserved.</p> </div> </footer>
添加css代码（less写法）
footer {
.copyright {
text-align: center;
background: #333333;
padding: 10px 0px;
color: #ffffff;
}
}6、完
效果演示
文档如有描述不清楚、错误或者过时的地方，欢迎留言指出。
文档、教程内容会不定时更新，转载请标明原帖链接，以免让过时的教程流入网络。
