软件定制开发供应商用HTML+CSS+JS做一个简单的个人网页

软件定制开发供应商暑假在家闲的没事，软件定制开发供应商写了一个简单的小网页，软件定制开发供应商从网上找了些图片和视软件定制开发供应商频拼起来的，软件定制开发供应商由于经验不足的关系，没有将想添加的东西放进去。

先来看看整个网页效果的视频吧

效果的图片如下（最右边空出来的其实是滑动条，截长屏自动没掉了）

首页

自我介绍

 我的家乡

 大学生涯

 软件资源

整个网页是围绕首页的结构与样式去制作的，只是在每个导航栏网页的content盒子添加了东西而已，其他都是没有变化的。

首页HTML如下（结构还是很简单的）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>首页</title>
  8.     <link href="css/首页.css" rel="stylesheet" type="text/css" />
  9. </head>
  10. <body>
  11.     <!--视频背景-->
  12.     <div class="home">
  13.         <div class="player">
  14.             <video src="video/瑞克and莫蒂.mp4" autoplay loop muted></video> <!--自动播放，循环播放，静音-->
  15.         </div>
  16.     </div>
  17.  
  18.     <!--透明覆盖在视频背景的盒子-->
  19.     <div class="home2">
  20.         <div class="logo">
  21.             <img src="images/logo.png" width="20%" height="15%">
  22.         </div>
  23.         <div class="name">
  24.             <img src="images/name.png" width="15%" height="10%">
  25.         </div>
  26.         <img id="musics" onclick="button()" src="images/音乐.png" width="3%" >
  27.         <audio id="music" autoplay="autoplay" loop="loop" src="音频/音频.mp3" ></audio>
  28.     </div>
  29.  
  30.     <!--导航栏-->
  31.     <div class="nav">
  32.         <div class="left">
  33.             <img src="images/瑞克2.png" width="100%" height="100%">
  34.         </div>
  35.         <div class="menu">
  36.             <a href="首页.html">首 &nbsp 页</a>
  37.         </div>
  38.         <div class="menu">
  39.             <a href="自我介绍.html">自我介绍</a>
  40.         </div>
  41.         <div class="menu">
  42.             <a href="我的家乡.html">我的家乡</a>
  43.         </div>
  44.         <div class="menu">
  45.             <a href="大学生涯.html">大学生涯</a>
  46.         </div>
  47.         <div class="end">
  48.             <a href="软件资源.html">软件资源</a>
  49.         </div>
  50.         <!--最右侧盒子填充用的-->
  51.         <div class="right"></div>
  52.     </div>
  53.  
  54.     <!--顶部滑出导航栏-->
  55.     <div class="header">
  56.         <div class="logo2">
  57.             <img src="images/logo2.png" width="100%" height="100%">
  58.         </div>
  59.         <div class="menu1">
  60.             <a href="首页.html">首 &nbsp 页</a>
  61.         </div>
  62.         <div class="menu1">
  63.             <a href="自我介绍.html">自我介绍</a>
  64.         </div>
  65.         <div class="menu1">
  66.             <a href="我的家乡.html">我的家乡</a>
  67.         </div>
  68.         <div class="menu1">
  69.             <a href="大学生涯.html">大学生涯</a>
  70.         </div>
  71.         <div class="end1">
  72.             <a href="软件资源.html">软件资源</a>
  73.         </div>
  74.         <div class="right1">
  75.             <img src="images/瑞克3.png" width="100%" height="100%">
  76.         </div>
  77.     </div>
  78.  
  79.     <!--内容区的主盒子-->
  80.     <div class="home3">
  81.         <div class="beijing">
  82.             <img src="images/背景.png" width="100%">
  83.         </div>
  84.         <div class="tietu">
  85.             <img src="images/瑞克5.png" width="100%" height="100%">
  86.         </div>
  87.         <!--二维码弹窗-->
  88.         <div id="QR">
  89.             <img src="images/QR.png" width="100%" height="100%">
  90.         </div>
  91.         <div id="QR1">
  92.             <img src="images/二维码.png" width="100%" height="100%">
  93.         </div>
  94.         <!--内容区-->
  95.         <div class="content">
  96.             
  97.         </div>
  98.     </div>
  99.     <!--穿插用的小盒子-->
  100.     <div class="kong"></div>
  101.     <!--底部盒子-->
  102.     <div class="footer">
  103.         <div class="Morty">
  104.             <img src="images/瑞克6.png" width="30%">
  105.         </div>
  106.         <div class="footer_logo">
  107.             <img src="images/瑞克logo.png" width="80%">
  108.         </div>
  109.         <div class="Rick">
  110.             <img src="images/瑞克4.png" width="60%"> 
  111.         </div>
  112.     </div>
  113. </body>
  114. </html>

然后就是首页的CSS

  1. body {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. .home {
  7.     position: fixed; /*绝对定位，固定在页面上*/
  8. }
  9. .player video{
  10.     width: 100%;
  11.     height: 100%;
  12.     z-index: 1; 
  13. }
  14.  
  15. .home2 {
  16.     width: 100%;
  17.     height: 100%;
  18.     position: absolute;
  19.     z-index: 2; /*图像的堆叠顺序*/
  20. }
  21.  
  22. .logo {
  23.     width: 100%;
  24.     display: flex;
  25.     justify-content: center;
  26.     position: absolute;
  27.     top: 30%;
  28. } 
  29.  
  30. .name {
  31.     width: 100%;
  32.     display: flex;
  33.     justify-content: center;
  34.     position: absolute;
  35.     top: 45%;
  36. }
  37.  
  38. #musics {
  39.     animation-name: music; /*这个名称是下方的动画名称*/
  40.     animation-timing-function: linear;  /*规定动画的速度曲线，linear是匀速旋转*/
  41.     animation-duration: 3s;
  42.     animation-iteration-count: infinite; /*动画无数次旋转*/
  43.     cursor: pointer;  /*让鼠标箭头变成一支小手*/
  44.     position: absolute;
  45.     z-index: 2;
  46. }
  47.  
  48. @keyframes music{
  49.     0%{
  50.         transform: rotate(0deg); /*旋转角度*/
  51.     }
  52.     50%{
  53.         transform: rotate(180deg);
  54.     }
  55.     100%{
  56.         transform: rotate(365deg);
  57.     }
  58. }
  59.  
  60. .nav {
  61.     width: 100%;
  62.     height: 15%;
  63.     position: absolute;
  64.     top: 90%;
  65.     background-color: white;
  66.     display: flex;
  67.     border-bottom: 1px solid gray;
  68.     z-index: 3;
  69. }
  70.  
  71. .left,.right {
  72.     width: 10%;
  73.     height: 100%;
  74.     text-align: center;
  75. }
  76.  
  77. .end {
  78.     width: 16%;
  79.     height: 50%;
  80.     display: flex;
  81.     align-items: center;
  82.     justify-content: center;
  83.     margin: auto;
  84. }
  85.  
  86. .menu {
  87.     width: 16%;
  88.     height: 50%;
  89.     display: flex;
  90.     align-items: center;
  91.     justify-content: center;
  92.     margin: auto;
  93.     border-right: 1px solid gray;
  94. }
  95.  
  96. a {
  97.     color: gray;
  98.     font-size: 18px;
  99.     text-decoration: none;
  100. }
  101.  
  102. .nav a:hover {
  103.     height: 100%;
  104.     width: 80%;
  105.     text-align: center;
  106.     line-height: 47px;
  107.     background-color: cornflowerblue;
  108.     color: white;
  109.     border-radius: 7px;
  110.     transition: 1s; /**/
  111. }
  112.  
  113. .header {
  114.     position: fixed;
  115.     top: -15%;
  116.     width: 100%;
  117.     height: 15%;
  118.     background-color: white;
  119.     transition: all 0.8s;
  120.     z-index: 4;
  121.     display: flex;
  122. }
  123.  
  124. .logo2 {
  125.     width: 20%;
  126.     display: flex; /*弹性盒子*/
  127.     justify-content: center; /*居中对齐*/
  128.     align-items: center; /*水平对齐弹性项目*/
  129. }
  130.  
  131.  
  132. .end1 {
  133.     width: 14%;
  134.     height: 50%;
  135.     display: flex;
  136.     align-items: center;
  137.     justify-content: center;
  138.     margin: auto;
  139. }
  140.  
  141. .menu1 {
  142.     width: 14%;
  143.     height: 50%;
  144.     display: flex;
  145.     align-items: center;
  146.     justify-content: center;
  147.     margin: auto;
  148.     border-right: 1px solid gray;
  149. }
  150.  
  151. .right1 {
  152.     width: 10%;
  153.     display: flex;
  154.     justify-content: center;
  155.     align-items: center;
  156. }
  157.  
  158. .header a:hover {
  159.     height: 100%;
  160.     width: 80%;
  161.     text-align: center;
  162.     line-height: 47px;
  163.     background-color: cornflowerblue;
  164.     color: white;
  165.     border-radius: 7px;
  166.     transition: 1s;
  167. }
  168.  
  169. .home3 {
  170.     width: 100%;
  171.     position: absolute;
  172.     top: 105%;
  173.     display: flex;
  174.     justify-content: center;
  175.  
  176. }
  177.  
  178. .tietu {
  179.     width: 10%;
  180.     height: 20%;
  181.     position: absolute;
  182.     top: 30%;
  183.     left: 0;
  184. }
  185.  
  186. #QR {
  187.     width: 4%;
  188.     height: 7%;
  189.     background-color: white;
  190.     position: absolute;
  191.     top: 30%;
  192.     right: 3%;
  193.     border-radius: 5px;
  194.     z-index: 3;
  195.     cursor: pointer;
  196. }
  197.  
  198. #QR:hover {
  199.     background-color: brown;
  200. }
  201.  
  202. #QR1 {
  203.     width: 10%;
  204.     height: 16%;
  205.     border-radius: 5px;
  206.     z-index: 3;
  207.     position: absolute;
  208.     top: 25%;
  209.     right: 8%;
  210. }
  211. .content {
  212.     width: 80%;
  213.     height: 95%;
  214.     background: radial-gradient(circle at top center,#d3d3d3,#fff); /*径向渐变色*/
  215.     position: absolute;
  216.     top: 2%;
  217.     border-radius: 10px;
  218. }
  219.  
  220. .kong {
  221.     width: 100%;
  222.     height: 1%;
  223.     background-color: cyan;
  224.     position: absolute;
  225.     top: 220%;
  226. }
  227.  
  228. .footer {
  229.     width: 100%;
  230.     height: 35%;
  231.     position: absolute;
  232.     top: 221%;
  233.     background: radial-gradient(circle at top center,#800080,#778899);
  234.     display: flex;
  235.     justify-content: center;
  236.     align-items: center;
  237. }
  238.  
  239. .Morty {
  240.     width: 25%;
  241.     text-align: center;
  242. }
  243.  
  244. .footer_logo {
  245.     width: 50%;
  246.     text-align: center;
  247. }
  248.  
  249. .Rick {
  250.     width: 25%;
  251.     text-align: center;
  252. }

到这里网页整个样式已经弄好，JS代码我就没有放了，具体就是header的滑动条弹窗、音乐播放暂停的按钮、鼠标悬停图片弹出二维码图片这些JS代码

还有就是关于的使用，我的视频背景添加了muted静音属性，如果浏览器没有设置自动媒体或声音播放，那么我这个视频背景就可以播放，但没有视频声音；反之你没有设置muted属性，浏览器也没有设置自动媒体或声音播放，那么这个视频背景不仅没有声音而且不能播放。所以我才添加了一个音乐播放器，这样他人使用的时候不需要浏览器设置也可以点击音乐按钮实现音频播放。

video视频背景播放和声音解决方法如下

谷歌浏览器（进入设置，搜索”网站设置“并点击，下拉到头点击”更多内容“，点击声音，点击允许播放声音旁的添加，把你要播放音频的网页粘贴上去就好了）

edge浏览器（点击设置，找到”Cookie 和网站权限“并点击，下拉找到媒体自动播放点击进入，直接选择允许就好了，无需添加站点）

图片资源大部分都是免抠图，瑞克和莫蒂的图片资源在Stickpng官网下载，视频背景则是壁纸引擎下的。

就这么多了，这是我第一次写博客，可能写的不是很好，望阅读的朋友多多包涵，谢谢啦。

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发