我的家乡介绍网站设计与实现

谁借莪１个温暖的怀抱￠ 2023-02-17 14:23 9阅读 0赞

以“我的家乡”为主题的前端网页设计  
废话不多说先上图：![网页图片][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDU5ODQ1_size_16_color_FFFFFF_t_70]

用 :hover实现鼠标放到图片上实现放大效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDU5ODQ1_size_16_color_FFFFFF_t_70 1]  
有视频

有轮播图 纯css 替换的话图片尺寸 1100px \* 299px

有浮动广告

只展示了主页部分  
新手小白 不喜勿喷

html部分代码

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>滨州主页</title>
        
        
        <link rel="stylesheet" href="css/base.css">
        
        <link rel="stylesheet" href="css/index.css">
          
        <script src="js/index.js"></script>
    </head>
    
    <body>
        
        <div class="box-top w">
            <lu class="kuai">
                <li>
                    <img src="images/top-1.jpg" />
                </li>
                <li>
                    <img src="images/top-2.jpg" />
                </li>
                <li>
                    <img src="images/top-3.jpg" />
                </li>
                <li>
                    <img src="images/top-4.jpg" />
                </li>
                <li>
                    <img src="images/top-5.jpg" />
                </li>
    
            </lu>
        </div>
        
        <div class="box-nav w">
            <ul>
                <li class="xz">
                    <a href="index.html">首页</a></li>
                <li>
                    <a href="jxls.html">家乡历史</a></li>
                <li>
                    <a href="jxmj.html">家乡美景</a></li>
                <li>
                    <a href="jxmr.html">家乡名人</a></li>
                <li>
                    <a href="jxms.html">家乡美食</a></li>
                <li>
                    <a href="jxjz.html">家乡建筑</a></li>
            </ul>
        </div>
        
        <div class="xcp w">
            <h1>欢迎观看宣传片</h1>
            <br>
            <video src="mp4/binzhou.mp4" autoplay="autoplay" width="1200px" controls="controls"> 你的浏览器不支持视频播放 请更换IE9 以上的浏览器</video>
    
        </div>
        
        <div class="box-main w">
    
            
            
            <div class="box-main-mokuai">
                <h2>滨州简介</h2>
                <br>
                
                <div class="box-main-mokuai-1">
                    <img src="images/滨州-1.jpg" alt="">
                </div>
                
                <div class="box-main-mokuai-2">
                    <p>　滨州市位于黄河下游、鲁北平原，地处黄河三角洲尾闾，北临渤海，东与东营市接壤，南和淄博市毗邻，西同德州市和济南市搭界，是山东的北大门。现辖滨城区、沾化区、惠民县、阳信县、无棣县、博兴县、邹平县五县二区和滨州经济开发区、滨州北海经济开发区以及滨州高新技术产业开发区，版图面积9453平方千米，人口379万。滨州交通便利。济青高速、滨博高速、京滨高速和205、220国道穿越境内，是连接苏、鲁、京、津的重要通道。滨州是中国最大的冬枣生产基地，渤海文蛤、梭子蟹等名优水产品名扬海内外。</p>
                    <p>滨州因居“渤海之滨·黄河之州”而得名。2000年，撤地设市，现辖七个县市区和三个市属开发区，是国家“黄蓝”两区战略的主战场，也是京津冀协同发展建设的重要组成部分。</p>
                </div>
            </div>
    
            
            <div class="box-main-mokuai">
                <h2>人口数据</h2>
                <br>
                
                <div class="box-main-mokuai-1">
                    <img class="box-main-mokuai-1-img" src="images/人口.png" alt="">
                </div>
                
                <div class="box-main-mokuai-2">
                    <p>一、全市常住人口</p>
                    <p> 滨州市住人口为374.85万人，同第五次全国人口普查2000年11月1日零时的356.41万人相比，十年共增加了18.44万人。增长5.17%，年平均增长0.51%，</p>
                    <p>二、家庭户人口</p>
                    <p>全市常任人口中共有家庭户13115.91万户， 家庭户人口为357.02万人，平均每个 家庭户的人口为3.08人,比200单五次人口普查的.26人减少70.18人。
                    </p>
                    <p> 三、性别构成</p>
                    <p>全市常住人口中，男性为188.40万人，占总人口的50.26%;女性为186.45万人， 占总人口的49.74%，总人口性别比(以女性为100,男性对女性的比例)由2000年 的100.90.上升为101.05。
                    </p>
                </div>
    
            </div>
            
            <div class="box-main-mokuai">
                <h2>政治文化</h2>
                <br>
                
                <div class="box-main-mokuai-1">
                    <img class="box-main-mokuai-1-img" src="images/政治文化.png" alt="">
                </div>
                
                <div class="box-main-mokuai-2">
                    <p>滨州市位于山东省的北部，黄河三角洲腹地。因公元951年(后周显德三年)置滨州而 得名。滨州历史悠久，源远流长，传承有序。从鲁北阳信小韩遗址出土的文物判断，早在七 千多年以前，这就有人类繁衍，是黄河文化和齐文化的发祥地之一。正如《易●系辞》所载: 包牺(伏羲)氏没，神农氏作。斫木为耜，揉木为耒，耒耨之利，以教天下。”商代为薄 姑氏领地，因“薄”与“蒲”、“博”“渤”“鹁”等字通假，才有了“蒲台”“博兴”“渤海 湾”“鹁鸪李”诸多地名的历史由来。秦朝开始建县,从西汉起至民国先后设有郡(国)、州、
                        府、道等地方行政建置，五代时期置滨州，以濒临渤海而得名。
                    </p>
                </div>
            </div>
            
            <div class="box-main-mokuai">
                <h2>经济概况</h2>
                <br>
                
                <div class="box-main-mokuai-1">
                    <img class="box-main-mokuai-1-img" src="images/经济.jpg" alt="">
                </div>
                
                <div class="box-main-mokuai-2">
                    <p>经济运行总体平稳。全年实现生产总值（GDP）2612.92亿元，按可比价格计算，增长6.2%。其中，第一产业增加值237.17亿元，增长3.8%；第二产业增加值1222.30亿元，增长5.8%；第三产业增加值1153.45亿元，增长7.1%。三次产业结构由上年的9.2:47.1:43.7调整为9.1：46.8：44.1。人均生产总值达到66970元（按年均汇率折算为9919美元），增长5.4%。
    
                    </p>
                    <p>物价指数平稳上涨。居民消费价格总水平上涨0.9%，其中，服务价格上涨3.1%，消费品价格下降0.5%。工业生产者出厂价格上涨7.9%，购进价格上涨14.8%。</p>
    
                </div>
            </div>
    
            
            
            <div style="clear: both;"></div>
        </div>
       
        <div class="wl w">
            <h1>友情链接</h1>
            <br>
            <ul>
    
                <li>
                    <a href="http://www.binzhou.gov.cn/">滨州市人民政府</a>
                </li>
                <li>
                    <a href="http://jy.binzhou.gov.cn/">滨州市教育局</a>
                </li>
                <li>
                    <a href="http://ga.binzhou.gov.cn/">滨州市公安局</a>
                </li>
                <li>
                    <a href="http://mz.binzhou.gov.cn/">滨州市民政局</a>
                </li>
                <li>
                    <a href="http://sf.binzhou.gov.cn/">滨州市司法局</a>
                </li>
                <li>
                    <a href="http://cz.binzhou.gov.cn/">滨州市财政局</a>
                </li>
                <li>
                    <a href="http://tj.binzhou.gov.cn/">滨州市统计局</a>
                </li>
            </ul>
            <br>
            <ul>
    
                <li>
                    <a href="http://www.bincheng.gov.cn/">滨城区人民政府</a>
                </li>
                <li>
                    <a href="http://www.zhanhua.gov.cn/">沾化区人民政府</a>
                </li>
                <li>
                    <a href="http://www.huimin.gov.cn/">惠民县人民政府</a>
                </li>
                <li>
                    <a href="http://www.yangxin.gov.cn/">阳信县人民政府</a>
                </li>
                <li>
                    <a href="http://www.wudi.gov.cn/">无棣县人民政府</a>
                </li>
                <li>
                    <a href="http://www.boxing.gov.cn/">博兴县人民政府</a>
                </li>
                <li>
                    <a href="http://www.zouping.gov.cn/">邹平市人民政府</a>
                </li>
            </ul>
    
    
        </div>>
        
        <div class="footer">
            <p>Copyright © 2020 物联网应用技术二班周春磊作品
                <br>建议使用IE9以上的浏览器
            </p>
        </div>
    
    
    
    
        
        
        
    
        <div class="ad" id="gg1">
            <a href="javascript:;"><img class="ad-img" src="images/ad.png" border="0" title="大美滨州欢迎你" alt="大美滨州欢迎你"></a>
        </div>
        <script type="text/javascript"> var ad1 = new AdMove("gg1"); ad1.Run(); </script>
    </body>
    
    
    </html>

css部分

/* 全局修改 */
                
                body { 
              /* 推荐的渐变色*/
                    /* background: linear-gradient(0deg, #eebd89, #d13abd); */
                    /* background: linear-gradient(0deg, #eae5c9, #6cc6cb); */
                   background: linear-gradient(0deg, #ccfbff, #ead6ee);
                   
    /*background:url(https://csdnimg.cn/release/phoenix/template/themes_skin/skin-whitemove/images/bg.gif) ;*/
    
                    background-size: cover;
                    background-position: auto auto;
                }
                /* 选中的 */
                
                .xz { 
                    background-color: rgb(83, 82, 82);
                    color: red;
                }
                
                .xz a { 
                    color: red;
                }
                
                li { 
                    background-color: rgb(196, 192, 192);
                }
                /* 版心大小1300px */
                
                .w { 
                    margin: 0 auto;
                    width: 1300px;
                }
                /* 顶部图片的区域 */
                /* 顶部图片的区域 */
                /* 顶部图片的区域 */
                /* 顶部图片的区域 */
                /* 顶部图片的区域 */
                /* 顶部图片的区域 */
                
                @keyframes qh { 
                    /*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/
                    0%, 20% { 
                        margin-left: 0px;
                    }
                    25%, 40% { 
                        margin-left: -1200px;
                    }
                    45%, 60% { 
                        margin-left: -2400px;
                    }
                    65%, 80% { 
                        margin-left: -3600px;
                    }
                    85%, 100% { 
                        margin-left: -4800px;
                    }
                }
                
                .box-top { 
                    border-radius: 20px;
                    width: 1200px;
                    height: 300px;
                    overflow: hidden;
                }
                
                .box-top .kuai { 
                    display: block;
                    background-color: pink;
                    width: 6600px;
                    height: 300px;
                    animation: qh 8s linear infinite;
                }
                
                .box-top li { 
                    float: left;
                    width: 1200px;
                    height: 300px;
                }
                
                .box-top img { 
                    width: 1200px;
                    height: 100%;
                }
                /* 宣传片部分 */
                
                .xcp { 
                    margin-top: 10px;
                    padding-top: 10px;
                    border-radius: 10px;
                    height: 740px;
                    width: 1240px;
                    background-color: white;
                    text-align: center;
                }
                /* 导航栏部分开始了 */
                /* 导航栏部分开始了 */
                /* 导航栏部分开始了 */
                
                .box-nav ul { 
                    margin-top: 10px;
                    text-align: center;
                    line-height: 50px;
                    font-size: 20px;
                    color: black;
                    font-weight: 700;
                }
                
                .box-nav ul li { 
                    display: inline-block;
                    width: 16%;
                    height: 50px;
                    border-radius: 10px;
                    /* background-color: #7CCD7C; */
                }
                
                .box-nav ul li:hover { 
                    background-color: rgb(120, 122, 120);
                }
                /* 主页的主体部分 */
                /* 主页的主体部分 */
                /* 主页的主体部分 */
                /* 主页的主体部分 */
                /* 主页的主体部分 */
                /* 主页的主体部分 */
                
                .box-main { 
                    padding-left: 12px;
                    margin-top: 10px;
                    text-align: center;
                }
                
                .box-main-mokuai { 
                    float: left;
                    margin: 0 5px 10px 5px;
                    width: 630px;
                    height: 375px;
                    background-color: #fff;
                    border-radius: 20px;
                    color: black;
                    /* overflow: hidden; */
                }
                
                .box-main-mokuai div { 
                    float: left;
                }
                
                .box-main-mokuai { 
                    padding-top: 20px;
                }
                
                .box-main-mokuai .box-main-mokuai-1 { 
                    width: 260px;
                    line-height: 260px;
                }
                
                .box-main-mokuai .box-main-mokuai-1 img { 
                    width: 90%;
                    /* 添加动画 */
                    transition: all 0.6s;
                }
                /* 当鼠标经过时放大2倍 */
                
                .box-main-mokuai .box-main-mokuai-1 img:hover { 
                    transform: scale(2);
                }
                
                .box-main-mokuai .box-main-mokuai .box-main-mokuai-1-img { 
                    height: 80%;
                }
                
                .box-main-mokuai .box-main-mokuai-2 { 
                    /* flex布局 */
                    display: flex;
                    /* 设置主轴 */
                    justify-content: center;
                    flex-direction: column;
                    align-items: left;
                    padding-right: 5px;
                    width: 360px;
                    height: 88%;
                    font-size: 15px;
                    text-indent: 2em;
                    text-align: left;
                }
                /* 外链部分 */
                /* 外链部分 */
                /* 外链部分 */
                
                .wl { 
                    height: 180px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    padding-top: 25px;
                    border-radius: 20px;
                    background-color: white;
                    text-align: center;
                    font-weight: 700;
                }
                
                .wl ul li { 
                    display: inline;
                    border-radius: 20px;
                    background-color: transparent;
                    font-size: 18px;
                    margin: 0 10px;
                }
                /* 页脚部分 */
                /* 页脚部分 */
                /* 页脚部分 */
                
                .footer { 
                    width: 100%;
                    height: 70px;
                    background-color: #A9A9A9;
                    text-align: center;
                }
                
                .footer p { 
                    padding-top: 20px;
                }
                /* 漂浮的广告 */
                
                .ad { 
                    width: 200px;
                    height: 200px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                
                .ad-img { 
                    width: 100%;
                    height: 100%;
                    float: right;
                }

js部分

转载请说明出处

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDU5ODQ1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200614142701247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDU5ODQ1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDU5ODQ1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200620091516281.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDU5ODQ1,size_16,color_FFFFFF,t_70