端午节小网页

最新推荐文章于 2024-05-26 11:23:03 发布
最新推荐文章于 2024-05-26 11:23:03 发布
阅读量2.2k 收藏 12
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moonlight201868/article/details/80765050
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {margin: 0;padding: 0;list-style: none}
        .background1{
            margin: 0 auto;
            width: 1400px;
            height: 600px;
            background: url("images/Banner-bg.jpg") no-repeat;
        }
        .title{
            width: 1400px;
            height: 120px;
            background-color: rgba(0,0,0,0.5);
            position: fixed;
            z-index: 1;
        }
        .word1{
            line-height: 120px;
            font-size: 60px;
            color: white;
            position: relative;
            left: 30px;
        }
        .word2{
            line-height: 120px;
            font-size: 60px;
            color:#FF9000;
            position: relative;
            left: 30px;
        }
        .btn0{
            float:right;
            font-size: 30px;
            color: white;
        }
        .btn0 li{
            height: 115px;
            width: 150px;
            float: right;
            margin-left: 10px;
            line-height: 120px;
            text-align: center;
            cursor: pointer;
        }
        .word3{
            background-color: rgba(55,85,119,0.5);
            border-bottom: 5px solid rgb(255,148,0);
        }
        .box1{
            width: 600px;
            height: 400px;
            position: relative;
            top:130px;
        }
        .box2{
            width: 750px;
            height: 468px;
            position: relative;
            top:-230px;
            left: 640px;
        }

        .word4{
            font-size: 40px;
            color: white;
            position: relative;
            top:50px;
            left: 40px;
        }
        .word5{
            font-size: 45px;
            color: #FF9700;
            position: relative;
            top:50px;
            left: 40px;
        }
        .word6{
            font-size: 25px;
            font-style: italic;
            color: white;
            position: relative;
            top:50px;
            left: 40px;
        }
        .btn1{
            width: 250px;
            height: 60px;
            font-size: 30px;
            background-color: #3E5B74;
            position: relative;
            top:100px;
            left: 60px;
            cursor: pointer;
        }
        .picture2{
            position: relative;
            top: -473px;
        }
        .shadow{
            margin: 0 auto;
            width: 1400px;
            height: 100px;
            background: #EDEFF1;
        }
        .btn2{
            position: relative;
            left: 1035px;
            z-index: 1;
            cursor: pointer;
        }
        .btn3{
            transform: rotate(180deg);
            position: relative;
            left: 300px;
            z-index: 1;
            cursor: pointer;
        }
        .back1{
            width: 750px;
            height: 150px;
            background: rgba(0,0,0,0.5);
            position: relative;
            top: 318px;
            left: -48px;
        }
        .round{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid white;
            position: relative;
            top:45px;
            left: 40px;
            cursor: pointer;
        }
        .circle1
        {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: white;
            position: relative;
            top:13px;
            left: 12px;
        }
        .circle2
        {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: white;
            position: relative;
            top:-3px;
            left: 24px;
        }
        .circle3{
            width: 16px;
            height: 16px;
            transform: rotateZ(45deg);
            background-color: white;
            position: relative;
            top:-13px;
            left: 18px;
        }
        .word7{
            color: white;
            font-size: 30px;
            position: relative;
            left: 120px;
        }
        .round1{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid white;
            position: relative;
            top:-52px;
            left: 200px;
            cursor: pointer;
        }
        .tuo{
            width: 40px;
            height: 20px;
            background: white;
            border-radius: 20px/10px;
            position: relative;
            top:14px;
            left: 4px;
            font-size: 20px;
            text-align: center;
            line-height: 10px;
        }
        .word8{
            font-size: 20px;
            color: white;
            position: relative;
            top:-100px;
            left:500px;
        }
        .word9{
            font-size: 16px;
            color: #FF9100;
            position: relative;
            top:-75px;
            left:371px;
        }
        .shadow1{
            position: relative;
            top:-4px;
            left: 562px;
        }
        .word10{
            width: 1400px;
            height:400px;
            margin: 100px auto;
        }
        .word11{
            font-size: 40px;
            text-align: center;
        }
        .word12{
            margin-top:30px;
            font-size: 19px;
            color: #A9A9A9;
            text-align: center;
        }
        .line{
            width: 400px;
            height: 3px;
            background: #FF9408;
            margin: 50px auto;
        }
        .btn4{
            width: 450px;
            height: 200px;
            margin: -100px auto;
        }
        .btn4 li{
            width: 140px;
            height: 50px;
            border: 1px solid #A9A9A9;
            float: left;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }
        .word13{
            background: #FF9408;
            color: white;
        }
        .box3{
            width: 1400px;
            height: 600px;
            margin: 0 auto;
        }
        .picture3-1{
            width: 400px;
            height: 300px;
            border: 5px solid white;
            position: relative;
            top: 0px;
            left:0px;
            overflow: hidden;
        }
        .picture3-2{
            width: 350px;
            height: 223px;
            border: 5px solid white;
            position: relative;
            top: 0px;
            left:0px;
            overflow: hidden;
        }
        .box3-1{
            width: 389px;
            height: 233px;
            border:1px solid #A9A9A9;
        }
        .box3-2{
            width: 361px;
            height: 233px;
            border:1px solid #A9A9A9;
            position: relative;
            top: -190px;
            left: 23px;
        }
        .word14{
            width: 800px;
            height: 400px;
            position: relative;
            top:-478px;
            left: 580px;
        }
        .word15{
            font-size: 30px;
        }
        .word16{
            margin-top: 10px;
            color: #FF9408;
        }
        .word17{
            font-size: 19px;
            color: #A9A9A9;
            margin-top: 10px;
        }
        .word18{
            color: #00BDFF;
            font-size: 19px;
            margin-left: 5px;
        }
        .back2{
            width: 1400px;
            height: 750px;
            background: url("images/Get-bg.jpg") no-repeat;
            margin: -200px auto;
        }
        .word19{
            width: 1400px;
            height:400px;
            position: relative;
            top:50px;
        }
        .word20{
            font-size: 40px;
            text-align: center;
            color:white;
        }
        .picture4{
            width: 1400px;
            height: 400px;
            position: relative;
            top:-83px;
            display: flex;
            justify-content: space-around;
        }
       .picture4-1{
           width: 245px;
           height: 387px;
           background: url("images/Development-bg.jpg") no-repeat;
           cursor: pointer;
       }

        .picture4-11{
            width: 125px;
            height: 125px;
            background: url("images/Development-cn.png") no-repeat;
            position: relative;
            top:50px;
            left: 60px;
        }
        .picture4-10{
            position: relative;
            top:-96px;
            left: 60px;
            display: none;
        }
        .picture4-1:hover .picture4-10{
            display: block;
        }
        .picture4-1:hover .word21{
            color:white;
        }

        .word21{
            color:#02A6E2;
            position: relative;
            top:70px;
            left: 65px;
        }
        .picture4-2{
            width: 245px;
            height: 387px;
            background: url("images/desgin-bg.jpg") no-repeat;
            cursor: pointer;
        }
        .picture4-2:hover .picture4-10{
            display: block;
        }
        .picture4-2:hover .word22{
            color:white;
        }
        .picture4-22{
            width: 125px;
            height: 125px;
            background: url("images/desgin-icn.png") no-repeat;
            position: relative;
            top:50px;
            left: 60px;
        }
        .word22{
            color:#FFAB3F;
            position: relative;
            top:70px;
            left: 92px;
        }
        .picture4-3{
               width: 245px;
               height: 387px;
               background: url("images/concept-bg.jpg") no-repeat;
               cursor: pointer;
           }
        .picture4-3:hover .picture4-10{
            display: block;
        }
        .picture4-3:hover .word23{
            color:white;
        }
        .picture4-33{
            width: 125px;
            height: 125px;
            background: url("images/concept-icn.png") no-repeat;
            position: relative;
            top:50px;
            left: 60px;
        }
        .word23{
            color:#AA362B;
            position: relative;
            top:70px;
            left: 88px;
        }
        .picture4-4{
            width: 245px;
            height: 387px;
            background: url("images/systam-bg.jpg") no-repeat;
            cursor: pointer;
        }
        .picture4-4:hover .picture4-10{
            display: block;
        }
        .picture4-4:hover .word24{
            color:white;
        }
        .picture4-44{
            width: 125px;
            height: 125px;
            background: url("images/systam-icn.png") no-repeat;
            position: relative;
            top:50px;
            left: 60px;
        }
        .word24{
            color:#5E5F61;
            position: relative;
            top:70px;
            left: 90px;
        }

        .box4{
            width: 1400px;
            height:230px;
            margin: 250px auto;
           position: relative;
            top:60px;
        }
        .box6{
            width: 1400px;
            height: 1200px;
            background: #ECECEC;
            margin: -250px auto;
        }
        .box5{
            width: 1350px;
            height: 600px;
            margin: -120px auto;

        }
        .box5 li{
            float: left;
        }
        .li1{
            width: 150px;
            height: 200px;
            background: #FF9408;
        }
        .li1 p{
            transform: rotate(270deg);
            font-size: 50px;
            position: relative;
            top:60px;
        }
        ul:hover .li1{
            background: #2D2D2D;
            color: white;
            cursor: pointer;
        }
        .li2{
            width: 200px;
            height: 200px;
            background: #2D2D2D;
            font-size: 50px;
            color: #FF9C05;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        ul:hover .li2{
            background: #FF9408;
            color: white;
            cursor: pointer;
        }
        .li3{
            width: 200px;
            height: 200px;
            background: white;
            font-size: 22px;
            color: #8A8A8A;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        ul:hover .li3{
            background: #2D2D2D;
            color: white;
            cursor: pointer;
        }
        .li3 div{
            width: 200px;
            height: 80px;
            border-right: 1px solid #8A8A8A;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        .word25{
            color: white;
            font-size: 30px;
        }
        .ul2{
            position: relative;
            top:50px;
        }
        .ul3{
            position: relative;
            top:100px;
        }
        .back3{
            width: 1400px;
            height: 1000px;
            margin: 250px auto;
            background: url("images/Services-bg.jpg") no-repeat;
        }
        .word26{
            font-size: 40px;
            font-weight: bold;
            color: white;
            text-align: center;
        }
        .picture5{
            width: 1400px;
            height: 600px;
            overflow: hidden;
            margin-top: -160px;
        }
        .picture5 img{
            width: 1400px;
            margin-top: -50px;
        }
        .back4{
            width: 1400px;
            height: 869px;
            margin: -340px auto;
            background: url("images/Services-bg.jpg") no-repeat;
        }
        .box7{
            width: 700px;
            height: 750px;
            position: relative;
            top: 60px;
            left: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        .btn5{
            width: 500px;
            height: 60px;
            color: #5A5A5A;
            font-size: 40px;
        }
        .btn6{
            width: 500px;
            height: 150px;
            font-size: 40px;
            color: #5A5A5A;
        }
        .btn7{
            width: 500px;
            height: 60px;
            font-size: 20px;
            background: #E2850A;
            cursor: pointer;
            color:white;
            font-weight: bold;
            text-align: center;
        }
        .box8{
            width: 600px;
            height: 750px;
            position: relative;
            top:-685px;
            left: 700px;
        }
        .word27{
            font-size: 65px;
            color:#FF9200;
            position: relative;
            top:24px;
        }
        .picture6{
            position: relative;
            top:135px;
            width: 50px;
        }
        .word28{
            font-size: 21px;
            color: white;
            position: relative;
            top:84px;
            left: 108px;
        }
        .picture7{
            position: relative;
            top:195px;
            left: 0px;
            width: 50px;
        }
        .picture8{
            position: relative;
            top:195px;
            left: 35px;
            width: 50px;
        }
        .picture9{
            position: relative;
            top:195px;
            left: 70px;
            width: 50px;
        }
        .box9{
            width: 1400px;
            height: 30px;
            font-size: 20px;
            background: rgba(0,0,0,0.5);
            text-align: center;
            position: relative;
            top:337px;
            left: -700px;
        }

        .picture1{
            position: absolute;
            top:0px;
            left: -48px;
            transition: 4s;
        }
        .picture2{
            position: absolute;
            top:0px;
            left: -48px;
            transition: 4s;
            opacity: 0;
        }
    </style>
</head>
<body>
     <div class="background1">
         <div class="title">
             <b class="word1">NO</b>
             <b class="word2">VEM</b>
             <b class="word1">BER</b>
             <ul class="btn0">
                 <li>Contact</li>
                 <li>Pricing</li>
                 <li>Services</li>
                 <li>About</li>
                 <li class="word3">Home</li>
             </ul>
         </div>

         <div class="box1">
             <b class="word4">RESPONSIVE</b>
             <p class="word5">MOBILE FRIENDLY</p>
             <p class="word6">November is a professional website template<br>
                 that is responsive and mobile friendly for any<br>
                 device.This template is provided by<br />
                 templatemo.com</p>
             <input type="button" value=" MORE DETAILS" class="btn1">
             <img class="btn2" src="images/next-arrow.png">
             <img class="btn3" src="images/next-arrow.png">
         </div>
         <div class="box2">
             <img class="picture1" src="images/Slider-img1.jpg" >
             <img class="picture2" src="images/Slider-img2.jpg" >
             <div class="back1">
                 <div class="round">
                     <div class="circle1"></div>
                     <div class="circle2"></div>
                     <div class="circle3"></div>
                 </div>
                 <span class="word7">700</span>
                 <div class="round1">
                     <div class="tuo">....</div>
                 </div>
                 <span class="word8">LOREM QUIS BIBENDUM</span>
                 <span class="word9">Necagittis Nibel</span>
             </div>

         </div>
     </div>
     <div class="shadow">
        <img src="images/Shadow-img.png" class="shadow1">
     </div>
     <div class="word10">
         <p class="word11">ABOUT US</p>
         <p class="word12">Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis
             sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a
         </p>
         <p class="word12">sit</p>
         <p class="word12">amet mauris. Morbi accumsan lpsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
        <div class="line"></div>
     </div>
     <ul class="btn4">
         <li class="word13">MISION</li>
         <li>VISION</li>
         <li>SPONSORS</li>
     </ul>
     <div class="box3">
       <div class="picture3">
           <div class="box3-1"><div class="picture3-1"><img src="images/about-img2.jpg"></div></div>
           <div class="box3-2"><div class="picture3-2"><img src="images/about-img1.jpg"></div></div>
       </div>
         <div class="word14">
            <p class="word15">SED AC URNASIT AMET LOREM</p>
             <p class="word16">TACITI SOCIOSQU AD LITORA TORQUENT PERCONUBIA</p>
             <p class="word17">November is free HTML CSS website template from<span class="word18">templatemo</span>
                 andyou can download and use it for any purpose. Lorerm ipsum dolor sit
                 amet, consectetur adipiscing elit. Nullam elit nunc, porta commodo
                 euismod eu, fermentum a neque. Fusce scelerisque tincidunt auctor.
                 Integer varius ullamcorper interdum.</p>
             <br>
             <p class="word17"> Phasellus pretium elementum rhoncus. Aenean sit amet odio eu ante
                 volutpat rutrum. Vestibulum ullamcorper faucibus orci, in blandit massa
                 fringilla at. Nulla in fermentum eros. Suspendisse vitae aliquam metus.
             </p>
         </div>
     </div>
     <div class="back2">
         <div class="word19">
             <p class="word20">OUR SERVICES</p>
             <p class="word12">Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.
                 Sed non mauris vitae erat consequat auctor eu in elit. Class aptent</p>
             <p class="word12">taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
             <div class="line"></div>
         </div>
         <div class="picture4">
             <div class="picture4-1" name="picture0">
                 <div class="picture4-11"></div>
                 <p class="word21">DEVELOPMENT</p>
                 <img src="images/Develop-hover-icn.png" class="picture4-10">
             </div>
             <div class="picture4-2"  name="picture0">
                 <div class="picture4-22"></div>
                 <p class="word22">DESIGE</p>
                 <img src="images/desgin-hover-icn.png" class="picture4-10">
             </div>
             <div class="picture4-3"  name="picture0">
                 <div class="picture4-33"></div>
                 <p class="word23">CONCEPT</p>
                 <img src="images/concept-hover-icn.png" class="picture4-10">
             </div>
             <div class="picture4-4"  name="picture0">
                 <div class="picture4-44"></div>
                 <p class="word24">SYSTEM</p>
                 <img src="images/systam-hover-icn.png" class="picture4-10">
             </div>
         </div>
     </div>
     <div class="box6">
     <div class="box4">
         <p class="word11">PRICING</p>
         <p class="word12">All plans come with unlimited disk space. Our support can be as quick
             as 15 minutes to get a response. Sed non</p>
         <p class="word12">mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu.</p>
         <div class="line"></div>
     </div>
     <div class="box5">
         <ul><li class="li1"><p>BASIC</p></li>
             <li class="li2"><p>$27.5</p></li>
             <li class="li3"><div><p>2,000GB</p><p>BAND WIDTH</p></div></li>
             <li class="li3"><div><p>32GB</p><p>MEMORY</p></div></li>
             <li class="li3"><div><p>SUPPORT</p><p>24 HOURS</p></div></li>
             <li class="li3"><div><p>UPDATE</p><p>$20</p></div></li>
             <li class="li2"><p class="word25">ORDER NOW</p></li>
         </ul>
         <ul class="ul2"><li class="li1"><p>BIZ</p></li>
             <li class="li2"><p>$44.50</p></li>
             <li class="li3"><div><p>5,500GB</p><p>BAND WIDTH</p></div></li>
             <li class="li3"><div><p>64GB</p><p>MEMORY</p></div></li>
             <li class="li3"><div><p>SUPPORT</p><p>1 HOURS</p></div></li>
             <li class="li3"><div><p>UPDATE</p><p>$10</p></div></li>
             <li class="li2"><p class="word25">ORDER NOW</p></li>
         </ul>
         <ul class="ul3"><li class="li1"><p>PRO</p></li>
             <li class="li2"><p>$72.50</p></li>
             <li class="li3"><div><p>12,000GB</p><p>BAND WIDTH</p></div></li>
             <li class="li3"><div><p>128GB</p><p>MEMORY</p></div></li>
             <li class="li3"><div><p>SUPPORT</p><p>15 MINS</p></div></li>
             <li class="li3"><div><p>UPDATE</p><p>FREE</p></div></li>
             <li class="li2"><p class="word25">ORDER NOW</p></li>
         </ul>
    </div>
     </div>
     <div class="back3">
         <div class="box4">
             <p class="word26">CONTACT US</p>
             <p class="word12">Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum
                 fermentum nunc. Etiam pharetra, erat sed fermentum</p>
             <p class="word12">feugiat velit mauris egestas quamut aliquam massa nisl quis neque. Suspendisse in orci enim.</p>
             <div class="line"></div>
         </div>
         <div class="picture5"><img src="images/cont.jpg"></div>
     </div>
     <div class="back4">
         <div class="box7">
             <input type="text" placeholder="NAME" class="btn5">
             <input type="text" placeholder="EMAIL" class="btn5">
             <input type="text" placeholder="TITLE" class="btn5">
             <input type="text" placeholder="MESSAGE" class="btn6">
             <input type="button" value="SEND" class="btn7">
         </div>
         <div class="box8">
            <p class="word27">GET IN TOUCH!</p>
             <img src="images/location-icn.png" class="picture6">
             <p class="word28">990 Proin Gravida Street, Aliquet Snean Tate, </p>
             <p class="word28">Lincoln Way, San Francisco, California.</p>
             <img src="images/phone-icn.png" class="picture6">
             <p class="word28">(+001)001 002 0034,(+002)009 008 0760 </p>
             <p class="word28">(+003)456 050 0670</p>
             <img src="images/mail-icn.png" class="picture6">
             <p class="word28">info@november.com </p>
             <img src="images/facebook-icn.png" class="picture7">
             <img src="images/twitter-icn.png" class="picture8">
             <img src="images/google-plus-icn.png" class="picture9">
             <div class="box9">Copyright ㉢ 2018.Company name AlI rights reserved.网页模版</div>
         </div>
     </div>
<script>
  window.οnlοad=function () {
      var li = document.getElementsByClassName("btn0")[0].getElementsByTagName("li")
      var li2 = document.getElementsByClassName("btn4")[0].getElementsByTagName("li")
      var picture0 = document.getElementsByName("picture0")
      var picture10 = document.getElementsByClassName("picture4-10")[0]
      var picture1 = document.getElementsByClassName("picture1")[0]
      var picture2 = document.getElementsByClassName("picture2")[0]
      var btn2 = document.getElementsByClassName("btn2")[0]
      var btn3 = document.getElementsByClassName("btn3")[0]
      var box2 = document.getElementsByClassName("box2")[0]
      var num = 0;

      for (var j = 0; j < li.length; j++) {
          li[j].index = j;
          li[j].onmouseover = function () {
              for (var i = 0; i < li.length; i++) {
                  li[i].className = "";
              }
              li[this.index].className = "word3"
          }

      }
      for (var j = 0; j < li2.length; j++) {
          li2[j].index = j;
          li2[j].onmouseover = function () {
              for (var i = 0; i < li2.length; i++) {
                  li2[i].className = "";
              }
              li2[this.index].className = "word13"
          }

      }
//
      function fun() {

          if (num == 0) {
              picture1.style.opacity = 0;
              picture2.style.opacity = 1;
              num++
          }
          else if (num == 1) {
              picture1.style.opacity = 1;
              picture2.style.opacity = 0;
              num--
          }
      }
      box2.οnmοuseοver=function(){
          clearInterval(time);
      }
      btn2.οnmοuseοver=function(){
          clearInterval(time);
      }
      btn2.οnmοuseοut=function () {
          time=setInterval(fun, 4000);
      }
      btn3.οnmοuseοver=function(){
          clearInterval(time);
      }
      btn3.οnmοuseοut=function () {
          time=setInterval(fun, 4000);
      }
      box2.οnmοuseοut=function () {
          time=setInterval(fun, 4000);
      }
      var time=setInterval(fun, 4000);

      btn2.οnclick=function () {
          num = num + 1;
          if (num == 2) {
              picture1.style.opacity = 1;
              picture2.style.opacity = 0;
              num = num - 2;
          }else{
              picture1.style.opacity = 0;
              picture2.style.opacity = 1;
          }


      }
      btn3.οnclick=function () {
          num = num - 1;
          if (num == 0) {
              picture1.style.opacity = 1;
              picture2.style.opacity = 0;

          }
          else {
              picture1.style.opacity = 0;
              picture2.style.opacity = 1;
              num = num + 2;
          }
      }
  }
</script>
</body>
</html>

moonlight201868
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
制作一个简单HTML传统端午节日网页（HTML+CSS）7页 带报告
qq_524614081的博客
11-24 1268
⛵✈网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 传统春节网页设计 | 圣诞节节日发展 | 中秋 | 端午传统节日习俗庆祝 | 地区特色 | 网站模板 | 等网站的设计与制 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
HTML5+CSS大作业——“传统节日--端午节(9页)
12-01 1215
HTML5+CSS大作业——"传统节日–端午节(9页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多源码 ????HT
端午节经典祝福网页源代码
03-18
2012年端午节即将到来，草根文学网特奉上端午节个性祝福网页，供广大站长朋友下载使用。网页可以用自己的名字给亲朋好友发送个性祝福，可在端午节期间提高网站流量，快让你的网站也加入吧！没有数据库，纯html，下载到本地或上传到网站空间即可使用，非常方便
制作一个简单HTML传统端午节日网页（HTML+CSS）
VX_WJ88950106的博客
05-26 419
🏮传统春节网页设计、🎅圣诞节节日发展、🥮中秋、端午传统节日习俗庆祝、🎏地区特色，网站模板 、等网站的设计与制作。🏷️ 大学生传统节日网页作业成品采用DIV CSS布局制作，主要内容包括等内容，作品共多个页面，学生HTML静态网页基础水平制作，页面排版干净简洁。网页技术方面应用包括网页背景颜色、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网
关于端午节的网页设计HTML,2017端午节祝福
weixin_42097668的博客
06-10 1225
2017端午节祝福网页生成器是一款可以用来制作端午节祝福网页的工具，简单好用，可以将你的端午祝福制作成网页，发送给好友，满满的祝福，欢迎来使用！2017端午节祝福网页制作方法1、点击下载链接，进入制作页面2、拉倒页面最下方，输入你的名字3、点击提交即可生成网页！端午节祝福语1、粽子香香，引来好一切美好。龙舟划划，赶走所有烦恼。大家齐聚，共度欢乐时刻。快乐日子，祝福多多，愿你端午节快乐，好运粽在身边...
用代码来过端午节---基于HTML的端午节划龙舟小游戏
优秀的程序员不应该是CRUD
06-03 3411
作为程序员，虽然可能并没有机会去实时实地滴去试一试划龙舟，但我们还是得发挥一下我们的技术，就来简单的做一个基于HTML+CSS+JS的划龙舟小游戏吧。说干就干！ css代码 js代码 二、运行一下吧 我们可以通过键盘操作龙舟左右移动，躲避障碍物，最后计算出碰撞前的最后得分。很简单的一个html小游戏,直接复制代码，运行一下试试看吧！...
端午节经典个性祝福网页源代码
06-08
采用PHP+DIV+CSS+JS技术模式设计，兼容多款浏览器，访问速度快，页面设计精美大气；PHP程序源代码简洁，无任何加密内容，自带新浪微博、腾讯微博、QQ空间、朋友网等收藏分享功能，浏览者可自定义个性祝福页面，用...
2014年端午节祝福网页源码 v2.0
10-06
【端午节祝福网页源码详解】 端午节是中国的传统节日，具有深厚的文化底蕴，人们通过各种方式来表达对亲朋好友的祝福。2014年的端午节，叶天冬SEO博客分享了一款特别的祝福方式——端午节祝福网页源码 v2.0。这款...
2013年端午节祝福网页源代码
05-18
摘要:PHP源码,游戏娱乐,祝福网页　2013年端午节个性祝福网页源代码，采用PHP+DIV+CSS+JS技术模式设计，兼容多款浏览器，访问速度快，页面设计精美大气；PHP程序源代码简洁，无任何加密内容，自带新浪微博、腾讯微博...
端午节网页介绍展示+前端+HTML+CSS
06-11
针对2021年端午节，学校网页制作赛的一个介绍端午节习俗以及来源的页面可以分为三个主要部分：首页、端午习俗页和端午由来。 首页是访问者的第一印象，应该简洁明了，同时能够吸引用户深入了解端午节。以下是首页...
【网页设计大作业】：端午主题（HTML+CSS+JavaScript）——中国传统文化（6页）
衍生星球的博客
06-09 2236
设计一个简单的端午网页
css样式--百度端午龙舟
08-18
css css样式--百度端午龙舟 百度logo,动态显示，人船同步显示。
canvas端午节小游戏
08-25
canvas端午节小游戏
web网页设计实例作业 ：酒业网站设计——土王酒业(7页)带轮播特效 HTML+CSS+JavaScript HTML5期末大作业...
qq_365392777
10-18 2020
常见网页设计作业题材有 ​​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​ 等网页设计题目, ​​A...
【网页制作-端午】html+css制作关于节日端午的网页（5页面）
赏樱看雪撸代码
12-20 1095
节日主题网页制作，table布局，CSS+DIV布局，期末网页大作业，网页作业成品，web前端源码实例，如何制作网页，网页设计思路，如何从零开始制作web页面。
如何制作传统节日网站（纯HTML代码）
STU网页设计
11-10 546
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
端午节html游戏,html5端午节数粽子游戏代码
weixin_39713538的博客
05-31 1246
【实例简介】【实例截图】【核心代码】数粽赢大礼过端午——盐龙网var GID = "shuqian";var SCORE_LIMIT = 600000;var APP_LIST_URL = 'http://1251002861.cdn.myqcloud.com/1251002861/index.html';html,body,canvas {margin: 0px;padding: 0px;bor...
HTML期末大作业~ 端午节节日7页面 ~学生网页设计作业源码(HTML+CSS+JS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-08 8662
HTML期末大作业~ 端午节节日7页面 ~学生网页设计作业源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页
端午节html网页制作
最新发布
06-12
端午节HTML网页制作主要是为了在线展示端午节的文化氛围和活动，你可以通过以下几个步骤来创建： 1. **网页布局设计**： - 使用HTML5框架（如Bootstrap）或自定义CSS来规划页面布局，包括标题、导航栏、主要内容...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值