当前位置：首页 > article >正文

【html网页页面002】html+css制作实现家乡江苏网页主题制作（5页面附效果图）

article 2024/11/18 10:54:08

个人主题网页制作

1、写在前面
2、涉及知识
3、网页效果
4、网页源码
- 4.1 html
- 4.2 CSS
5、作者寄语

1、写在前面

家乡旅游主题的网页一共5个页面

江苏网页使用html+css制作
页面可以相互跳转包含表单三级页面
网页可以使用vscode hbuilder dw等打开修改
里面的图片和文字都可以替换为其他内容
html静态网页没有复杂效果布局简单原创html网页设计适合当作业使用

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

2、涉及知识

html+css网页制作，个人主题网页制作，静态页面html网页。家乡网页制作，江苏家乡网页，旅游网页html

3、网页效果

完整效果：
在这里插入图片描述

page1、
在这里插入图片描述

page2、
在这里插入图片描述

page3、
在这里插入图片描述

page4、
在这里插入图片描述

page5、
在这里插入图片描述

代码结构：
在这里插入图片描述

4、网页源码

4.1 html

<div class="cha">
        <div class="cha_top">
            <div class="cha_div">
                <div class="cha_bt">
                    <h4> [ 运河之都 ] </h4>
                    <p>襟吴带楚客多游，壮丽东南第一州</p>
                    <img src="img/1.png" alt="">
                </div>
                <div class="cha_menu">
                    <ul>
                        <a href="index.html">
                            <li class="apper">主页</li>
                        </a>
                        <a href="sub1.html">
                            <li>著名人物</li>
                        </a>
                        <a href="sub2.html">
                            <li>风景名胜</li>
                        </a>
                        <a href="sub3.html">
                            <li>美食特产</li>
                        </a>
                        <a href="connect.html">
                            <li>联系我们</li>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cha_int1">
            <div class="cha_intr">
                <h2>ABOUT HUAIAN</h2>
                <div class="line"></div>
                <p>关于淮安</p>
                <p>淮安市，简称“淮”，旧称淮阴市 <br>
                    江苏省辖地级市，Ⅱ型大城市<br>
                    淮安于秦时置县，有2200多年建城史<br>
                    境内有“青莲岗文化”遗址<br>
                    曾是漕运枢杻，盐运要冲<br>
                    有“中国运河之都”的美誉</p>
                <a href="#"><span>我的家乡</span></a>
            </div>
        </div>

4.2 CSS

* {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

body, html {
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-family: 'KaiTi';
    overflow-x: hidden;
}

.cha {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-color: #efefef;
}

.cha_top {
    width: 100%;
    height: 600px;
    background-image: url(../img/bg.jpg);
    background-size: 100% 100%;
    overflow: hidden;
}

.cha_div {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    overflow: hidden;
}