纯css+html 简单的 我的家乡——荆门网站前端设计

已于 2023-06-29 17:21:26 修改
阅读量572 收藏 5
点赞数 2
文章标签： 前端 css html
于 2023-06-29 16:51:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54044331/article/details/131459579
版权 

<!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>
    <style>
        body,
        html {
            background-attachment: fixed;
            background-repeat: no-repeat;
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            background-image: url(./100.png);
        }
        
        #div0 {
            /* float: left; */
            background-color: white;
            margin: 0 auto;
            width: 1000px;
            height: 3000px;
        }
        
        #div1 {
            position: relative;
            background-color: darkgray;
            width: 100%;
            height: 1.2%;
        }
        
        #div2 {
            width: 100%;
            height: 12%;
        }
        
        #div2 img {
            width: 100%;
            height: 100%;
        }
        
        #div3 {
            position: relative;
            top: 4px;
            width: 100%;
            height: 3%;
        }
        
        #div4 {
            width: 99%;
            height: 1000px;
            background-color: white;
        }
        
        #p1 {
            overflow: hidden;
            display: inline-block;
            border: 1px solid rgb(233, 220, 220);
            width: 40%;
            height: 30%;
            float: left;
        }
        
        #p2 {
            overflow: hidden;
            border: 1px solid rgb(233, 220, 220);
            margin-left: 19%;
            width: 40%;
            height: 30%;
            float: left;
        }
        
        #p3 {
            overflow: hidden;
            border: 1px solid rgb(233, 220, 220);
            width: 40%;
            height: 30%;
            margin-top: 5%;
            float: left;
        }
        
        #p4 {
            overflow: hidden;
            border: 1px solid rgb(231, 221, 221);
            width: 40%;
            height: 30%;
            float: left;
            margin-top: 5%;
            margin-left: 19%;
        }
        
        #dh1 {
            animation: 4s dh1 ease-out forwards;
            position: relative;
            right: 200px;
        }
        
        @keyframes dh1 {
            to {
                right: 0
            }
        }
        
        #li1 {
            color: coral;
            width: 100px;
            text-align: center;
            font-size: 25px;
            float: left;
            margin-left: 97px;
        }
        
        #li2,
        #li3,
        #li4 {
            width: 100px;
            text-align: center;
            font-size: 25px;
            float: left;
            margin-left: 108px;
        }
        
        #div3 p:hover {
            color: red;
        }
        
        #div4 {
            border: 1px solid white;
            border-top-color: wheat;
            text-align: center;
        }
        
        #div4 img {
            height: 70%;
            width: 100%;
        }
        
        #li6 {
            margin-top: 2px;
            position: relative;
            font-weight: 200;
            font-size: 20px;
        }
        
        #pc1 {
            width: 4%;
            height: 90%;
            position: absolute;
            right: 300px;
        }
        
        #pc2 {
            position: absolute;
            top: 10px;
            right: 50px;
        }
        
        #li7 {
            border: 1px solid rgb(134, 131, 131);
            background-color: rgb(134, 131, 131);
            color: aliceblue;
            font-size: 30px;
            height: 50px;
            width: 600px;
            border-radius: 0 20px 0 20px;
        }
        
        #div5 img {
            width: 300;
            height: 200px;
        }
        
        #div5 {
            position: relative;
            width: 100%;
            height: 220px;
        }
        
        #div5 p {
            width: 600px;
            float: right;
        }
        
        #li8 {
            border: 1px solid rgb(134, 131, 131);
            background-color: rgb(134, 131, 131);
            color: aliceblue;
            font-size: 30px;
            height: 50px;
            width: 600px;
            position: relative;
            right: -400px;
            border-radius: 20px 0 20px 0;
        }
        
        #div6 img {
            width: 300;
            height: 200px;
        }
        
        #div6 {
            width: 100%;
            height: 220px;
            position: relative;
            left: 0px;
        }
        
        #div6 p {
            width: 600px;
            float: right;
        }
        
        #li9 {
            color: rgb(14, 245, 245);
            text-align: center;
            font-size: 30px;
            font-weight: 500;
        }
        
        #div8 img {
            width: 100%;
            height: 10%;
        }
        
        #div8 img {
            width: 30%;
            height: 30%;
            margin-left: 22px;
        }
        
        #x1 {
            border-radius: 6px 6px 6px 6px;
            background-color: rgb(230, 231, 241);
            position: fixed;
            margin-top: 7%;
            margin-left: 2%;
            float: left;
            width: 15%;
            height: 75%;
        }
        
        #x2 {
            border-radius: 6px 6px 6px 6px;
            position: fixed;
            left: 83%;
            top: 13%;
            float: right;
            width: 15%;
            height: 75%;
            background-color: #E6E7F2;
        }
        
        #ul li {
            line-height: 50px;
        }
        
        #ul li:hover {
            color: orange;
            line-height: 50px;
            font-size: 20px;
        }
        
        #ul {
            height: 100%;
            width: 100%;
        }
        
        #div20 {
            width: 100%;
            height: 40%;
            margin-top: -240px;
        }
        
        #x2-1 {
            text-align: center;
            font-size: 20px;
            font-weight: 400;
            width: 100%;
            height: 5%;
        }
        
        #x2-2 {
            width: 100%;
            height: 95%;
        }
        
        #divx2-2-2 {
            float: left;
            text-align: center;
            width: 33.3%;
            height: 16.6%;
        }
        
        #divx2-2-2:hover {
            color: orange;
        }
        
        #divx2-2-2 img {
            height: 60%;
            width: 80%;
        }
        
        #divx2-2-2 img:hover {
            height: 67%;
            width: 90%;
        }
        
        #div9 {
            text-align: center;
            height: 20px;
            background-color: red;
            color: #E6E7F2;
            font-size: 30px;
            font-weight: 500;
        }
        
        #divfd1 img,
        #divfd2 img {
            width: 100%;
            height: 1000px;
        }
        
        #divfd1 {
            overflow: hidden;
            width: 926px;
            position: relative;
            top: -3020px;
            float: left;
            animation: 8s dh3 ease-out forwards;
            animation-fill-mode: forwards;
            position: relative;
            left: 0px;
        }
        
        #divfd2 {
            overflow: hidden;
            width: 926px;
            position: relative;
            top: -3020px;
            float: left;
            animation-fill-mode: forwards;
            animation: 8s dh4 ease-out forwards;
            position: relative;
            left: 0px;
        }
        
        @keyframes dh3 {
            to {
                left: -950px;
            }
        }
        
        @keyframes dh4 {
            to {
                left: 950px;
            }
        }
    </style>
</head>

<body>
    <div id="x1">

        <ul id="ul">
            <li> 世界地质公园中国名录</li>
            <li>世界违产中国名录</li>
            <li>网红飙升仙境</li>
            <li>国家级风景名胜区</li>
            <li>法国菜系</li>
            <li>中国菜系</li>
            <li>意大利菜系</li>
            <li>国家五星级温泉名录</li>
            <li>国家级地质公园</li>
            <li>国家级湿地公园</li>
            <li>国家级森林公园</li>
            <li>全国重点文物保护单位</li>
            <li>全国重点佛教寺院名单</li>
        </ul>
    </div>

    <div id="x2">
        <div id="x2-1">热门</div>
        <div id="x2-2">
            <div id="divx2-2-2"><img src="daohanglan/1.png" alt=""><br>景区百强</div>
            <div id="divx2-2-2"><img src="daohanglan/2.png" alt=""><br>4A景区</div>
            <div id="divx2-2-2"><img src="daohanglan/3.png" alt=""><br>秋季赏叶</div>
            <div id="divx2-2-2"><img src="daohanglan/4.png" alt=""><br>温泉</div>
            <div id="divx2-2-2"><img src="daohanglan/5.png" alt=""><br>赏银杏</div>
            <div id="divx2-2-2"><img src="daohanglan/6.png" alt=""><br>红叶</div>
            <div id="divx2-2-2"><img src="daohanglan/7.png" alt=""><br>名山</div>
            <div id="divx2-2-2"><img src="daohanglan/8.png" alt=""><br>胡杨林</div>
            <div id="divx2-2-2"><img src="daohanglan/9.png" alt=""><br>梯田</div>
            <div id="divx2-2-2"><img src="daohanglan/10.png" alt=""><br>公园主题乐园</div>
            <div id="divx2-2-2"><img src="daohanglan/11.png" alt=""><br>寺庙</div>
            <div id="divx2-2-2"><img src="daohanglan/12.png" alt=""><br>古镇</div>
            <div id="divx2-2-2"><img src="daohanglan/13.png" alt=""><br>露营</div>
            <div id="divx2-2-2"><img src="daohanglan/14.png" alt=""><br>峡谷</div>
            <div id="divx2-2-2"><img src="daohanglan/15.png" alt=""><br>溶洞</div>
            <div id="divx2-2-2"><img src="daohanglan/16.png" alt=""><br>土林砂石</div>
            <div id="divx2-2-2"><img src="daohanglan/17.png" alt=""><br>丹霞</div>
            <div id="divx2-2-2"><img src="daohanglan/18.png" alt=""><br>卡斯特</div>
        </div>
    </div>
    <div id="div0">
        <div id="div1"><img src="./1.png" alt="" id="pc1">
            <form action="https://www.sogou.com/tx" id="pc2">
                <input type="text" name="query">
                <input type="submit" value="搜索">
                <input type="hidden" value="utf8" name="IE">
            </form>
        </div>
        <div id="div2"><img src="./7.gif" alt="">

        </div>
        <div id="div3">
            <a href="./lwqddzy.html" target="content">
                <p id="li1">首页</p>
            </a>
            <a href="./ys.html" target="content">
                <p id="li2">饮食文化</p>
            </a>
            <a href="./ls.html" target="content">
                <p id="li3">历史文化</p>
            </a>
            <a href="./ly.html" target="content">
                <p id="li4">旅游文化</p>
            </a>
        </div>
        <div id="div4">
            <p id="li6">楚塞三湘接，荆门九派通”。荆门地处中部之中、湖北之中，是长江中游城市群和汉江生态经济带重要节点城市，华中地区重要交通枢纽，素有“荆楚门户”之称</p><br><br>
            <div id="p1"><span id="dh1"><img src="./db.jpg" alt=""><br><br><br>东宝区，一个美丽的地方<br>A beautiful place</span></div>
            <div id="p2"><span id="dh1"><img src="./dd.jfif" alt=""><br><br><br>掇刀区，一个精彩的城市<br>A wonderful city</span></div>
            <div id="p3"><span id="dh1"><img src="./zh.jfif" alt=""><br><br><br>漳河新区，山水环绕<br>Surrounded by mountains and rivers</span></div>
            <div id="p4"><span id="dh1"><img src="./syf.jpg" alt=""><br><br><br>沙洋县，油菜花海<br>Rape flowers</span></div>

        </div>
        <div id="div20">
            <p id="li7">东宝区</p>
            <div id="div5">
                <img src="./3.jpg" alt="">
                <p>东宝区是中国湖北省荆门市所辖的一个市辖区，东与钟祥市毗邻，西与远安县、南漳县交界，北与宜城市接壤，南接当阳市、沙洋县。 风景名胜:东宝历史悠久，山川秀美。巍然耸立的东山宝塔，历经1400多年的沧桑依然形态稳健，气势轩昂；建于南宋绍兴年间的龙泉书院古朴典雅，学风浓厚，培育出一代代英才，点缀其间的象山四泉（龙泉、蒙泉、惠泉、顺泉）闻名遐迩；</p>
            </div>
            <p id="li8">掇刀区</p>
            <div id="div6">
                <img src="./4.jpg" alt="">
                <p>掇刀区是湖北省荆门市所辖的一个市辖区，是楚文化、三国文化的重要发祥地之一。 风景名胜 掇刀，历史悠久，文化底蕴深厚，是楚文化、三国文化的重要发祥地之一。响岭岗东周文化遗址被考古专家考证为一处保存较完好的地下楚文化宝库。掇刀石、望兵石、古驿道、马跑泉、关帝庙、长坂坡古战场等三国遗迹尚存，令人流连忘返。这里， 山水秀丽，风光宜人，有国家级千佛洞森林公园，山高林密，峰秀谷幽，层峦叠翠；这里，人杰地灵，人才辈出，有清代名臣周培公、辛亥革命时期的留德医学博士陈雨苍、新中国上将陈士榘、少将邓家泰，还有当代著名画家李可梅等，真可谓“唯楚有才”!</p>
            </div>
            <p id="li7">漳河新区</p>
            <div id="div5">
                <img src="./5.gif" alt="">
                <p>漳河风景区位于湖北省荆门市漳河新区，是国家AAAA级旅游景区。漳河风景区以闻名全国的漳河水库为依托，风景秀丽、水域宽阔、神韵独特，水质天然纯净，是“活化石”桃花水母的生息地，也是一个集水上运动、休闲度假、生态观光、文化体验为一体的世界知名、国内一流的水文化休闲度假旅游区。这里属于亚热带季风气候，四季分明，是真正的“清凉世界”，也是夏天避暑的好去处。</p>
            </div>
            <p id="li8">沙洋县</p>
            <div id="div6">
                <img src="./6.jpg" alt="">
                <p>沙洋县，隶属湖北省荆门市，地处汉江中下游，江汉平原北端，东临汉江与钟祥市、天门市隔江相望；西濒漳水，与当阳市毗临；南滨长湖，与荆州、潜江交界 [1] ；北靠荆山余脉，与掇刀区、东宝区接壤。 [2-3] 总面积2044平方千米，下辖13个镇。 [3] 根据第七次人口普查数据，截至2020年11月1日零时，沙洋县常住人口395717人 [4] 。位于武汉城市圈和鄂西生态文化旅游圈的结合部，毗邻汉江，水运畅通，素有“汉江明珠”、“小汉口”等美誉 [5] ，沙洋县境内有襄荆高速公路穿过和国道207、234、348线和汉宜线等一级公路途经。
                </p>
            </div>
        </div>
        <div id="div8">
            <p id="li9">精美图集
            </p>
            <img src="./jm.jpg" alt="">
            <img src="./8.webp" alt="">
            <img src="./9.webp" alt="">
            <img src="./10.webp" alt="">

            <img src="./11.webp" alt=""><img src="./12.webp" alt=""> </div>
    </div>
    <div id="div9">Welcom to jingmen 欢迎来到荆门，荆门人民欢迎您！@武汉华夏理工学院刘文强</div>

    <div id="divfd1"><img src="cs/2.png" alt=""></div>
    <div id="divfd2"><img src="cs/3.png" alt=""></div>

</body>

</html>

全部文件自取git： https://gitee.com/ghhcfhgfh_0/yuchuan-xiaohan.git

qq_54044331
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html+css模板 我的家乡有模板
04-21
漂亮的网页制作模板 我的家乡 html+css模板 代码格式规范
web前端期末大作业：我的家乡广东（html+css布局）div制作
qq_365392777
09-26 882
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
HTML+CSS制作简单的家乡网页 ——我的家乡介绍广东 web前端期末大作业
有问必答，欢迎打扰，项目开发，网页设计
05-22 614
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
HTML+CSS网页设计与制作 (我的家乡)
mon_star°的博客
12-06 5510
HTML+CSS网页设计与制作，我的家乡网页代码， 本实例适合于初学HTML+CSS的同学。该案例里面有div+css的样式布局设置，这个实例比较全面，有助于同学的学习。本文将介绍如何通过从零开始设计个人网站，并将其转换为代码的过程来实现设计与制作。大学生网页作业制作 (HTML+CSS)、大学生HTML期末大作业。HTML+CSS网页设计与制作 (我的家乡)
HTML学生网页设计作业成品~化妆品官方网站设计与实现(HTML+CSS+JS)共8个页面
热门推荐
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-24 1万+
HTML学生网页设计作业成品—化妆品官方网站设计与实现 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 关于HTML网页设计期末课程大作业实现，大作业A+水平 ~，包括：清水岩 公司简介 产品一览 新闻中心 联系我们 在线留言 招商加盟 新闻内容
计算机毕业设计HTML+CSS+JavaScript——基于HTML花店购物网站项目与实现.md
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
在IT行业中，前端开发是构建网站用户界面的关键环节，它主要涉及HTML、CSS、JavaScript以及各种前端框架。本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个...
web前端期末结课大作业 html+css+javascript网页设计实例 企业网站制作
11-15
期末结课大作业 html+css+javascript网页设计实例 企业网站制作，资源里面有网页的HTML文件、CSS文件、JAVASCRIPT文件和网页中的图片文件，用于大学web网页课程设计参考以及相关从业人员参考学习
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
HTML5+CSS3前端小案例——移动端购物支付页面
08-18
黑马的案例，跟着视频学完后做的。 在练习HTML和CSS的同学们可以拿去参考，做个小案例练练手。 内容涉及flex布局、公共样式公共类的挑选、多个大盒子与多个小盒子的嵌套（div>li>span、p>span等...使用网站：iconfont
个人网页介绍家乡纯html
10-26
设计工具用Dreamweaver8.0、Flash8.0、Photoshop CS 网站基本栏目（至少就包含以下5个栏目） 1）个人网站首页（） 2）自我介绍 注：运用表格布局 3）我的家乡 家乡概况、家乡地标、家乡美食、家乡名胜 等 注：综合运用框架、DIV+CSS布局 4）我的相册 快乐的童年、校园生活 等 5）雁过留声(表单) 用表单制作一个留言表的框架
html+css我的家乡.zip
06-24
挺简单的，有6个页面，是我期中交的作业。
家乡CSS模版
10-23
DREANVEAR CSS教程 家乡 做得很辛苦，我的家乡，用于网页设计课程验收，运行环境是Dreamwaver，完整的哦...
如何使用html、css制作一个期末作业网站【羽毛球体育运动主题html网页设计】
QQ_____365392777的博客
08-06 314
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
使用html+css实现一个静态页面（厦门旅游网站制作6个页面） 旅游网页设计制作 HTML5期末考核大作业，网站——美丽家乡。 学生旅行 游玩 主题住宿网页
qq_38515154的博客
04-22 744
👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景
湖北 我的家乡主题 网页设计 html源码 大作业
最新发布
VX_laoxuezhangzy的博客
06-06 194
【html+css+javascript】旅游11页 湖北主题网页 带js轮播图 代码带注释。主要分为 首页、关于湖北（有视频）、美食特色·、旅游景点、文化特色以及6个文化特色的详情介绍。dw、hbuilder、vscode、sublime等编辑软件都可打开运行修改图片文字代码。网页比较简单，适合初学者 ,学生网页。用到的是flex弹性布局。
基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码 学生个人html静态网页制作成品代码
qq__3200628753的博客
01-06 817
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。...
HTML+CSS+JS打造旅游摄影网站：静态网页设计实践
在旅游摄影网站中，CSS可以用来设计简洁的布局、调色板，以及优化图片展示，如阴影、过渡和动画效果，以提升用户体验。 JavaScript是一种动态编程语言，它使网页具有交互性。在旅游摄影网站的实现中，JavaScript...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值