WEB期末大作业——我的家乡济南，免费HTML项目练习

最新推荐文章于 2024-06-20 13:54:13 发布

周百万.

最新推荐文章于 2024-06-20 13:54:13 发布

阅读量1.2k

点赞数 1

分类专栏： html javascript CSS 文章标签： javascript 前端 html5 css3 html

本文链接：https://blog.csdn.net/m0_45142186/article/details/125516052

版权

html 同时被 3 个专栏收录

37 篇文章 20 订阅

订阅专栏

javascript

28 篇文章 2 订阅

订阅专栏

CSS

16 篇文章 0 订阅

订阅专栏

编辑

一、首先创建base.css文件夹，对总体设置css样式

二、首页的HTML代码的书写，大伙自个看吧，我也不多说啥了。

三、创建common.css文件夹，对nav,shortcat,footer部分的css样式进行书写，因为所有的页面都得用，不直接复制，用的时候直接link引入即可

四、创建index.css文件夹，对index首页布局设置，大伙还是自个看

五、index文件的倒计时效果的js代码

六、轮播图

首页样式如下，本人是大三在校生，这是我的WEB期末大作业，不是特别标准化，见谅！
为啥发出来呢：看着网上的好多都是付费的，学习的时候连参考都没有，所以我免费发出来，供大家参考一下，当然版权要归我所有哦！！仅供各位学习借鉴！！

图片自个在网上找就行

一、首先创建base.css文件夹，对总体设置css样式

包括引入字体，对body，input,div,button,i 的一些基础性设置

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?fowqkb');
    src: url('../fonts/icomoon.eot?fowqkb#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?fowqkb') format('truetype'), url('../fonts/icomoon.woff?fowqkb') format('woff'), url('../fonts/icomoon.svg?fowqkb#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.clear {
    clear: both;
}

em {
    font-style: normal;
}

body,
div,
p,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

body {
    font-size: 12px;
    font-family: "微软雅黑";
    background-color: #f4f3f3;
}

div {
    box-sizing: border-box;
}

li {
    list-style: none;
}

input,
label {
    vertical-align: top;
    padding: 0;
    box-sizing: border-box;
    margin: 0;
}

a {
    text-decoration: none;
    color: black;
}

input,
button {
    border: 0;
    outline: none;
}

i {
    font-style: normal;
}

二、首页的HTML代码的书写，大伙自个看吧，我也不多说啥了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>泉城济南</title>
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="dist/css/swiper.min.css">
</head>

<body>
    <!-- shortcut开始 -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li class="short_phone">电话:&nbsp <i> 0531-8286425666</i> </li>
                    <li class="short_address">地址:&nbsp <i> 济南市历城区仲宫镇幸福路</i> </li>
                    <li id="clock">
                        <i>倒计时：</i> 距2022年7月1日还有
                        <span class="cl1">00</span>天
                        <span class="cl2">00</span>小时
                        <span class="cl3">00</span>分钟
                        <span class="cl4">00</span>秒
                    </li>
                </ul>
            </div>
            <div class="right">
                <span class="icon1"></span>
                <span class="icon2"></span>
                <span class="icon3"></span>
            </div>
        </div>
    </div>

    <!-- shortcut结束 -->
    <!-- nav开始 -->
    <nav>
        <a href="index.html">
            <div class="left">
                <i>
                <img src="images/888888.gif" alt="">
            </i>

            </div>
        </a>
        <div class="right">
            <ul>
                <li>
                    <a href="index.html"> 网站首页</a>
                    <i class="one"></i>
                </li>
                <li>通知公告
                    <i></i>
                </li>
                <li> <a href="aside1.html" class="three">旅游攻略</a>
                    <i></i>
                </li>
                <li>客户服务
                    <i></i>
                </li>
            </ul>
            <input type="text" placeholder="风景名胜~">
            <!-- span放input里面的字体图标 -->
            <span></span>
            <div class="btn">
                <di class="cove">搜 &nbsp&nbsp&nbsp&nbsp索</di> 搜 &nbsp&nbsp&nbsp&nbsp索
            </div>
        </div>
    </nav>
    <!-- nav结束 -->

    <!-- rotation开始 -->
    <!-- 轮播图 -->
    <div class="swiper-container rotation">
        <div class="swiper-wrapper">
            <img src="images/p1.jpg" alt="" class="swiper-slide">
            <img src="images/p3.jpg" alt="" class="swiper-slide">
            <img src="images/p7.jpg" alt="" class="swiper-slide">
            <img src="images/p4.jpg" alt="" class="swiper-slide">

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="bottom">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script src="dist/js/swiper.min.js"></script>
    <script src="js/index.js"></script>
    <!-- rotation结束 -->
    <!-- main开始 -->
    <div class="main">
        <!-- content1 -->
        <div class="content1">
            <div class="top">
                <img src="images/t1.png" alt="">
                <h4>景区浏览</h4>
                <div class="btn">
                    <div class="together">
                        <span class="cove one">历城区</span>
                        <button class="bb one">历城区</button>
                    </div>
                    <div class="together">
                        <span class="cove">市中区</span>
                        <button class="bb">市中区</button>
                    </div>
                    <div class="together">
                        <span class="cove">历下区</span>
                        <button class="bb">历下区</button>
                    </div>
                    <div class="together">
                        <span class="cove">高新区</span>
                        <button class="bb">高新区</button>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <ul>
                    <li>
                        <div class="up">
                            <div class="cover">大明湖</div>
                            <img src="images/dmh.jpg" alt="">
                        </div>
                        <div class="down">
                            <h5>大明湖</h5>
                            <p>大明湖，山东省济南市区湖泊、济南三大历史名胜之一。</p>
                        </div>
                    </li>
                    <li>
                        <div class="up ">
                            <div class="cover">趵突泉</div>
                            <img src="images/btq.jpg " alt=" ">
                        </div>
                        <div class="down ">
                            <h5>趵突泉</h5>
                            <p>趵突泉，济南三大名胜之一,位居济南七十二名泉之冠。</p>
                        </div>
                    </li>
                    <li>
                        <div class="up ">
                            <div class="cover">千佛山</div>
                            <img src="images/qfs.jpg " alt=" ">
                        </div>
                        <div class="down ">
                            <h5>千佛山</h5>
                            <p>千佛山位于山东省济南市历下区，是济南三大名胜之一</p>
                        </div>
                    </li>
                    <li>
                        <div class="up ">
                            <div class="cover">泉城广场</div>
                            <img src="images/qcgc.jpg " alt=" ">
                        </div>
                        <div class="down ">
                            <h5>泉城广场</h5>
                            <p>泉城广场是山东省省会济南市的中心广场，坐落于济南市中心繁华地带</p>
                        </div>
                    </li>


                </ul>
            </div>
        </div>
        <!-- content2 -->
        <div class="content1">
            <div class="top">
                <img src="images/t1.png" alt="">
                <h4>美食街区</h4>
                <div class="btn">
                    <div class="together">
                        <span class="cove one">历城区</span>
                        <button class="bb one">历城区</button>
                    </div>
                    <div class="together">
                        <span class="cove">市中区</span>
                        <button class="bb">市中区</button>
                    </div>
                    <div class="together">
                        <span class="cove">历下区</span>
                        <button class="bb">历下区</button>
                    </div>
                    <div class="together">
                        <span class="cove">高新区</span>
                        <button class="bb">高新区</button>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <ul>
                    <li>
                        <div class="up">
                            <div class="cover">宽厚里</div>
                            <img src="images/khl.jpg" alt="">
                        </div>
                        <div class="down">
                            <h5>宽厚里</h5>
                            <p>宽厚里又称济南宽厚里，位于山东省济南市历下区泉城路核心地段</p>
                        </div>
                    </li>
                    <li>
                        <div class="up ">
                            <div class="cover">芙蓉街</div>
                            <img src="images/frj.jpg " alt=" ">
                        </div>
                        <div class="down ">
                            <h5>芙蓉街</h5>
                            <p>芙蓉街，是一条泉城济南特色的老街以及小吃街</p>
                        </div>
                    </li>
                    <li>
                        <div class="up ">
                            <div class="cover">大观园</div>
                            <img src="images/dgy2.jpg " alt=" ">
                        </div>
                        <div class="down ">
                            <h5>大观园</h5>
                            <p>济南大观园位于山东省济南市市中区，建于1932年，距今已有86年的历史</p>
                        </div>
                    </li>
                    <li>
                        <div class="up ">
                            <div class="cover">佛山街</div>
                            <img src="images/fsj.jpg " alt=" ">
                        </div>
                        <div class="down ">
                            <h5>佛山街</h5>
                            <p>济南佛山街位于山东省济南市市中区距今已有86年的历史</p>
                        </div>
                    </li>


                </ul>
            </div>
        </div>
        <!-- content2 -->
        <div class="content1">
            <div class="top">
                <img src="images/t1.png" alt="">
                <h4>乡土生活</h4>
                <div class="btn">
                    <div class="together">
                        <span class="cove one">历城区</span>
                        <button class="bb one">历城区</button>
                    </div>
                    <div class="together">
                        <span class="cove">历城区</span>
                        <button class="bb">历城区</button>
                    </div>
                    <div class="together">
                        <span class="cove">历城区</span>
                        <button class="bb">历城区</button>
                    </div>
                    <div class="together">
                        <span class="cove">历城区</span>
                        <button class="bb">历城区</button>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <ul>
                    <li>
                        <div class="up">
                            <div class="cover">街头巷尾</div>
                            <img src="images/l1.jpg" alt="">
                        </div>
                        <div class="down">
                            <h5>街头巷尾</h5>
                            <p>古城内散布的大街小巷、深宅大院、普通民居，都是百姓生息繁衍的建筑环境。</p>
                        </div>
                    </li>
                    <li>
                        <div class="up ">
                            <div class="cover">饮食文化</div>
                            <img src="images/l2.jpg " alt=" ">
                        </div>
                        <div class="down ">
                            <h5>饮食文化</h5>
                            <p>济南菜大约起源于春秋战国时期，古称历下菜，起自鲁西地方</p>
                        </div>
                    </li>
                    <li>
                        <div class="up ">
                            <div class="cover">茶前饭后</div>
                            <img src="images/l3.jpg " alt=" ">
                        </div>
                        <div class="down ">
                            <h5>茶前饭后</h5>
                            <p>济南素以“天下泉城”“世界泉水之都”著称，自古就有“家家泉水</p>
                        </div>
                    </li>
                    <li>
                        <div class="up ">
                            <div class="cover">童心童趣</div>
                            <img src="images/l4.jpg " alt=" ">
                        </div>
                        <div class="down ">
                            <h5>童心童趣</h5>
                            <p>童年是小朋友们做游戏时的欢声笑语;童年是小朋友们画下</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- main结束 -->
    <!-- 三张图开始 -->
    <div class="three">
        <div class="top">
            <h5 class="do">MY STORY</h5>
            <div class="headline">济南的冬天</div>
            <ul>
                <li>
                    <div class="up">
                        <span>
                            <i id="bike"></i>
                        </span>
                        <img src="images/winter1.jpg" alt="">
                    </div>
                    <div class="down">
                        <h4>冬天的树</h4>
                        <p>冬天里的树，因为无须争春，可以心无旁骛，在枯瘦的外表下，默默储存能量，一旦春风吹来，将比任何姹紫嫣红的花儿更加茁壮，甚至令人肃然起敬。
                        </p>
                    </div>
                </li>
                <li>
                    <div class="up">
                        <span>
                            <i id="bike"></i>
                        </span>
                        <img src="images/winter2.jpg" alt="">
                    </div>
                    <div class="down">
                        <h4>冬天的街头</h4>
                        <p>黄昏的冬日街头，寒风凛冽，车来人往，大家都裹紧衣服低头赶路，寒风像千万把刀割在脸上，空气越来越冷，冷得仿佛可以结出冰来似的，看着车水马龙的大街，每一个人都是行色匆匆。
                        </p>
                    </div>
                </li>
                <li>
                    <div class="up">
                        <span>
                            <i id="bike"></i>
                        </span>
                        <img src="images/winter4.jpg" alt="">
                    </div>
                    <div class="down">
                        <h4>冬天的森林</h4>
                        <p>整个树林就是一面银光镜反射着点点阳光，把森林照得无比闪亮。配着羽毛雪仿佛是天女散花，无比美丽。羽毛雪铺在地上变成了白狼毛地毯，比云朵还雪白。
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="bottom"></div>
    </div>
    <!-- 三张图结束 -->
    <!-- contact开始 -->
    <div class="contact clear">
        <h5>联系我们</h5>
        <p>请完整填写这张表格，以便与我联系，您可以在上午11:00到晚上10:00之间打电话给我</p>
        <form action="#" class="clear">
            <input type="text" class="names" placeholder="姓名">
            <input type="text" class="emails" placeholder="邮箱">
            <textarea name="message" cols="30" rows="10" placeholder="信息"></textarea>
        </form>
        <div class="pic">
            <video src="video/wajn.mp4" controls loop preload="auto"></video>
        </div>
    </div>
    <!-- contact结束 -->
    <!--五张图开始  -->
    <div class="content_bottom clear">
        <ul>
            <li id="bikes">
                <span>
                    <i id="bike"></i>
                </span>
                <img src="images/w2.jpg" alt="">
            </li>
            <li>
                <span>
                    <i></i>
                </span>
                <img src="images/w4.jpg" alt="">
            </li>
            <li>
                <span>
                    <i></i>
                </span>
                <img src="images/w5.jpg" alt="">
            </li>
            <li>
                <span>
                    <i></i>
                </span>
                <img src="images/w3.jpg" alt="">
            </li>
            <li>
                <span>
                    <i></i>
                </span>
                <img src="images/w1.jpg" alt="">
            </li>
        </ul>
    </div>
    <!--五张图结束  -->

    <script src="js/index.js"></script>

    <!-- footer底部start -->
    <div class="footer ">
        <div class="w ">
            <div class="logo ">
                <img src="images/index_logo.png " alt=" ">
            </div>
            <div class="infomation ">
                <h4>咨询热线</h4>
                <p>0531-88888888</p>
                <p class="address ">地址：济南市历城区仲宫镇幸福路</p>
                <p class="email ">邮箱:beautyjinna@163.com</p>

            </div>
            <div class="wx_pic ">
                <img src="images/wx-icon.jpg " alt="济南市文化旅游局 ">
                <p class="add ">济南市文化旅游局</p>
            </div>
            <div class="wx_pic2 ">
                <img src="images/wx-icon2.jpg " alt="创作者微信 ">
                <p class="add ">创作者微信</p>
            </div>
            <div class="mod_help ">
                <dl>
                    <dd>服务指南</dd>
                    <dt>购物流程</dt>
                    <dt>会员介绍</dt>
                    <dt>生活旅行</dt>
                    <dt>常见问题</dt>
                    <dt>联系客服</dt>
                    <dt>大家电啊</dt>
                </dl>
                <dl>
                    <dd>新闻中心</dd>
                    <dt>新闻资讯</dt>
                    <dt>新闻聚焦</dt>
                    <dt>视频中心</dt>

                </dl>

                <dl>
                    <dd>旅游攻略</dd>
                    <dt>景区攻略</dt>
                    <dt>特色美食</dt>
                    <dt>酒店住宿</dt>
                    <dt>文创产品</dt>

                </dl>
                <dl>
                    <dd>客户服务</dd>
                    <dt>联系方式</dt>
                    <dt>留言咨询</dt>
                    <dt>百问百答</dt>

                </dl>
            </div>
            <hr class="hr ">
            <!-- copyright -->
            <div class="copyright ">
                地址:济南市历城区仲宫镇幸福路 邮编:100096 电话：400-618-4000 邮箱: beautyjinna@163.com
            </div>
        </div>
    </div>
    <!-- footer底部end -->
</body>

</html>

三、创建common.css文件夹，对nav,shortcat,footer部分的css样式进行书写，因为所有的页面都得用，不直接复制，用的时候直接link引入即可

    .w {
        width: 1300px;
        margin: 0 auto;
    }
    /* shortcut开始 */
    
    .shortcut {
        position: relative;
        padding-top: 5px;
        padding-left: 85px;
        padding-right: 50px;
        width: 1300px;
        height: 40px;
        background-color: #2d394b;
        margin: 0 auto;
        color: #fff;
        border-radius: 3px;
    }
    
    .shortcut .w {
        width: 1200px;
        margin: 0 auto;
        line-height: 31px;
        position: relative;
    }
    
    .fl {
        float: left;
    }
    
    .shortcut .w .fl ul li {
        position: relative;
        float: left;
    }
    
    #clock {
        position: relative;
        margin-left: 50px;
    }
    
    #clock:hover {
        color: #d02552;
    }
    
    #clock:hover i {
        color: #fff;
    }
    
    #clock i::after {
        position: absolute;
        top: 0;
        left: -25px;
        content: '\e93c';
        font-family: 'icomoon';
        margin-left: 6px;
    }
    
    .shortcut .w .fr ul li:nth-child(even) {
        width: 1px;
        background-color: #666;
        height: 12px;
        margin: 9px 16px 0;
    }
    
    .arrow-icon::after {
        content: '\f107';
        font-family: 'icomoon';
        margin-left: 6px;
    }
    
    .fr {
        float: right;
        line-height: 12px;
    }
    
    .shortcut .w .fr ul li {
        display: inline-block;
    }
    
    .shortcut .w .fr ul li:nth-child(even) {
        width: 1px;
        background-color: #666;
        height: 12px;
        margin: 9px 16px 0;
    }
    
    .short_phone::before {
        position: absolute;
        left: -27px;
        content: '\e942';
        font-family: 'icomoon';
        margin-left: 6px;
    }
    
    .short_phone i:hover,
    .short_address i:hover {
        color: #d02552;
    }
    
    .short_address {
        margin-left: 50px;
    }
    
    .short_address::before {
        position: absolute;
        left: -27px;
        content: '\e948';
        font-family: 'icomoon';
        margin-left: 6px;
    }
    /* 右边的图标 */
    
    .shortcut .w .right {
        position: absolute;
        right: 100px;
        display: inline-block;
        font-size: 14px;
    }
    
    .shortcut .w .right .icon1::before {
        content: '\e925';
        font-family: 'icomoon';
        margin-left: 16px;
    }
    
    .shortcut .w .right .icon2::before {
        content: '\e96f';
        font-family: 'icomoon';
        margin-left: 16px;
    }
    
    .shortcut .w .right .icon3::before {
        content: '\ead0';
        font-family: 'icomoon';
        margin-left: 16px;
    }
    
    .shortcut .w .right .icon1:hover,
    .shortcut .w .right .icon2:hover,
    .shortcut .w .right .icon3:hover {
        color: #d02552;
    }
    /* shortcut结束 */
    /* nav开始 */
    
    nav {
        position: relative;
        width: 1300px;
        height: 95px;
        margin: 0 auto;
        background-color: #fff;
    }
    
    nav .left {
        float: left;
        width: 56px;
        height: 48px;
        margin-top: 28px;
        margin-left: 60px;
    }
    
    nav .left i {
        opacity: 0;
        display: inline-block;
        margin-top: 37px;
        margin-left: 11px;
        width: 30px;
        height: 30px;
    }
    
    nav .left i img {
        width: 100%;
    }
    /* 动画 */
    
    @keyframes rota {
        0% {
            transform: rotate(-45deg) translateY(0);
        }
        100% {
            transform: translateY(-150px) rotate(-45deg);
            color: #d02552;
        }
    }
    
    @keyframes rotaI {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-150px);
        }
    }
    
    nav .left::before {
        position: absolute;
        top: 30px;
        left: -13px;
        content: '\e999';
        font-family: 'icomoon';
        margin-left: 77px;
        font-size: 46px;
        z-index: 1;
    }
    
    nav .left:hover::before {
        transform: rotate(-45deg);
        transition: all 1s;
        color: rgb(200, 155, 31);
    }
    
    nav .left:active i {
        animation: rotaI 1.2s ease;
        animation-fill-mode: forwards;
    }
    
    nav .left:active:before {
        animation: rota 1.2s ease;
        animation-fill-mode: forwards;
    }
    
    nav .left:hover i {
        opacity: 1;
        transition: all 1s .5s;
    }
    /* nav-left 结束*/
    
    nav .right ul {
        position: absolute;
        top: 32px;
        left: 200px;
        text-align: center;
        line-height: 30px;
        font-size: 20px;
    }
    
    nav .right ul li {
        position: relative;
        float: left;
        padding: 0 20px;
    }
    
    nav .right ul li:hover {
        color: #d02552;
    }
    
    nav .right ul li a {
        color: #d02552;
    }
    
    nav .right ul li .three {
        color: #000;
    }
    
    nav .right ul li .one {
        position: absolute;
        top: 40px;
        left: 21px;
        display: inline-block;
        width: 80px;
        height: 2px;
        background-color: #d02552;
    }
    
    nav .right ul li i {
        position: absolute;
        top: 40px;
        left: 21px;
        display: inline-block;
        width: 0px;
        height: 2px;
        background-color: #d02552;
    }
    
    nav .right ul li:hover i {
        width: 80px;
        transition: all .4s;
    }
    
    nav .right input {
        position: absolute;
        padding-left: 30px;
        top: 32px;
        left: 775px;
        width: 270px;
        height: 30px;
        border-radius: 15px;
        border: 1px solid #666;
    }
    
    nav .right span {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 40px;
        left: 786px;
    }
    
    nav .right span::before {
        content: '\e986';
        font-family: 'icomoon';
        font-size: 14px;
        color: #666;
    }
    
    nav .right .btn {
        overflow: hidden;
        position: absolute;
        top: 28px;
        right: 100px;
        width: 130px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        background-color: #d02552;
        border-radius: 3px;
    }
    
    nav .right .btn .cove {
        position: absolute;
        top: 0;
        left: -130px;
        width: 130px;
        height: 40px;
        background-color: #323946;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #fff;
        border-radius: 3px;
    }
    
    nav .right .btn:hover .cove {
        transform: translate(130px);
        transition: all .8s;
        opacity: 1;
    }
    
    nav .right .btn:hover {
        color: transparent;
        transition: all .8s;
    }
    /* nav结束 */
    
    .contact {
        overflow: hidden;
        width: 1300px;
        margin: 0 auto;
        padding-top: 20px;
    }
    
    .contact h5 {
        font-weight: 500;
        font-size: 38px;
        color: #d02552;
        margin-bottom: 10px;
    }
    
    .contact h4 {
        color: #323946;
        font-size: 50px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 30px;
    }
    
    .contact p {
        font-size: 15px;
        color: #666;
        margin-bottom: 30px;
    }
    
    .contact form {
        float: left;
        width: 675px;
    }
    
    .contact form .names,
    .contact form .emails {
        height: 60px;
        padding: 8px 15px;
        border: 0;
        border-radius: 0;
        width: 100%;
        color: #929292;
        border: 1px solid rgba(0, 0, 0, 0.1);
        letter-spacing: 0.1px;
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 30px;
        outline: none;
        background-color: #fff;
        margin-bottom: 10px;
    }
    
    .contact form textarea {
        padding: 8px;
        padding-left: 16px;
        width: 652px;
        height: 185px;
        color: #929292;
        border: 1px solid;
        border-color: rgba(0, 0, 0, 0.1);
        letter-spacing: 0.1px;
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 30px;
        outline: none;
        background-color: #fff;
        Resize: none;
    }
    
    .contact .pic {
        float: left;
        margin-left: 20px;
        overflow: hidden;
        width: 599px;
        height: 340px;
    }
    
    .contact img {
        width: 600px;
    }
    /* contact 结束 */
    /* content_bottom开始 */
    
    .content_bottom {
        width: 1300px;
        height: 350px;
        margin: 0 auto;
    }
    
    .content_bottom ul li {
        position: relative;
        float: left;
        margin-right: 12px;
        overflow: hidden;
        width: 250px;
        height: 350px;
    }
    
    .content_bottom ul li:nth-child(5) {
        margin-right: 0;
    }
    
    .content_bottom ul li img {
        height: 100%;
    }
    /* 鼠标经过的遮罩层 */
    
    .content_bottom ul li span {
        overflow: hidden;
        opacity: 0;
        position: absolute;
        display: inline-block;
        width: 250px;
        height: 350px;
        background-color: rgba(0, 0, 0, 0.7);
    }
    
    .content_bottom ul li span i {
        display: inline-block;
        margin-top: 125px;
        margin-left: -85px;
        width: 100px;
        height: 100px;
        background-color: transparent;
        line-height: 100px;
        text-align: center;
    }
    
    .content_bottom ul li span i::after {
        content: '\e9b6';
        font-family: 'icomoon';
        font-size: 14px;
        color: #fff;
        font-size: 60px;
    }
    
    .content_bottom ul li:hover span {
        opacity: 1;
        transition: all .8s;
    }
    
    .content_bottom ul li:hover span i {
        transform: translate(150px);
        transition: all 1.2s ease;
    }
    /* content_bottom结束 */
    /* footer底部start */
    
    .footer {
        padding-top: 30px;
        padding-left: 60px;
        position: relative;
        width: 1300px;
        height: 420px;
        margin: 0 auto;
        background-color: #f5f5f5;
        border-bottom: 1px solid #ededed;
        background-image: url(../images/B12.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
    }
    
    .footer .logo img {
        width: 200px;
        margin-left: -5px;
    }
    /* wx-infomation */
    
    .footer .infomation h4 {
        font-weight: 400;
        margin-top: 15px;
    }
    
    .footer .infomation p {
        padding: 0;
        margin: 0;
        font-size: 25px;
        margin-top: 10px;
    }
    
    .footer .infomation .address,
    .footer .infomation .email {
        font-size: 15px;
    }
    /* foot-wx */
    
    .footer .wx_pic,
    .footer .wx_pic2 {
        float: left;
        text-align: center;
    }
    
    .footer .wx_pic img,
    .footer .wx_pic2 img {
        margin-top: 20px;
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
    
    .footer .wx_pic .add,
    .footer .wx_pic2 .add {
        font-size: 12px;
    }
    
    .footer .wx_pic2 {
        margin-left: 20px;
    }
    /* mod_help */
    
    .mod_help {
        position: absolute;
        top: 35px;
        right: 0px;
        float: left;
        width: 600px;
        font-size: 14px;
        text-align: center;
    }
    
    .mod_help dl {
        float: left;
        margin-right: 88px;
    }
    
    .mod_help dl dd {
        font-size: 15px;
        font-weight: 500;
        margin-left: 0px;
        margin-bottom: 20px;
    }
    
    .mod_help dl dt {
        margin-bottom: 10px;
    }
    
    .hr {
        position: absolute;
        top: 280px;
        right: 66px;
        width: 560px;
    }
    
    .copyright {
        position: absolute;
        top: 320px;
        right: 80px;
        font-size: 12px;
    }
    /* footer底部end */

四、创建index.css文件夹，对index首页布局设置，大伙还是自个看

.rotation {
    position: relative;
    width: 1300px;
    height: 500px;
    margin: 0 auto;
}

.swiper-container .swiper-slide {
    width: 1300px;
}

.swiper-container .swiper-slide img {
    height: auto !important;
    transition: all .8s;
}


/* 轮播图用的swiper */

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}


/* 轮播图下边的 */

.rotation .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1300px;
    height: 60px;
    background-color: rgba(0, 0, 0, .5);
}

.rotation .bottom ul {
    margin-left: 550px;
}

.rotation .bottom ul li {
    width: 18px;
    height: 18px;
    margin-top: 21px;
    float: left;
    padding: 0 20px;
}

.rotation .bottom ul li::before {
    content: '\e939';
    font-family: 'icomoon';
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}

.rotation .bottom ul li:hover {
    transform: rotate(360deg);
    transition: all 1.5s;
}

.rotation .bottom ul li:hover::before {
    transition: all .1s;
    font-weight: 600;
    color: red;
}


/* main开始 */

.main {
    width: 1300px;
    margin: 0 auto;
}

.content1 {
    width: 100%;
    height: 500px;
}

.content1 .top {
    position: relative;
    width: 100%;
    height: 100px;
    line-height: 100px;
    overflow: hidden;
}

.content1 .top img {
    float: left;
    width: 60px;
    margin-top: 20px;
}

.content1 .top h4 {
    float: left;
    font-size: 28px;
    font-weight: 600;
    margin-left: 10px;
    color: #000;
}

.content1 .top .btn {
    position: absolute;
    right: 0;
}


/* 按钮的遮罩层 */

.content1 .top .btn .cove {
    opacity: 0;
    position: absolute;
    top: -32px;
    left: -130px;
    width: 100px;
    height: 32px;
    background-color: #d02552;
    margin-left: 30px;
    margin-top: 32px;
    border-radius: 16px;
    line-height: 32px;
    text-align: center;
    z-index: 2;
    color: #fff;
}

.content1 .top .together {
    overflow: hidden;
    margin-top: 32px;
    margin-right: 30px;
    width: 100px;
    height: 32px;
    position: relative;
    float: left;
    border-radius: 16px;
}

.content1 .top .together .one {
    background-color: #d02552;
    color: #fff;
}


/* 以下两个是鼠标悬停动画 */

.content1 .top .together:hover span {
    transform: translate(100px);
    transition: all 1s;
    opacity: 1;
}

.content1 .top .together:hover button {
    transform: translate(50px);
    opacity: 0;
    transition: all .8s;
}

.content1 .top button {
    position: absolute;
    top: 0;
    left: -30px;
    display: inline-block;
    width: 100px;
    height: 32px;
    background-color: #fff;
    margin-left: 30px;
    border-radius: 16px;
    z-index: 1;
}

.content1 .bottom ul li {
    float: left;
    width: 287px;
    height: 300px;
    margin-right: 50px;
    background-color: #fff;
}

.content1 .bottom ul li:nth-child(4) {
    margin-right: 0;
}


/* li盒子的上边 */

.content1 .bottom ul li .up {
    position: relative;
    overflow: hidden;
    width: 287px;
    height: 200px;
}


/* li的遮罩层 */

.content1 .bottom ul li .up .cover {
    /* 使用display效果会与transition效果冲突所以使用opacity: 0; */
    opacity: 0;
    position: absolute;
    top: 0;
    width: 287px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    font-size: 17px;
    color: #fff;
    transition: all .8s;
}

.content1 .bottom ul li:hover .down h5 {
    color: #d02552;
    transition: all .5s;
}

.content1 .bottom ul li:hover .up .cover {
    opacity: 1;
}

.content1 .bottom ul li .up img {
    height: 100%;
}

.content1 .bottom ul li .down {
    padding: 20px;
}

.content1 .bottom ul li .down h5 {
    margin-top: -10px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.content1 .bottom ul li .down p {
    text-align-last: left;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* 三张图开始 */

.three {
    width: 1300px;
    margin: 0 auto;
    text-align: center;
}

.three .top h5 {
    font-size: 18px;
    color: #d02552;
}

.three .top .headline {
    width: 1300px;
    height: 60px;
    line-height: 60px;
    font-size: 45px;
    font-weight: 500;
    margin-bottom: 50px;
}

.three .top ul li {
    float: left;
    width: 400px;
    height: 500px;
    margin-right: 50px;
    background-color: #fff;
    text-align: left;
}

.three .top ul li:nth-child(3) {
    margin-right: 0;
}

.three .top ul li .up {
    width: 100%;
    height: 270px;
    overflow: hidden;
}

.three .top ul li .up img {
    width: 100%;
}

.three .top ul li .down h4 {
    font-size: 24px;
    color: #323946;
    padding: 20px;
    margin-top: 0px;
}

.three .top ul li .down p {
    width: 350px;
    height: 200px;
    font-size: 16px;
    margin-top: 5px;
    margin-left: 20px;
}


/*三张图遮罩 */

.three .top ul li span {
    overflow: hidden;
    opacity: 0;
    position: absolute;
    display: inline-block;
    width: 400px;
    height: 270px;
    background-color: rgba(0, 0, 0, 0.7);
}

.three .top ul li span i {
    position: relative;
    display: inline-block;
    margin-top: 109px;
    margin-left: 170px;
    background-color: transparent;
    line-height: 100px;
    text-align: center;
    width: 60px;
    height: 60px;
}

.three .top ul li span i::after {
    position: absolute;
    top: -20px;
    left: 0;
    content: '\e939';
    font-family: 'icomoon';
    font-size: 14px;
    color: #fff;
    font-size: 60px;
}

.three .top ul li:hover span {
    opacity: 1;
    transition: all .8s;
}

.three .top ul li:hover span i {
    transform: rotate(360deg);
    transition: all 1.5s;
}


/* 三张图结束 */

五、index文件的倒计时效果的js代码


// 定义倒计时函数
function Times() {
    //先获取ID节点，写完后再将字符串插入到clock节点内部.innerHTML=
    var clock = document.getElementById("clock");
    console.log(clock);
    //获取span节点
    var spans = clock.getElementsByTagName("span");
    //引入当前时间
    var today = new Date();
    //设置未来时间
    var enday = new Date("2022/7/1 00:00:00");
    //未来时间-当前时间，出来毫秒数，用到哪在哪除，并给其定义赋值，方便后面取用，用parseInt()取整
    var lastTime = parseInt((enday - today) / 1000);
    //剩余天数，（未来时间-当前时间）/1000/60/60/24
    var lastDate = parseInt(lastTime / 60 / 60 / 24);
    //剩余小时，（未来时间-当前时间）/1000/60%24 用取余方法，取出天后面的余数就是小时数
    var lastHour = parseInt(lastTime / 60 / 60 % 24);
    //剩余分钟数，（未来时间-当前时间）/1000/60%60，小时后面的余数就是分钟数
    var lastMin = parseInt(lastTime / 60 % 60);
    //剩余秒数，（未来时间-当前时间）/1000%60，分钟后的余数就是秒数
    var lastSec = parseInt(lastTime % 60);
    // 让天数为10以下时前面加个0，增加用户体验。 有更好的方法，这周写法不推荐
    if (lastDate < 10) {
        lastDate = "0" + lastDate;
    }
    // 让小时数为10以下时前面加个0，增加用户体验。 有更好的方法，这周写法不推荐
    if (lastHour < 10) {
        lastHour = "0" + lastHour;
    }
    // 让分钟数为10以下时前面加个0，增加用户体验。 有更好的方法，这周写法不推荐
    if (lastMin < 10) {
        lastMin = "0" + lastMin;
    }
    // 让秒数为10以下时前面加个0，增加用户体验。 有更好的方法，这周写法不推荐
    if (lastSec < 10) {
        lastSec = "0" + lastSec;
    }
    // 选择span节点，把相应的时间添加进去，span后用数组选择，数组从0开始，0代表1
    spans[0].innerHTML = lastDate;
    spans[1].innerHTML = lastHour;
    spans[2].innerHTML = lastMin;
    spans[3].innerHTML = lastSec;
}
// 定义计时器，1000毫秒更新一次
setInterval("Times()", 1000);

六、轮播图

因为当时我的老师教两节课就把js讲完了，所以跟不上，现在正在学后期马上会出教程

所以看网上用的Swiper包，各位同行使用时搜索，下载包导入即可

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    paginationClickable: true,
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: 2500,
    autoplayDisableOnInteraction: false
});

周百万.

关注

1
点赞
踩
39

收藏

觉得还不错? 一键收藏
打赏
1
评论
WEB期末大作业——我的家乡济南，免费HTML项目练习

目录编辑一、首先创建base.css文件夹，对总体设置css样式二、首页的HTML代码的书写，大伙自个看吧，我也不多说啥了。三、创建common.css文件夹，对nav,shortcat,footer部分的css样式进行书写，因为所有的页面都得用，不直接复制，用的时候直接link引入即可四、创建index.css文件夹，对index首页布局设置，大伙还是自个看五、index文件的倒计时效果的js代码六、轮播图...
复制链接

扫一扫