【html网页页面007】html+css制作旅游主题内蒙古网页制作含注册表单(4页面附效果及源码)

旅游家乡主题网页制作

🥤1、写在前面

家乡网站主题内蒙古的网页 一共4个页面

  • 网页使用html+css制作
  • 页面可以相互跳转 包含图文、菜单列表页面、表单页面
  • 含注册页面等
  • 网页可以使用vscode hbuilder dw等打开修改
  • 里面的图片和文字都可以替换为其他内容
  • html静态网页 没有复杂效果 布局简单 原创html网页设计 适合当作业使用
  • 设计感强,要求质量审美的可以观摩。

静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计,常用的网页设计软件有Dreamwea ver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,比如家乡、美食、旅游、摄影、电影、音乐等等多种主题,希望对大家有所帮助。

🍧2、涉及知识

html+css旅游内蒙主题,家乡网页制作css+div,家乡内蒙古网页,4页网页制作含表单,静态页面html网页。html家乡内蒙古主题网页,表单网页制作,旅游主题网页html

🌳3、网页效果

完整效果:

page1、首页

page2、民族文化

page3、著名景区

page4、留言

代码结构:

🌈4、网页源码

4.1 html

html 复制代码
<div class="topmenu">
            <ul>
                <a href="index.html">
                    <li class="hover">首页</li>
                </a>
                <a href="xisu.html">
                    <li>民族文化</li>
                </a>

                <a href="index.html">
                    <li>
                        <img width="60" src="images/logo.png" alt="">
                    </li>
                </a>
                <a href="laiyuan.html">
                    <li>著名景区</li>
                </a>
                <a href="login.html">
                    <li>注册模块</li>
                </a>
            </ul>
        </div>
        <div class="main">
            <div class="main1">
                <img src="images/img1.jpg" alt="">
                <div class="righttxx" id="tiptle">
                    <p>内蒙古自治区,简称"内蒙古",中华人民共和国省级行政区,首府呼和浩特。地处中国北部,地理上位于北纬37°24′-53°23′,东经97°12′-126°04′之间,东北部与黑龙江、吉林、辽宁、河北交界,南部与山西、陕西、宁夏相邻,西南部与甘肃毗连,北部与俄罗斯、蒙古接壤,属于四大地理区划的西北地区
                    </p>
                    <p>
                        内蒙古自治区地势由东北向西南斜伸,呈狭长形,全区基本属一个高原型的地貌区,全区涵盖高原、山地、丘陵、平原、沙漠、河流、湖泊等地貌,气候以温带大陆性气候为主,地跨黄河、额尔古纳河、嫩江、西辽河四大水系。
                    </p>
                </div>
            </div>
       </div>
</div>

4.2 CSS

css 复制代码
* {
    padding: 0;
    margin: 0;
}

body, html {
    width: 100%;
    height: 100%;
    font-size: 13px;
    background-color: #AEBCAF;
}

.duanwu {
    width: 1100px;
    height: auto;
    margin: 0 auto;
}

.topmenu {
    width: 100%;
    height: 60px;
    background-color: #A9CEBD;
    line-height: 60px;
    font-size: 26px;
    font-family: 'KaiTi';
}

ul {
    width: 100%;
    list-style: none;
}

ul a {
    color: #333;
    font-weight: bold;
}

4.3 源码获取

完整源码包尽在 IT黄大大官网 ithdd.com.cn

也可走这个方式进入:

🐋5、作者寄语

如果觉得我这篇博客对您有帮助,请 "👍点赞" "✍️评论" "💙收藏" 一键三连哦!

更多主题及完整源码 尽在【IT黄大大】网站,有很多主题优质网页源码。

以上有问题可以随时交流学习,一起进步!

有任何不懂的和意见都可以评论区留言,也可私信,博主都会认真回复哟!

相关推荐
bluceli11 小时前
CSS容器查询:响应式设计的新范式
前端·css
Bigger13 小时前
CSS 这些年都经历了什么?一次看懂 CSS 的演化史
前端·css·前端工程化
anOnion1 天前
构建无障碍组件之Switch Pattern
前端·html·交互设计
大漠_w3cpluscom2 天前
使用 clip-path: shape() 创建 Squircle 形状
前端·css·weui
会员源码网4 天前
告别参数混乱:如何优雅解决方法参数过多导致的可维护性难题
css
Lee川5 天前
现代Web开发中的CSS继承、Flexbox布局与LocalStorage交互:从文档解析到实践应用
前端·css
helloweilei5 天前
CSS进阶: background-clip
css
DeathGhost6 天前
CSS container容器查询
前端·css
不会敲代码16 天前
前端组件化样式隔离实战:React CSS Modules、styled-components 与 Vue scoped 对比
css·vue.js·react.js
Sailing6 天前
🚀 别再乱写 16px 了!CSS 单位体系已经进入“计算时代”,真正的响应式布局
前端·css·面试