devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

大学生自我介绍模板(html+css)(附代码)_编写一个网页介绍自己。代码和结果图片拍照提交。

作者：很楠不爱3 | 2024-05-23 05:31:10

赞

踩

编写一个网页介绍自己。代码和结果图片拍照提交。

个人介绍网页效果图

(一共分为六个页面,分别为index1,index2,首页,秘密花园,兴趣爱好,人生理想.)

第一个页面-index1:

当鼠标移动到字体上时,字体会变大变亮,点击字体跳转到下一个页面.

第二个页面-index2:

主要写人生格言,大概介绍一下自己,当鼠标移动到"欢迎来到我的....探索之旅吧!"字体会变亮,当鼠标点击时会跳转到下一个界面.

第三个页面-首页:

这个页面主要设置了顶部五个导航栏,点击任意一处都可以跳转到相应的页面

第四个页面-我的秘密花园: 

这个页面也就是相册,运用了swiper,音频,动图等,鼠标点击照片可以左向右进行滑动,点击顶部导航栏跳转到下一个页面.

第五个页面-兴趣爱好:

主页介绍自己的兴趣爱好,记录自己的生活!

第六个页面-人生理想:

主页写自己的人生理想,加入了视频.

下面是代码:

第一个页面-index1:

  1. <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.  
  7.         body {
  8.             min-height: 100vh;
  9.             display: flex;
  10.             justify-content: center;
  11.             align-items: center;
  12.             background-color: black;
  13.         }
  14.  
  15.         h2 {
  16.             color: #222;
  17.             font-size: 100px;
  18.         }
  19.  
  20.         h2 a {
  21.             text-decoration: none;
  22.             color: white;
  23.         }
  24.  
  25.         h2 span {
  26.             transition: 0.5s;
  27.         }
  28.  
  29.         h2:hover span:nth-child(1) {
  30.             margin-right: 10px;
  31.         }
  32.  
  33.         h2:hover span:nth-child(2) {
  34.             margin-left: 30px;
  35.         }
  36.  
  37.         h2 span:nth-child(1)::after {
  38.             opacity: 0;
  39.             transition: 2s;
  40.         }
  41.  
  42.         h2:hover span:nth-child(1)::after {
  43.             content: "'";
  44.             opacity: 1;
  45.         }
  46.  
  47.         h2:hover span {
  48.             color: white;
  49.             text-shadow: 0 0 10px #fff,
  50.                 0 0 20px #fff,
  51.                 0 0 40px #fff,
  52.                 0 0 80px #fff;
  53.  
  54.  
  55.         }
  56.     </style>

第二个页面-index2:

  1. <style>
  2.         body {
  3.             margin: 0;
  4.             padding: 0;
  5.             background: url("images/封面1.jpg") no-repeat;
  6.             background-size: cover;
  7.         }
  8.         .box {
  9.             color: rgb(6, 173, 151);
  10.             width: 750px;
  11.             padding: 40px;
  12.             text-align: center;
  13.             margin: auto;
  14.             margin-top: 5%;
  15.             font-family: 'Century Gothic', sans-serif;
  16.         }
  17.         .box .box-img {
  18.             width: 150px;
  19.             height: 150px;
  20.             border-radius: 50%;
  21.         }
  22.         .box hr {
  23.             width: 650px;
  24.  
  25.         }
  26.         .box h1 {
  27.             font-size: 50px;
  28.             letter-spacing: 4px;
  29.             font-weight: 400;
  30.  
  31.         }
  32.         .box h2 {
  33.             font-size: 25px;
  34.             letter-spacing: 3px;
  35.             font-weight: 300;
  36.             color: rgb(11, 236, 183);
  37.             font-weight: 400;
  38.         }
  39.         .box h2 .two {
  40.             font-size: 30px;
  41.             letter-spacing: 3px;
  42.             font-weight: 300;
  43.  
  44.         }
  45.         .one {
  46.             text-decoration: none;
  47.             font-size: 20px;
  48.             font-weight: 600;
  49.             color: grey;
  50.         }
  51.         .one:hover {
  52.             color: rgb(6, 173, 151);
  53.         }
  54.         .h2 .container {
  55.             height: 40px;
  56.             display: flex;
  57.             /* 弹性布局,水平，垂直居中*/
  58.             justify-content: center;
  59.             align-items: center;
  60.         }
  61.         span {
  62.             font-size: 25px;
  63.             font-weight: bold;
  64.             text-transform: uppercase;
  65.             /* 转为大写*/
  66.             letter-spacing: 5px;
  67.             /* 字间距*/
  68.             color: #111;
  69.             filter: blur(2px);
  70.             /* 模糊滤镜*/
  71.             animation: animate 1.5s linear infinite;
  72.             /* 动画：动画名称 动画时长 线性的 无限次播放*/
  73.         }
  74.         /* 为每一个span元素设置动画延迟时间*/
  75.         span:nth-child(1) {
  76.             animation-delay: 0s;
  77.         }
  78.  
  79.         @keyframes animate {
  80.  
  81.             /* 定义动画关键帧*/
  82.             0%,
  83.             100% {
  84.                 color: #fff;
  85.                 filter: blur(2px);
  86.                 /*模糊滤镜*/
  87.                 text-shadow: 0 0 10px #32ff7e, 0 0 20px #32ff7e, 0 0 30px #32ff7e,
  88.                     0 0 40px #32ff7e, 0 0 100px #32ff7e, 0 0 200px #32ff7e;
  89.             }
  90.  
  91.             5%,
  92.             95% {
  93.                 color: #111;
  94.                 filter: blur(0px);
  95.             }
  96.         }
  97.     </style>
  98. </head>
  99.  
  100. <body>
  101.     <div class="box">
  102.         <img src="images\头像2.jpg" alt="" class="box-img">
  103.         <h2>把书读烂,把路走宽,一定要靠自己发光!</h2>
  104.         <hr>
  105.         <h2 class="one">xxx</h2>
  106.         <h2 class="two">立志成为一名军人的爱国青年!</h2>
  107.         <br>
  108.         <h2>清澈的爱只为中国 !</h2>
  109.         <h3>Clear love only for China !</h3>
  110.         <h2><a href="首页3.html">
  111.         <div class="container">
  112.             <span>欢迎来到我的世界!
  113.                 接下来,开启你的探索之旅吧!</span>
  114.     </a></h2>
  115.     </div>
  116. </body>

第三个页面-首页:

  1. <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.         
  7.         body {
  8.             background: url() no-repeat;
  9.             background-size: cover;
  10.             background-color: rgb(184, 245, 247);
  11.         }
  12.  
  13.         .box {
  14.             width: 1200px;
  15.             height: 540px;
  16.             background: rgba(0, 0, 0, 0.2);
  17.             margin: 0 auto;
  18.             text-align: center;
  19.             margin-top: 7%;
  20.  
  21.         }
  22.  
  23.         .box .left a {
  24.             display: block;
  25.             width: 200px;
  26.             height: 90px;
  27.             background: rgba(0, 0, 0, 0.2);
  28.             font-size: 20px;
  29.             color: #fff;
  30.             text-decoration: none;
  31.             padding-left: 30px;
  32.             line-height: 90px;
  33.         }
  34.  
  35.         .box .left a:hover {
  36.             background-color: #ff6700;
  37.         }
  38.  
  39.         .left {
  40.             float: left;
  41.             width: 230px;
  42.             height: 540px;
  43.             background-color: cadetblue;
  44.             background: rgba(0, 0, 0, 0.2);
  45.         }
  46.  
  47.         .right {
  48.             float: right;
  49.             width: 970px;
  50.             height: 540px;
  51.             background-color: rgba(152, 233, 233, 0.2);
  52.             ;
  53.  
  54.         }
  55.  
  56.         .right>div {
  57.             float: left;
  58.             width: 470px;
  59.             height: 540px;
  60.             background: rgba(0, 0, 0, 0.2);
  61.             margin-left: 14px;
  62.             margin-bottom: 14px;
  63.         }
  64.  
  65.         .right .one {
  66.             background-color: rgb(152, 233, 233, 0.2);
  67.         }
  68.  
  69.         .right .photo {
  70.             width: 490px;
  71.             height: 540px;
  72.         }
  73.  
  74.         .right .one h1 {
  75.             color: white;
  76.             font-size: 60px;
  77.         }
  78.  
  79.         .right .one p {
  80.             font-size: 30px;
  81.             font-weight: 500;
  82.             color: rgb(11, 99, 106);
  83.             font-style: italic;
  84.             text-align: left;
  85.             line-height: 60px;
  86.         }
  87.         .bottom {
  88.             text-align: center;
  89.             border-bottom: 50px;
  90.             margin-bottom: 0px;
  91.         }
  92.         .box .left .shouye1 {
  93.             background-color: #13bdd8;
  94.         }
  95.     </style>
  96. </head>
  97.  
  98. <body>
  99.     <div class="nav">
  100.         <a href="#">G-Dragon</a>
  101.         <a href="#" target="_blank" class="shouye">首页</a>
  102.         <a href="秘密花园4.html" target="_blank">我的秘密花园</a>
  103.         <a href="兴趣爱好5.html" target="_blank">兴趣爱好</a>
  104.         <a href="人生理想6.html" target="_blank">人生理想</a>
  105.     </div>
  106.     <div class="box">
  107.         <div class="left">
  108.             <a href="#">G-Dragon</a>
  109.             <a href="#" target="_blank" class="shouye1">首页</a>
  110.             <a href="秘密花园4.html" target="_blank">我的秘密花园</a>
  111.             <a href="兴趣爱好5.html" target="_blank">兴趣爱好</a>
  112.             <a href="人生理想6.html" target="_blank">人生理想</a>
  113.         </div>
  114.         <div class="right">
  115.             <div class="one">
  116.                 <h1>About us</h1>
  117.                 <br>
  118.                 <p>Describe: 一名爱国青年</p>
  119.                 <p>name: xxx</p>
  120.                 <p>Age: 20岁</p>
  121.                 <p>Dream: 当兵</p>
  122.                 <p>Motto:</p>
  123.                 <p>&nbsp;&nbsp;清澈的爱只为中国!</p>
  124.                 <p>&nbsp;&nbsp;生而逢盛世,青年当有为!</p>
  125.             </div>
  126.             <div>
  127.                 <img src="images\背景图2.jpg" alt="" class="photo">
  128.             </div>
  129.         </div>
  130.     </div>
  131.     
  132. </body>

第四个页面-我的秘密花园: 

  1. <style>
  2.         body {
  3.             background: #a3ebf6;
  4.             font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  5.             font-size: 14px;
  6.             color: #000;
  7.             margin: 0;
  8.             padding: 0;
  9.         }
  10.  
  11.         .swiper-container {
  12.             width: 100%;
  13.             padding-top: 50px;
  14.             padding-bottom: 50px;
  15.         }
  16.  
  17.         .swiper-slide {
  18.             background-position: center;
  19.             background-size: cover;
  20.             width: 300px;
  21.             height: 300px;
  22.         }
  23.  
  24.  
  25.  
  26.         .nav {
  27.             height: 41px;
  28.             border-top: 3px solid #b4fffa;
  29.             border-bottom: 1px solid #edeef0;
  30.             background-color: #fcfcfc;
  31.             line-height: 41px;
  32.         }
  33.  
  34.         .nav a {
  35.  
  36.             display: inline-block;
  37.             height: 41px;
  38.             font-size: 15px;
  39.             color: #4c4c4c;
  40.             text-decoration: none;
  41.             padding: 0px 20px;
  42.         }
  43.  
  44.         .nav a:hover {
  45.             background-color: #fcfcfc;
  46.             color: #93d9eb;
  47.         }
  48.  
  49.         .nav .secret {
  50.             background-color: #93d9eb;
  51.         }
  52.  
  53.         .pt-down {
  54.             position: relative;
  55.             width: 400px;
  56.             height: 300px;
  57.             position: absolute;
  58.             bottom: 0;
  59.             left: 0;
  60.         }
  61.  
  62.         .text {
  63.             position: relative;
  64.             width: 950px;
  65.             height: 350px;
  66.             position: absolute;
  67.             bottom: 0;
  68.             right: 0;
  69.             text-align: center;
  70.             }
  71.     </style>
  72. </head>
  73.  
  74. <body>
  75.  
  76.     <div class="nav">
  77.         <a href="#">G-Dragon</a>
  78.         <a href="首页3.html" target="_blank">首页</a>
  79.         <a href="#" target="_blank" class="secret">我的秘密花园</a>
  80.         <a href="兴趣爱好5.html" target="_blank">兴趣爱好</a>
  81.         <a href="人生理想6.html" target="_blank">人生理想</a>
  82.     </div>
  83.  
  84.     <div class="pt-down">
  85.         <img src="images\哆啦A梦3.gif" alt="">
  86.  
  87.         <audio controls="controls">
  88.             <source src="audio\阎维文 - 强军战歌.ogg" type="audio/ogg" >
  89.             <source src="audio\阎维文 - 强军战歌.mp3" type="audio/mpeg">不支持
  90.         </audio>
  91.         <audio autoplay="autoplay" loop="loop">
  92.             <source src="audio\阎维文 - 强军战歌.ogg" type="audio.ogg">
  93.             <source src="audio\阎维文 - 强军战歌.mp3" type="audio.mpeg">
  94.         </audio>
  95.     </div>
  96.     <div class="text">
  97.         <h1>欢迎来到我的秘密花园</h1>
  98.         <h2>欢迎你开启探索之旅!</h2>
  99.         <h2>在这里你可以看到很多不一样的我,发现我的另一面,知道我的更多秘密哦!</h2>
  100.         <br>
  101.         <h1>So,请不要定义我, 我颠覆你的想象 !</h1>
  102.         <p>请点击左边的播放器,我们一起来在音乐中探索更多秘密吧!</p>
  103.         <br>
  104.     </div>
  105.  
  106.  
  107.     <!-- Swiper -->
  108.     <div class="swiper-container">
  109.         <div class="swiper-wrapper">
  110.             <div class="swiper-slide" style="background-image:url(images/我的秘密花园/1.jpg)"></div>
  111.             <div class="swiper-slide" style="background-image:url(images/我的秘密花园/2.jpg)"></div>
  112.             <div class="swiper-slide" style="background-image:url(images/我的秘密花园/3.jpg)"></div>
  113.             <div class="swiper-slide" style="background-image:url(images/我的秘密花园/4.jpg)"></div>
  114.             <div class="swiper-slide" style="background-image:url(images/我的秘密花园/5.jpg)"></div>
  115.             <div class="swiper-slide" style="background-image:url(images/我的秘密花园/6.jpg)"></div>
  116.             <div class="swiper-slide" style="background-image:url(images/我的秘密花园/7.jpg)"></div>
  117.             <div class="swiper-slide" style="background-image:url(images/我的秘密花园/8.jpg)"></div>
  118.             <div class="swiper-slide" style="background-image:url(images/我的秘密花园/9.jpg)"></div>
  119.             <div class="swiper-slide" style="background-image:url(images/我的秘密花园/10.jpg)"></div>
  120.             <div class="swiper-slide" style="background-image:url(images/我的秘密花园/11.jpg)"></div>
  121.             <div class="swiper-slide" style="background-image:url(images/我的秘密花园/12.jpg)"></div>
  122.             <div class="swiper-slide" style="background-image:url(images/我的秘密花园/13.jpg)"></div>
  123.             <div class="swiper-slide" style="background-image:url(images/我的秘密花园/14.jpg)"></div>
  124.         </div>
  125.         <!-- Add Pagination -->
  126.         <div class="swiper-pagination"></div>
  127.     </div>
  128.     <!-- Swiper JS -->
  129.     <script src="swiper\swiper-bundle.min.js"></script>
  130.     <!-- Initialize Swiper -->
  131.     <script>
  132.         var swiper = new Swiper('.swiper-container', {
  133.             effect: 'coverflow',
  134.             grabCursor: true,
  135.             centeredSlides: true,
  136.             slidesPerView: 'auto',
  137.             coverflowEffect: {
  138.                 rotate: 50,
  139.                 stretch: 0,
  140.                 depth: 100,
  141.                 modifier: 1,
  142.                 slideShadows: true,
  143.             },
  144.             pagination: {
  145.                 el: '.swiper-pagination',
  146.             },
  147.         });
  148.     </script>
  149. </body>

第五个页面-兴趣爱好:

  1. <style>
  2.         body {
  3.             background: #a3ebf6;
  4.             font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  5.             font-size: 14px;
  6.             color: #000;
  7.             margin: 0;
  8.             padding: 0;
  9.         }
  10.  
  11.         .nav {
  12.             height: 41px;
  13.             border-top: 3px solid #b4fffa;
  14.             border-bottom: 1px solid #edeef0;
  15.             background-color: #fcfcfc;
  16.             line-height: 41px;
  17.         }
  18.  
  19.         .nav a {
  20.  
  21.             display: inline-block;
  22.             height: 41px;
  23.             font-size: 15px;
  24.             color: #4c4c4c;
  25.             text-decoration: none;
  26.             padding: 0px 20px;
  27.         }
  28.  
  29.         .nav a:hover {
  30.             background-color: #fcfcfc;
  31.             color: #93d9eb;
  32.         }
  33.  
  34.         .nav .hobby {
  35.             background-color: #93d9eb;
  36.         }
  37.  
  38.  
  39.  
  40.         .box01 {
  41.             width: 1100px;
  42.             height: 100px;
  43.             padding-top: 30px;
  44.             text-align: center;
  45.  
  46.         }
  47.  
  48.         .box01 h1 {
  49.             font-size: 30px;
  50.             font-weight: normal;
  51.             text-align: center;
  52.  
  53.         }
  54.  
  55.         .box01 h2 {
  56.             font-size: 20px;
  57.             font-weight: normal;
  58.             text-align: center;
  59.         }
  60.  
  61.         /*-----box3开始-----*/
  62.         .box03 {
  63.             width: 888px;
  64.             height: 823px;
  65.             margin: 0 auto;
  66.             border: #c6c4c5 2px solid;
  67.             border-top: none;
  68.             border-bottom: #c6c4c5 10px solid;
  69.             margin-top: 80px;
  70.         }
  71.  
  72.         .box03 .bx1 {
  73.             width: 886px;
  74.             height: 330px;
  75.             margin-top: 20px;
  76.         }
  77.  
  78.         .box03 .bx1 img {
  79.             width: 445px;
  80.             height: 325px;
  81.             float: left;
  82.             margin-left: 60px;
  83.             margin-right: 110px;
  84.         }
  85.  
  86.         .box03 .bx1 .right {
  87.             width: 215px;
  88.             height: 330px;
  89.             float: left;
  90.             text-align: center
  91.         }
  92.  
  93.         .box03 .bx1 .right h1 {
  94.             font-size: 20px;
  95.             width: 30px;
  96.             height: 235px;
  97.             float: right;
  98.             line-height: 25px;
  99.             padding-left: 10px;
  100.             margin-top: -15px;
  101.         }
  102.  
  103.         .box03 .bx1 .right h1 span {
  104.             background: #F00;
  105.             padding: 2px;
  106.             font-size: 12px;
  107.         }
  108.  
  109.         .box03 .bx1 .right h2 {
  110.             font-size: 20px;
  111.             width: 30px;
  112.             float: right;
  113.             line-height: 25px;
  114.             background: #F00;
  115.             padding: 10px 0px;
  116.             margin-left: 10px;
  117.  
  118.         }
  119.  
  120.         .box03 .bx1 .right p {
  121.             color: #5e5e5e;
  122.             width: 26px;
  123.             float: right;
  124.             font-size: 14px;
  125.             line-height: 15px;
  126.             border-right: #333 1px solid;
  127.             padding: 0px 2px;
  128.         }
  129.  
  130.         .box03 .bx2 {
  131.             width: 50px;
  132.             height: 78px;
  133.             margin: 0 auto;
  134.             margin-left: auto;
  135.             background: url(../images/03.jpg) no-repeat;
  136.             margin-left: 470px;
  137.         }
  138.  
  139.         .box03 .bx2 p {
  140.             color: #5e5e5e;
  141.             width: 25px;
  142.             float: right;
  143.             font-size: 14px;
  144.             line-height: 15px;
  145.             padding: 0px 18px;
  146.             height: 50px;
  147.         }
  148.  
  149.         .box03 .bx2 .padd0 {
  150.             padding: 0px !important;
  151.         }
  152.  
  153.         .marl60 {
  154.             margin-left: 60px;
  155.         }
  156.  
  157.         .mar0 {
  158.             margin-right: 0px !important;
  159.         }
  160.  
  161.         .box03 .bx3 {
  162.             width: 25px;
  163.             height: 80px;
  164.             border: #e70012 1px solid;
  165.             float: left;
  166.             text-align: center;
  167.             line-height: 20px;
  168.             font-weight: bold;
  169.             margin-left: 20px;
  170.             margin-top: 260px;
  171.         }
  172.  
  173.  
  174.         /*-----foot开始-----*/
  175.         #foot {
  176.             height: 220px;
  177.             width: 100%;
  178.             background: #4cc8ee;
  179.             text-align: center;
  180.             margin-top: 100px;
  181.         }
  182.  
  183.         #foot #foot1 img {
  184.             margin-top: 0px;
  185.             float: left;
  186.         }
  187.  
  188.         /*---foot结束-----*/
  189.         div,
  190.         p,
  191.         input,
  192.         ul,
  193.         li,
  194.         p,
  195.         h1,
  196.         h2,
  197.         h3,
  198.         h4,
  199.         h5,
  200.         h6,
  201.         dl,
  202.         dt,
  203.         dd {
  204.             height: auto;
  205.             margin: 0;
  206.             ;
  207.             padding: 0;
  208.             vertical-align: middle;
  209.         }
  210.         li {
  211.             list-style: none;
  212.         }
  213.     </style>
  214. </head>
  215.  
  216. <body>
  217.     <div class="nav">
  218.         <a href="#">G-Dragon</a>
  219.         <a href="首页3.html" target="_blank">首页</a>
  220.         <a href="秘密花园4.html" target="_blank" class="secret">我的秘密花园</a>
  221.         <a href="#" target="_blank" class="hobby">兴趣爱好</a>
  222.         <a href="人生理想6.html" target="_blank">人生理想</a>
  223.     </div>
  224.     <!----box1开始------>
  225.     <div class="box01">
  226.         <h1>要活在自己的喜欢里,那才叫活着!</h1>
  227.         <br>
  228.         <br>
  229.         <h2>热烈的青春比太阳还耀眼!</h2>
  230.         <br>
  231.         <br>
  232.         <h2>自愈 阅己 悦己 越己</h2>
  233.     </div>
  234.     <!----box3开始------>
  235.     <div class="box03">
  236.         <div class="bx1">
  237.             <img src="images\天安门.jpg" />
  238.             <div class="right">
  239.                 <h1>喜欢追光<span>红</span></h1>
  240.                 <h2>光芒万丈</h2>
  241.                 <p>生在红旗下<br />
  242.                 <p>
  243.                 <p>长在春风里<br /></p>
  244.                 <p>人民有信仰<br /></p>
  245.                 <p>国家有力量<br /></p>
  246.             </div>
  247.         </div>
  248.         <div class="bx2">
  249.             <p>爱国</p>
  250.             <p class="padd0">拥军</p>
  251.         </div>
  252.         <div class="bx1">
  253.             <div class="right marl60">
  254.                 <h1>中国<span>爱</span></h1>
  255.                 <h2>繁荣昌盛</h2>
  256.                 <p>生而逢盛世 </p>
  257.                 <p>青年当有为</p>
  258.                 <p>清澈的爱只为中国</p>
  259.             </div>
  260.             <img class="mar0" src="images\背景图1.jpg" />
  261.             <div class="bx3">查看更多</div>
  262.         </div>
  263.     </div>
  264.     <!----box3开始------>
  265.     <div class="box03">
  266.         <div class="bx1">
  267.             <img src="images\飞机.jpg" />
  268.             <div class="right">
  269.                 <h1>喜欢军事<span>酷</span></h1>
  270.                 <h2>军迷</h2>
  271.                 <p>热爱祖国<br />
  272.                 <p>
  273.                 <p>大国重器<br /></p>
  274.                 <p>中国已不再是以前的中国了<br /></p>
  275.                 <p>现在的中国不在受人欺负了<br /></p>
  276.             </div>
  277.         </div>
  278.         <div class="bx2">
  279.             <p>爱国青年</p>
  280.             <p class="padd0">拥军</p>
  281.         </div>
  282.         <div class="bx1">
  283.             <div class="right marl60">
  284.                 <h1>喜欢旅游<span>自由</span></h1>
  285.                 <h2>赤诚热爱</h2>
  286.                 <p>要山 要海 要自由 </p>
  287.                 <p>愿意一直在路上</p>
  288.                 <p>热烈的青春比太阳还耀眼</p>
  289.             </div>
  290.             <img class="mar0" src="images\旅游.jpg" />
  291.             <div class="bx3">查看更多</div>
  292.         </div>
  293.     </div>
  294.     <!----foot开始------>
  295.     <div id="foot">
  296.         <div id="foot1">
  297.             <img src="images\哆啦A梦3.gif" />
  298.             <h1>欢迎来到我的世界</h1>
  299.             <br>
  300.             <br>
  301.             <br>
  302.             <br>
  303.             <h2>看到这里,你对我有多少了解了呢,接下来带你来看看我的人生理想吧!</h2>
  304.             <br>
  305.             <br>
  306.             <br>
  307.             <br>
  308.         </div>
  309.     </div>
  310.     </div>
  311. </body>

第六个页面-人生理想:

  1. <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.  
  7.         body {
  8.             background: url() no-repeat;
  9.             background-size: cover;
  10.             background-color: rgb(184, 245, 247);
  11.         }
  12.  
  13.         .box {
  14.             width: 1200px;
  15.             height: 540px;
  16.             background: rgba(0, 0, 0, 0.2);
  17.             margin: 0 auto;
  18.             text-align: center;
  19.             margin-top: 7%;
  20.  
  21.         }
  22.  
  23.         .box .left a {
  24.             display: block;
  25.             width: 200px;
  26.             height: 90px;
  27.             background: rgba(0, 0, 0, 0.2);
  28.             font-size: 20px;
  29.             color: #fff;
  30.             text-decoration: none;
  31.             padding-left: 30px;
  32.             line-height: 90px;
  33.         }
  34.  
  35.         .box .left a:hover {
  36.             background-color: #ff6700;
  37.         }
  38.  
  39.         .left {
  40.             float: left;
  41.             width: 230px;
  42.             height: 540px;
  43.             background-color: cadetblue;
  44.             background: rgba(0, 0, 0, 0.2);
  45.         }
  46.  
  47.         .right {
  48.             float: right;
  49.             width: 970px;
  50.             height: 540px;
  51.             background-color: rgba(152, 233, 233, 0.2);
  52.             ;
  53.  
  54.         }
  55.  
  56.         .right>div {
  57.             float: left;
  58.             width: 470px;
  59.             height: 540px;
  60.             background: rgba(0, 0, 0, 0.2);
  61.             margin-left: 14px;
  62.             margin-bottom: 14px;
  63.         }
  64.  
  65.         .right .one {
  66.             background-color: rgb(152, 233, 233, 0.2);
  67.         }
  68.  
  69.  
  70.         .right .one h1 {
  71.             color: white;
  72.             font-size: 60px;
  73.         }
  74.  
  75.         .right .one p {
  76.             font-size: 30px;
  77.             font-weight: 500;
  78.             color: rgb(11, 99, 106);
  79.             font-style: italic;
  80.             text-align: left;
  81.             line-height: 60px;
  82.         }
  83.  
  84.         .bottom {
  85.             text-align: center;
  86.             border-bottom: 50px;
  87.             margin-bottom: 0px;
  88.         }
  89.  
  90.         .box .left .Dream {
  91.             background-color: #13bdd8;
  92.         }
  93.  
  94.         .video-container {
  95.             max-width: 490px;
  96.             
  97.             margin: 0 auto;
  98.         }
  99.  
  100.         .video-container video {
  101.             width: 100%;
  102.             height: 540px;
  103.             display: block;
  104.         }
  105.         .nav .Dream {
  106.     background-color: #93d9eb;
  107. }
  108.     </style>
  109. </head>
  110.  
  111. <body>
  112.     <div class="nav">
  113.         <a href="#">G-Dragon</a>
  114.         <a href="首页3.html" target="_blank" >首页</a>
  115.         <a href="秘密花园4.html" target="_blank">我的秘密花园</a>
  116.         <a href="兴趣爱好5.html" target="_blank">兴趣爱好</a>
  117.         <a href="#" target="_blank" class="Dream">人生理想</a>
  118.     </div>
  119.     <div class="box">
  120.         <div class="left">
  121.             <a href="#">G-Dragon</a>
  122.             <a href="首页3.html" target="_blank" >首页</a>
  123.             <a href="秘密花园4.html" target="_blank">我的秘密花园</a>
  124.             <a href="兴趣爱好5.html" target="_blank">兴趣爱好</a>
  125.             <a href="#" target="_blank" class="Dream">人生理想</a>
  126.         </div>
  127.         <div class="right">
  128.             <div class="one">
  129.                 <h1>My Dream</h1>
  130.                 <br>
  131.                 <p>我的人生理想:</p>
  132.                 <p>&nbsp;&nbsp;当兵, </p>
  133.                 <p>成为一名中国人民解放军军人!</p>
  134.                 <p>报效国家,守卫边疆!</p>
  135.                 <p>生在红旗下,长在春风里,人民有信仰,国家有力量,民族有希望!</p>
  136.                 <p>生而逢盛世,青年当有为!</p>             
  137.             </div>
  138.  
  139.             <div class="video-container">
  140.                 <video controls="controls" autoplay="autoplay" loop="loop" muted>
  141.                     <source src="video\敬礼.mp4" type="video/mp4">
  142.                     Your browser does not support the video tag.
  143.                 </video>
  144.             </div>
  145.         </div>
  146.     </div>
  147. </body>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/611535
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号