当前位置：首页 > news >正文

实战项目——前端

news 2025/10/5 8:10:04

项目模板

图片1？

项目结构

在这里插入图片描述

normalize.css

清除各大浏览器不同样式标签的默认样式；直接百度复制导入即可

https://www.bootcdn.cn/normalize/
在这里插入图片描述

在这里插入图片描述

引入，使其生效：

在这里插入图片描述

公共样式

在这里插入图片描述

自定义样式

在这里插入图片描述

网页常见的结构

标签	说明
header	头部分结构
nav	导航条部分结构
main	主核心部分内容
footer	页尾

共性就是本身无任何效果，可以看成就是一个普通的div

header：头部分

在这里插入图片描述

演示：

公共样式

/*字体大小*/
*{font-size: 15px;
}
/*容器居中*/
.container_1{margin: 0px auto; /*上0px，左右预留空间一样*/width: 1024px; /*注意：css样式大小一定带px，否则效果混乱参差不齐*//* background-color: aqua; */
}

自定义样式

/*头部设定*/
.header_box{height: 70px;background-color: black;
}
/*给图片设定大小*/
.container_1 .logo{ /*因为都是class属性，所以都需要加.*/height: 70px;/*宽高一般是设定其一，另一方则自适应即可*/width: 90px;
}
.container_2{height: 70px;display: flex; /*开启弹性布局，默认横轴*/align-items: center; /*侧轴居中*/
}
.header_box ul{ /*前者是class属性所以需要加.，而后者是标签所以不用加.*/list-style-type: none; /*去掉无序前面的点*/display: flex; /*开启弹性布局，默认横轴*/
}
.header_box ul li{display: inline-block;/*把无序列表转为行内块标签*//* border: 1px solid blue; */width: 120px;height: 68px;text-align: center; /*内容文本左右居中*/line-height: 68px; /*行内上下居中*/
}
.header_box ul li:hover{ /*:hover：设置元素在其鼠标悬停时的样式*/background-color: gray; /*鼠标悬停时li标签的样式的背景颜色*/
}
.header_box ul li a{ color: white; /*设置字体颜色为白色*/text-decoration-line: none; /*去掉a标签下面的下划线*/
}
.header_box ul li a:hover{ /*:hover：设置元素在其鼠标悬停时的样式*/color: pink; /*鼠标悬停时a标签字体的样式的颜色*/
}

页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 清除各大浏览器不同样式标签的默认样式 --><link rel="stylesheet" href="../../assets/css/normalize.css"><!-- 公共样式 --><link rel="stylesheet" href="../../assets/css/common.css"><!-- 自定义样式 --><link rel="stylesheet" href="./index.css">
</head>
<body><header class="header_box"><div class="container_1 container_2"><img class="logo" src="../../assets/images/p2.png" alt="加载超时"><!-- 图片需要设定大小，否则会越界或缩小容器 --><ul><li><a href="./index.html">发现音乐人</a></li><li><a href="./index.html">我的音乐人</a></li><li><a href="./index.html">关注</a></li><li><a href="./index.html">商城</a></li><li><a href="./index.html">音乐人</a></li><li><a href="./index.html">云推歌</a></li><li><a href="./index.html">下载客户端</a></li></ul></div></header>
</body>
</html>

在这里插入图片描述

nav：导航条部分

轮廓图

常用是用第三方插件来做轮廓图：“https://swiper.com.cn/”

在这里插入图片描述

第一步：先下载插件文件

在这里插入图片描述

第二步：查看使用方法，实现其中步骤1引入文件

在这里插入图片描述
也就是下载的插件，只需要保留swiper-bundle.min.js和swiper-bundle.min.css这两个文件即可实现，其余文件可以删除也可以不用管都行，但搞程序讲究简洁明了；之后把这两个文件引入到页面文件中

在这里插入图片描述

第三步：根据查看使用方法，实现其中步骤2添加HTML内容，及步骤3给Swiper定义一个大小，及步骤3初始化Swiper也是把代码复制到页面文件中

公共样式

/*字体大小*/
*{font-size: 15px;
}
/*容器居中*/
.container_1{margin: 0px auto; /*上0px，左右预留空间一样*/width: 1024px; /*注意：css样式大小一定带px，否则效果混乱参差不齐*//* background-color: aqua; */
}

自定义样式

/*头部设定*/
.header_box{height: 70px;background-color: black;
}
/*给图片设定大小*/
.container_1 .logo{ /*因为都是class属性，所以都需要加.*/height: 70px;/*宽高一般是设定其一，另一方则自适应即可*/width: 90px;
}
.container_2{height: 70px;display: flex; /*开启弹性布局，默认横轴*/align-items: center; /*侧轴居中*/
}
.header_box ul{ /*前者是class属性所以需要加.，而后者是标签所以不用加.*/list-style-type: none; /*去掉无序前面的点*/display: flex; /*开启弹性布局，默认横轴*/
}
.header_box ul li{display: inline-block;/*把无序列表转为行内块标签*//* border: 1px solid blue; */width: 120px;height: 68px;text-align: center; /*内容文本左右居中*/line-height: 68px; /*行内上下居中*/
}
.header_box ul li:hover{ /*:hover：设置元素在其鼠标悬停时的样式*/background-color: gray; /*鼠标悬停时li标签的样式的背景颜色*/
}
.header_box ul li a{ color: white; /*设置字体颜色为白色*/text-decoration-line: none; /*去掉a标签下面的下划线*/
}
.header_box ul li a:hover{ /*:hover：设置元素在其鼠标悬停时的样式*/color: pink; /*鼠标悬停时a标签字体的样式的颜色*/
}/* 以下是轮廓图的样式 */
.nav_box{background-color: #9cb2d6;margin-top: 5px; /*上下间隔距离*/
}
.swiper { /*因为swiper复制过来的时候，已经别人取好类名的了*//* width: 600px; */height: 400px;/*这里只要高度宽度让其自适应，皆可*/
}

页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 清除各大浏览器不同样式标签的默认样式 --><link rel="stylesheet" href="../../assets/css/normalize.css"><!-- 公共样式 --><link rel="stylesheet" href="../../assets/css/common.css"><!-- 自定义样式 --><link rel="stylesheet" href="./index.css"><!-- 引入swiper-bundle.min.css样式 --><link rel="stylesheet" href="../../assets/libs/swiper/swiper-bundle.min.css">
</head>
<body><!-- 引入swiper-bundle.min.js文件，遵循从上至下执行，所以放前面，这是js文件需要放在body中 --><script src="../../assets/libs/swiper/swiper-bundle.min.js"></script><header class="header_box"><div class="container_1 container_2"><img class="logo" src="../../assets/images/p2.png" alt="加载超时"><!-- 图片需要设定大小，否则会越界或缩小容器 --><ul><li>