【简洁易懂精品贴】html5 网页课程设计（三）

最新推荐文章于 2021-11-05 22:53:08 发布

北溟南风起

最新推荐文章于 2021-11-05 22:53:08 发布

阅读量2k

点赞数 7

本文链接：https://blog.csdn.net/QQQZSJ/article/details/93132306

版权

作品源代码

由于没有分块仔细讲解作品各部分源代码的具体功能，仅供大家进行代码运行及作品效果欣赏。希望有机会看到、用到粗部分代码的朋友，能自主相关理论知识，提高自己，而不仅仅是代码的拷贝，对自己好点！

由于水平有限，部分功能的实现未采用最优程序，希望有识之士批评指正，共同提高，在此谢过。

代码比较长：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

/*诗句展示模块*/
#poem{
        opacity:0.55;
    position:fixed;
         top:45%;
        left:7%;
        width: 500px;
        height: 300px;
        margin: 0 auto;
        text-align: center;
        color: white;
        font-size: 40px;
 
         }



p{ 
    font-size:30px;
    color:yellow;
    top:1%;
    left:2%;
    position:fixed;
}
b{

    border-radius: 80%;
    background: #8AC007;
    padding: 20px; 
    width: 300px;
    height: 45px;
    opacity:0.55;
    background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); 
    background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); 
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    font-size: 30px;
    color:white;
    top:2%;
    right:5%;
    position:fixed;
}

.marquee {
        opacity:0.65;
          
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
            animation: marquee 25s linear 50ms infinite normal; 

            /*字母外框*/
            border-radius: 25px;
            background: #8AC007;
            padding: 2px; 
            width: 800px;
            height: 50px; 
        }
        .marquee:hover {
            animation-play-state: paused
        }

        /* Make it move */
        @keyframes marquee {
            0%   { text-indent: 27.5em }
            100% { text-indent: -105em }
        }

        /* Make it pretty */
        .View {
            padding-left: 1.5em;
      
        }
        .View:before, .View::before {
            z-index: 2;
            content: '';
            position: absolute;
            top: -1em; left: -1em;
            width: .5em; height: .5em;
        }
        .View:after, .View::after {
            z-index: 1;
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 2em; height: 2em;
        }




/*背景图自动轮播模块*/
        *{
            margin: 0;
            padding: 0
        }
        .div{

            width: 1530px;
            height:780px;
            background-repeat: no-repeat;
            background-image: url("images/a.jpg");
            animation:frams 15s infinite;
        }
        @keyframes frams {
            0%{
                background-image: url("images/a.jpg");background-size: 1530px 780px;background-repeat: no-repeat
            }
            33%{
                background-image: url("images/b.jpg");background-size: 1530px 780px;background-repeat: no-repeat
            }
            66%{
                background-image: url("images/c.jpg");background-size: 1530px 780px;background-repeat: no-repeat
            }
            100%{
                background-image: url("images/d.jpg");background-size: 1530px 780px;background-repeat: no-repeat
            }
        }



 /*下拉菜单模块*/


    #a1{width: 34%;height: 700px;background: #453;float:left;margin-right:5px;}
    #a2{width: 35%;height: 700px;background: purple;float:left;}
    nav{position:absolute;left:150px;top:85px;}
    ul{list-style:none;}
    ul li{float:left;}
    ul li a{    
    opacity:0.55; 
            text-decoration:none;
            background: #0f9;
            height:40px;
            line-height: 40px;
            display:block;
            margin-right:1px;
            padding:0px 10px;
     }
     /*控制二级菜单*/
     ul li a:hover{background:magenta;}
     ul li ul li{margin-left:1px;clear:left;position:relative;width:100px;}
     ul li ul{display:none;}
     ul li:hover ul{display: block;}
     /*控制三级菜单*/
     ul li ul li a:hover{background:pink;}
     ul li ul li ul{position:absolute;left:100%;top:0px;}
     ul li ul li ul li{clear:left;width:110px;}
     ul li:hover ul li ul{display:none;}
     ul li ul li:hover ul{display:block;}

/*用户信息录入*/
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 400px;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

/*控制登录块结构*/
#div1 {
    opacity:0.55;
  position:fixed;
  top:35%;
  left:55%;
  width:400px;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}



    </style>
</head>

<body>

<div class="div"></div>
<body>
    <header class="header-sky">
        <!-- 下拉菜单具体内容 -->
        <nav>
            <ul>
                <li><a href="#">网站首页</a></li>
                <li><a href="#">神仙居概览</a>
                  <ul>
                         <li><a href="" >景区概况</a></li>
                         <li><a href="" >景点介绍</a></li>
                         <li><a href="" >景区文化</a>
                            <ul>
                                 <li><a href="" >诗意神仙居</a></li>
                                 <li><a href="" >旅游＋</a></li>
                                 <li><a href="" >天姥山文化</a></li>
                                
                            </ul>
                         </li>
                    </ul>
                </li>
                <li><a href="#">新闻中心</a>
                    <ul>
                         <li><a href="" >景区公告</a></li>
                         <li><a href="" >景区资讯</a></li>
                         <li><a href="" >精彩活动</a></li>
                    </ul>
                </li>
                <li><a href="#">神仙居风光</a>
                    <ul>
                        <li><a href="">主题视频</a></li>
                        <li><a href="">主题照片</a>
                            <ul>
                                 <li><a href="" >景区照片</a></li>
                                 <li><a href="" >活动照片</a></li>
                            </ul>
                        </li>
                        <li><a href="">虚拟旅游</a>
                        <ul>
                            <li><a href="" >网上导览图</a></li>
                            <li><a href="" >电子地图</a></li>
                            <li><a href="" >VR全景</a></li>
                  
                         
                        </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">玩转景区</a>
                    <ul>
                      <li><a href="" >舌尖美食</a></li>
                      <li><a href="" >酒店住宿</a></li>
                      <li><a href="" >交通指南</a></li>
                      <li><a href="" >地图导航</a></li>
                      <li><a href="" >景区停车</a></li>
        
                     
                    </ul>
                </li>
                <li><a href="#">电子商务</a>
                    <ul>
                       <li><a href="" >门票预订</a></li>
                       <li><a href="" >酒店预订</a></li>
                       <li><a href="" >团队预订</a></li>  
                    </ul>
                </li>

                <li><a href="#">服务中心</a>
                    <ul>
                        <li><a href="" >票务信息</a></li>
                        <li><a href="" >导游预约</a></li>
                        <li><a href="" >历史客流</a></li>
                        <li><a href="" >客流预测</a></li>
                        <li><a href="" >常见问答</a></li>
                        <li><a href="" >在线互动</a></li>
                        <li><a href="" >微博直播</a></li>
                        <li><a href="" >投诉建议</a></li>                   
                    </ul>
                </li>
                <li><a href="#">政务公开</a>
                    <ul>
                        <li><a href="">试点专栏</a></li>
                        <li><a href="">提升亮点</a></li>
                        <li><a href="">政务资讯</a></li>
                        <li><a href="">领导介绍</a></li>
                        <li><a href="">职能机构</a></li>
                     </ul>
                </li>

<b>祝您开心愉快心情好!</b>

<div></div>
<p class="View marquee">美景如画网，欢迎您！ Welcome to the Net Of Great View! 今天最高气温36摄氏度，出门请谨防紫外线，记得护肤噢！我们公司全体工作人员，祝您新的一天好心情 Have a good time! </p>



<!--诗句展示模块-->
<div id="poem">
          入若耶溪<br/><br/>
          艅艎何泛泛，空水共悠悠。<br/>
          阴霞生远岫，阳景逐回流。<br/>
          蝉噪林逾静，鸟鸣山更幽。<br/>
      此地动归念，长年悲倦游。<br/>
    </div>

<!--用户登录模块-->
<div id="div1">
  <form action="#">
    <label for="fname">您的姓名</label>
    <input type="text" id="fname" name="姓名" placeholder="请在这里输入姓名">

    <label for="lname">联系方式</label>
    <input type="text" id="lname" name="联系方式" placeholder="请在这里输入电话">

    <label for="country">所在城市</label>
    <select id="country" name="城市">
      <option value="australia">北京</option>
      <option value="canada">西雅图</option>
      <option value="usa">迪拜</option>
      <option value="vv">...</option>
    </select>
  
    <input type="submit" value="注册 \ 登录">



<!--音乐-->
<audio controls>
  <source src="audio/chuanshao.ogg" type="audio/ogg">
  <source src="audio/chuanshao.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

</body>
</html>