HTML+CSS+JavaScript网页设计与制作实例 -我的家乡（6个页面）

原创最新推荐文章于 2024-12-14 15:35:16 发布 8.7k 阅读 AI写同款

WebDesign_Mu

544粉丝41篇原创

关注

制作一个简单HTML静态网页（HTML+CSS） 🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获优快云年度十大博客之星。十载寒冰，难凉热血；多年过去，历经变迁，物是人非。然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒... 阅读详情

AI摘要

该博客介绍了“我的家乡”静态网站，运用HTML、CSS和JavaScript技术，包含六个页面展示家乡风貌。设计注重风格统一、用户体验和响应式设计，采用DIV+CSS布局，提高加载速度与SEO。详细说明了页面结构、技术应用等内容。

一、网站描述

“我的家乡” 网页是一个以介绍家乡为主题的静态网站，通过 HTML、CSS 和 JavaScript 技术实现。该网站包含六个静态页面，分别是家乡介绍、家乡景点、家乡美食、家乡发展、家乡人文以及联系我们。旨在向用户全面展示家乡的风貌、特色和魅力，让更多的人了解和喜爱自己的家乡。

二、作品介绍

每个页面都经过精心策划与设计，力求通过生动的文字、精美的图片和流畅的交互体验，带领访问者走进我的家乡，感受其独特的自然风光、悠久的历史文化、丰富的美食资源以及近年来的快速发展。

家乡介绍页面：提供了对家乡的总体概述，包括地理位置、历史背景、人口规模等基本信息。通过文字和图片的结合，让用户对家乡有一个初步的认识。
家乡景点页面：展示了家乡的著名景点，如自然风光、历史遗迹、文化景观等。每个景点都配有详细的介绍和精美的图片，让用户可以直观地感受家乡的美丽。
家乡美食页面：介绍了家乡的特色美食，包括传统菜肴、小吃、饮品等。通过图片和文字的描述，让用户了解家乡美食的独特风味。
家乡发展页面：展示了家乡的经济发展、城市建设、科技创新等方面的成就。通过数据和案例的呈现，让用户看到家乡的进步和变化。
家乡人文页面：介绍了家乡的文化传统、民俗风情、艺术表演等方面的内容。通过图片和文字的介绍，让用户感受家乡的文化底蕴。
联系我们页面：提供了联系方式，方便用户与网站管理员进行沟通和交流。

三、设计说明

在设计过程中，我注重保持整体风格的统一与和谐，采用清新自然的色调搭配，以及简洁明了的布局结构，营造出一种温馨舒适的浏览环境。同时，为了增强用户体验，我特意在每个页面中都加入了适量的动画效果和交互元素，如鼠标悬停效果、图片轮播等，使得整个网站更加生动有趣。此外，我还特别注重了响应式设计，确保网站能够在不同尺寸的屏幕上都能良好地展示。

色彩搭配：采用了与家乡特色相关的色彩，如绿色代表家乡的自然风光，蓝色代表家乡的河流湖泊，黄色代表家乡的丰收和繁荣。整体色彩搭配和谐，给人以舒适的视觉感受。
布局设计：采用了简洁明了的布局，各个页面的内容分布合理，易于用户浏览和阅读。导航栏位于页面顶部，方便用户快速切换不同的页面。页面主体部分采用了分栏布局，将文字和图片分别展示，增强了页面的可读性和美观性。
图片选择：选择了高质量的图片，展示家乡的美丽风景、特色美食和文化活动。图片经过精心处理，大小适中，不会影响页面的加载速度。
文字排版：采用了清晰易读的字体，文字大小适中，颜色与背景搭配协调。段落之间的间距合理，增强了页面的可读性。

四、DIV+CSS 布局

本网站采用DIV+CSS的布局方式，实现了页面内容的灵活排版与精确定位。通过合理使用CSS样式表，我成功地将网页内容划分为多个独立的DIV区块，并对每个区块进行了细致的样式设置，包括字体大小、颜色、边距、填充等。这种布局方式不仅提高了页面的加载速度，还有利于搜索引擎优化（SEO），使得网站更容易被搜索引擎收录和排名。

结构清晰：使用 DIV 标签将页面划分为不同的区域，如头部、导航栏、主体内容、底部等。每个区域都有明确的职责和功能，使得页面结构更加清晰。
样式分离：使用 CSS 样式表对页面进行美化和布局。将样式与内容分离，使得页面的维护更加方便。可以通过修改 CSS 样式表来改变整个网站的外观和布局，而不需要修改每个页面的 HTML 代码。

五、页面结构

头部：包含网站的 logo、导航栏和搜索框等元素。
主体内容：根据不同的页面展示不同的内容，如家乡介绍、景点、美食、发展、人文等。
底部：包含版权信息、联系方式和友情链接等元素。

六、网页作品技术

HTML：用于构建网页的结构和内容。
CSS：用于美化网页的外观和布局。
JavaScript：用于实现网页的交互效果和动态功能。
图片处理：使用图片处理软件对图片进行优化和处理，以提高图片的质量和加载速度。

七、作品演示

动态演示

家乡介绍

家乡景点

家乡美食

家乡发展

家乡人文

联系我们

八、代码目录

九、代码演示

首页-家乡介绍html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家乡介绍</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <!-- logo -->
        <img src="./images/logo.png" class="logo" alt="" />
        <!-- 导航栏 -->
        <div class="nav">
            <ul>
                <li>
                    <a class="active" href="./index.html" target="_self">
                        <span title="家乡介绍">家乡介绍</span>
                    </a>
                </li>
                <li>
                    <a href="./attractions.html" target="_self">
                        <span title="家乡景点">家乡景点</span>
                    </a>
                </li>
                <li>
                    <a href="./delicacy.html" target="_self">
                        <span title="家乡美食">家乡美食</span>
                    </a>
                </li>
                <li>
                    <a href="./about.html" target="_self">
                        <span title="家乡发展">家乡发展</span>
                    </a>
                </li>
                <li>
                    <a href="./humanity.html" target="_self">
                        <span title="家乡人文">家乡人文</span>
                    </a>
                </li>
                <li>
                    <a href="./contact.html" target="_self">
                        <span title="联系我们">联系我们</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 主内容 -->
    <div class="main-content">
        <div class="banner">
            <img src="./images/R-C.jpg" alt="" />
        </div>
        <div class="project-content">
            <p class="content-title">家乡介绍</p>
            <div class="detail-content">
                <div class="detail-pic">
                    <img src="./images/aca69c05cdaa4c40943507fcebd5f884.jpeg" alt="" />
                </div>
                <div class="detail-desc">
                    <p>云浮市，广东省辖地级市，位于广东省中西部，西江中游以南。土地面积7786.64平方千米（其中市区面积1967.28平方千米），下辖2个区、2个县、代管1个县级市。截至2022年末，云浮市常住人口239.65万人。</p>
                    <p>春秋战国至秦汉时期先秦时期，今云浮市境为百越之地。南北朝时期市境曾先后设立州、郡、县三级建置。民国初，4县隶属粤海道。1951年3月起隶属西江专区，12月起隶属粤中行政区。1961年4月，隶属肇庆地区。1994年4月，设立地级云浮市。 云浮是广府民系的发祥地，历史文化有西江文化、南江文化、六祖文化、石艺文化等。云浮市东连粤港澳大湾区，西接北部湾城市群，是珠江—西江经济带重要节点城市。西江黄金水道贯穿全境，云浮新港是广东内河第一大港。</p>
                    <p>从宏观视角系统介绍了云浮的综合概况、历史沿革、人文特色、发展变化和中华人民共和国成立以来特别是进入新时代以来各个方面所取得的辉煌成就，展示云浮数千年历史沧桑和新时代风貌。</p>
                </div>
            </div>
            <div class="detail-content">
                <p>云浮是一块宝地，可谓物华天宝、人杰地灵。悠久的历史和优良的文化，积累了丰富的文物。古建名木是历史发展的见证、人类文明进步的反映。在云浮这块美丽的土地上，我们的祖先繁衍生息，一代一代地开拓自己的家园。创造者留下的深刻轨迹，为我们提供了富有价值的文物，并且沉积了深厚的文化。</p>
                <p>两广之交的西江一带地区，在漫长的历史时期，是沟通中原与海外的重要交通枢纽，在这里，西江文化与中原文化、海外文化相互交绥碰撞，激发出文化创新的活力；在这里，产生了多次民族大融合，不断加入异质文化的新鲜血液；在这里，文化创新活动十分活跃。正是在这样一种历史背景和文化环境下，年轻的惠能横空出世，不仅自学自悟佛法真谛，而且融合多种文化基因，将“不二法门”的思想方法贯彻到底，主张“佛法在世间，不离世间觉”，反对出世的“专修”，将修禅融入合日常的生产生活之中，农禅并作，自食其力，自修自悟，自成佛道，创立了与印度佛教大异其趣的中国禅。</p>
            </div>
            <div class="content-list">
                <ul>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/1567417984855.jpg" alt="" />
                        </div>
                        <p class="title">大力发展绿色农业与畜牧业</p>
                        <p class="sub-title">粮食产量比上年增长0.2%，肉产量增长3.3%</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/1567417572331.jpg" alt="" />
                        </div>
                        <p class="title">第二产业齐头并进</p>
                        <p class="sub-title">全部工业增加值比上年增长3.6%</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/1567417829709.jpg" alt="" />
                        </div>
                        <p class="title">开展节能产业</p>
                        <p class="sub-title">开展节能产业，为都市生活提供快捷</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <div class="contact-container">
            <div class="contact-title">
                <p>联系</p>
                <p>Contact</p>
            </div>
            <div class="contact-content">
                <p class="c-name">木番薯科技</p>
                <div class="c-addr">
                    <p>地 点：广州市天河区花城大道666号</p>
                    <p>邮编：510000</p>
                </div>
                <div class="c-addr">
                    <p>公众号名称：木番薯科技</p>
                    <p>公众号号码：mengchatchat91</p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

首页-家乡介绍css

/* 头部样式 */
.header {
    background-color: #ffb905;
    overflow: hidden;
    padding: 0 0 0 50px;
}

.header .logo {
    width: 120px;
    float: left;
    padding-top: 5px;
}

.header .nav {
    overflow: hidden;
    float: right;
}

.header .nav ul {
    overflow: hidden;
    float: right;
}

.header .nav ul li {
    float: left;
}

.header .nav ul li a {
    font-size: 14px;
    color: #eee;
    display: block;
    line-height: 3.7;
    width: 150px;
    text-align: center;
}

.header .nav ul li a:hover, .header .nav ul li a.active {
    color: #fff;
    background-color: #e7a600;
}

/* 主内容样式 */
.main-content .banner img {
    width: 100%;
}

.main-content .project-content {
    width: 1185px;
    margin: 0 auto 50px;
    padding-left: 14px;
}
.main-content .project-content .content-title {
    font-size: 24px;
    color: #444;
    text-align: center;
    padding-top: 80px;
    padding-bottom: 40px;
}

.main-content .detail-content {
    padding: 0 0 20px;
    overflow: hidden;
}
.main-content .detail-content .detail-pic {
    text-align: center;
    margin-bottom: 10px;
    float: left;
    width: 550px;
}
.main-content .detail-content .detail-pic img {
    width: 100%;
    display: inline-block;
}
.main-content .detail-content .detail-desc {
    float: left;
    width: 550px;
    padding: 10px 30px;
}
.main-content .detail-content p {
    line-height: 24px;
    font-size: 13px;
    color: #6a6a6a;
    margin-bottom: 10px;
}

.main-content .project-content .content-list ul {
    overflow: hidden;
}

.main-content .project-content .content-list ul li {
    float: left;
    width: 380px;
    margin-bottom: 25px;
    height: 290px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.main-content .project-content .content-list ul li:not(:last-child) {
    margin-right: 15px;
}

.main-content .project-content .content-list ul li .cover-pic img {
    width: 100%;
}
.main-content .project-content .content-list ul li .title {
    font-size: 15px;
    color: #666;
    height: 24px;
    line-height: 24px;
    padding: 15px 30px 0px 10px;
}
.main-content .project-content .content-list ul li .sub-title {
    font-size: 12px;
    color: #b7b7b7;
    height: 20px;
    line-height: 24px;
    overflow: hidden;
    padding: 0px 10px;
}

/* 底部样式 */
.footer {
    background-color: #f3f3f3;
}
.contact-container {
    width: 1000px;
    margin: 0 auto;
    padding: 80px 30px 68px;
    overflow: hidden;
}
.footer .contact-title {
    float: left;
    width: 300px;
}
.footer .contact-title p:first-child {
    color: #666;
    font-size: 24px;
    margin-bottom: 5px;
}
.footer .contact-title p:last-child {
    color: #c1c1c1;
    font-size: 16px;
}
.footer .contact-content {
    float: left;
    overflow: hidden;
}
.footer .contact-content .c-name {
    font-size: 16px;
    color: #666;
    line-height: 24px;
    margin-bottom: 25px;
    font-weight: 100;
}
.footer .contact-content .c-addr {
    float: left;
}
.footer .contact-content .c-addr p {
    padding-right: 60px;
    margin-top: 14px;
    height: auto;
    color: #999;
    font-size: 12px;
}

标签