TypechoJoeTheme

代码屋

统计
登录
用户名
密码
/
注册
用户名
邮箱

代码屋

拼一个春夏秋冬|赢一个无悔人生
类目归类
Web

HTML+Css+JavaScript旅游作业

2020-12-11
/
0 评论
/
184 阅读
/
正在检测是否收录...
12/11

采用了HTML+Css+JavaScript

效果图

部分代码

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>四川旅游</title>
        <link type="text/css" rel="styleSheet" href="css/main.css" />
    </head>
    <body>

        <div class="logo">
            <img src="img/logo.png" />
        </div>

        <div class="daohang">
            <ul>
                <li><a href="#" id="a">首页</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="dengji.html">登记旅游</a></li>
                
            </ul>
        </div>

        <div class="max">
            <div class="Nai">
                <div class="img">
                    <img src="img/zs.jpg">
                    <div>
                        <div class="wz">
                            <ul>
                                <li><span>旅游咨询</span> <a href="#" id="GD">>>更多</a></li>
                                <hr style="margin-left: -30px;">
                                <li><a href="#">松花江采冰号子刚刚唱响 哈尔滨冰雪已经</a> <b>[12-08]</b></li>
                                <li><a href="#">2020战马四川大学生创新营销大赛·年</a> <b>[12-08]</b> </li>
                                <li><a href="#">美丽乡村建设文化创意产业 高级人才培训 </a> <b>[12-07]</b></li>
                                <li><a href="#">厉害了!达古冰川又上央视,全国人都想打</a> <b>[12-07]</b></li>
                                <li><a href="#">迎来20万!游客量不断暴涨,寒冷冬季达 </a><b> [12-03]</b></li>
                                <li><a href="#">2020钓鱼城旅游文化节启幕 成渝双城 </a> <b>[12-02]</b></li>
                                <li><a href="#">2020四川冰雪和温泉旅游节熊猫邀你去 </a> <b>[11-29]</b></li>
                                <li><a href="#">冬游桂林推介会亮相第八届成都国际旅游展 </a><b> [11-27]</b></li>
                                <li><a href="#">泰国国家旅游局精彩亮相第八届成都国际旅</a> <b>[11-26]</b></li>
                            </ul>
                        </div>
                    </div>

                    <div class="jq">
                        <h2>景区 · 酒店</h2>
                    </div>
                    <div class="tj">
                        <img src="img/jx.jpg">

                        <table border="0">
                            <tr>
                                <td id="td_1">都江堰</td>
                                <td id="td_2">牟尼沟</td>
                            </tr>
                            <tr>
                                <td id="td_3">古蔺旅游</td>
                                <td id="td_4">西岭雪山</td>
                            </tr>
                            <tr>
                                <td id="td_5">武胜旅游</td>
                                <td id="td_6">赤水旅游</td>
                            </tr>
                            <tr>
                                <td id="td_7">重庆武隆</td>
                                <td id="td_8">七里坪</td>
                            </tr>
                        </table>

                    </div>

                    <div class="tp">
                        <a href="#"><img src="img/1.jpg" /></a>
                        <a href="#"> <img src="img/2.jpg" /></a>
                        <a href="#"><img src="img/3.jpg" /></a>
                    </div>
                    <div class="ts">
                        <a href="#"><img src="img/4.jpg" /></a>
                        <a href="#"><img src="img/5.jpg" /></a>
                    </div>

                    <div class="ta">
                        <img src="img/am3.jpg">
                    </div>

                </div>

                <div class="footer">
                    <a href="#">Copyright &copy; 2020  版权所属:代码屋</a>
                </div>
    </body>
</html>

Css

        * {
                margin: 0 auto;
                list-style: none;
                text-decoration: none;

            }
            .max{
            margin-left: 5%;
        }
            .logo {
                margin-left: 10%;
                height: 100px;
                
            }

            .daohang {
                width: 100%;
                height: 53px;
                background-color: deepskyblue;
            }

            .daohang ul li {
                float: left;
                height: 50px;
            }

            .daohang ul {
                padding-left: 14.5%;

            }

            #a {
                padding-top: 11px;
                background-color: seagreen;
                border-top-style: solid;
                border-top-color: maroon;
                color: black;

            }

            .daohang ul li a {
                color: white;
                display: block;
                text-align: center;
                padding: 12px 55px;
                font-size: 20px;


            }

            .daohang ul li a:hover {
                background-color: seagreen;
                color: black;
                border-top-style: solid;
                border-top-color: maroon;
            }

            .Nai {
                width: 1400px;
                height: 360px;
                margin-left: 10%;
                margin-top: 5px;

            }

        

            .wz {
                width: 500px;
                border: 1px solid;
                border-top-color: #00BFFF;
                margin-left: 60%;
                margin-top: -26%;
                border-top: 4px solid #00BFFF;


            }

            .wz ul li {
                padding: 7.3px;
                margin-left: -35px;

            }

            #GD {
                float: right;
            }

            .wz ul li b {
                float: right;
            }

            .wz ul li a {
                color: black;
            }

            #GD:hover {
                color: #00BFFF;
            }

            .wz ul li span {
                font-weight: 900;
            }

            .wz ul li a:hover {
                color: #00BFFF;
                padding-left: 20px;
            }

            .jq h2 {
                color: #00BFFF;
                letter-spacing: 2px;
                border-bottom: 3px solid #3aaaf8;
                width: 1350px;
                margin-left: 0px;
            }

            .tj {

                float: left;
            }

            .tj table td {
                width: 118px;
                height: 60px;
                text-align: center;
                border: 1px dotted #cccccc;
            }

            #td_1 {
                color: #2E8B57;
            }

            #td_2 {
                color: #3AAAF8;
            }

            #td_3 {
                color: #800000;
            }

            #td_4 {
                color: #FF8C00;
            }

            #td_5 {
                color: blueviolet;
            }

            #td_6 {
                color: chocolate;
            }

            #td_7 {
                color: darkolivegreen;
            }

            #td_8 {
                color: darkorange;
            }

            .tp img {
                margin-left: 75px;
            }

            .tp {
                padding-top: 20px;
                float: left;

            }

            .ts img {
                margin-left: 25px;
                padding-top: 20px;
            }
            
            .ta img{
                width: 1350px;
                margin-top: 20px;
            }
            .footer{
                background-color: darkgrey;
                height: 50px;    
                text-align: center;
                padding-top: 20px;
            }
            .footer a{
                color: black;
                font-size: 20px;
                
            }

完整下载地址:作业.zip

HTML+Css+JavaScript旅游作业
朗读
赞 · 4
赞赏
感谢您的支持,我会继续努力哒!

三合一收款

下面三种方式都支持哦

微信
QQ
支付宝
打开支付宝/微信/QQ扫一扫,即可进行扫码打赏哦
版权属于:

代码屋

本文链接:

https://daimawu.top/Web/63.html(转载时请注明本文出处及文章链接)

评论 (0)