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

html实现我的故乡，城市介绍网站(附源码)

news 2026/4/9 8:22:22

文章目录

  • 1. 我生活的城市北京（网站）
    • 1.1 首页
    • 1.2 关于北京
    • 1.3 北京文化
    • 1.4 加入北京
    • 1.5 北京景点
    • 1.6 北京美食
    • 1.7 联系我们
  • 2.效果和源码
    • 2.1 动态效果
    • 2.2 源代码
  • 源码下载

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/134617864

html实现我的故乡，城市介绍网站(附源码)，html实现我的故乡介绍网站，最美故乡，最美城市，登录、注册、故乡的风景、故乡的人文等相关界面，可以改成自己的故乡替换对应的图片和文字，这篇示例以北京为代表，通过景点，美食，旅游等方面介绍，代码上手简单，代码独立，可以直接使用。也可直接预览效果。

1. 我生活的城市北京（网站）

1.1 首页

    首页，介绍北京的美食和景点，及我们的相关信息。

在这里插入图片描述

1.2 关于北京

    关于北京，介绍北京的美食和景点，及我们的相关信息。

请添加图片描述

1.3 北京文化

    北京文化，介绍北京的美食和景点，及我们的相关信息。

请添加图片描述

1.4 加入北京

    加入北京，介绍北京的美食和景点，及我们的相关信息，邀请您加入我们。

请添加图片描述

1.5 北京景点

    北京景点，介绍北京的美食和景点，及我们的相关信息，邀请您加入我们。

在这里插入图片描述

1.6 北京美食

    北京美食，介绍北京的美食和景点，及我们的相关信息，邀请您加入我们。

请添加图片描述

1.7 联系我们

    联系我们，介绍北京的美食和景点，及我们的相关信息，邀请您加入我们。

在这里插入图片描述

2.效果和源码

2.1 动态效果

    这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的家乡网站。

html实现我的故乡，城市介绍网站(附源码)

2.2 源代码

    这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>北京 - 我生活的城市,梦想的城市</title>
<link rel="stylesheet" type="text/css" href="style/css.css">
<script language="javascript" type="text/javascript" src="js/jquery1.4.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.jslider.js"></script>
<link href="images/favicon.png" rel="icon">
</head>
<body>
<div class="wrap"><div class="top" style="background-color: rebeccapurple;width: 100%;"><div><p><a href="zsjm.html">快速登录</a> | <a href="zsjm.html">快速注册</a> | <a href="#">设为首页</a> | <a href="#">加为收藏</a></p></div></div><!-- top end --><div class="menu"><div class="nav"><ul><li class="li_hover"><a href="index.html">首页</a></li><li><a href="gsjj.html">关于北京</a></li><li><a href="cpzs.html">北京文化</a></li><li><a href="zsjm.html">加入北京</a></li><li><a href="rczp.html">北京景点</a></li><li><a href="zxly.html">北京美食</a></li><li style="background:none;"><a href="lxwm.html">联系我们</a></li></ul><div class="clear"></div></div></div><!-- nav end --><div class="banner"><ul id="naviSlider"><li sindex="1" class="on"></li><li sindex="2" ></li><li sindex="3" ></li></ul><ul id="slider"><li id="myicloud"><a href="#" style="background:url(upfiles/banner1.jpg) center no-repeat;"></a></li><li><a href="#" style="background:url(upfiles/banner2.jpg) center no-repeat;"></a></li><li><a href="#" style="background:url(upfiles/banner3.jpg) center no-repeat;"></a></li></ul></div><!-- banner end --><div class="content"><div class="box mt20"><div class="gsjj left"><h2><img src="images/gsjj.png" alt="公司简介"></h2><div class="jjcon"> <img src="images/jjtp.png" alt="公司简介"><p>北京市（Beijing），简称“京”，古称燕京、北平，中华民族的发祥地之一，是中华人民共和国首都、直辖市、国家中心城市、超大城市，中国历史文化名城和古都之一，世界一线城市。<a href="gsjj.html"><span style=" color:#3da37c;">[查看详情]</span></a></p></div></div><div class="xwdt left"><h2><a href="zxly.html"><img src="images/xwdt.png" alt="北京美食"></a></h2><div class="dtcon"><div class="dttop"> <img src="images/xwtp.png" width="117px" height="80px" alt="北京美食" style="float:left; margin-right:10px;" /><h2> 北京六必居美食</h2><p>创始于1436年的六必居，是京城历史最为悠久的中华老字号之一。</p><div class="clear"></div></div><ul><li><span class="rq">【老字号】</span><a href="#">北京烤鸭，起源于中国南北朝时期。</a></li><li><span class="rq">【老字号】</span><a href="#">北京卤煮，著名的地方传统小吃。</a></li><li><span class="rq">【老字号】</span><a href="#">北京炒肝，油亮酱红、肝香肠肥。</a></li><li><span class="rq">【老字号】</span><a href="#">北京炸酱面，为“中国十大面条”之一</a></li></ul></div></div><div class="lxwm right"><h2><img src="images/lxwm.png" alt="联系我们"></h2><div class="lxcon"> <strong style=" color:#fbc800; font-size:14px;">   京城特色守护者</strong><br />地址：北京城区<br />联系人：北京人<br />口号：努力守护京城特色，大家一起<br />手机：15311001100<br />邮箱：100000@tel.com </div></div><div class="clear"></div></div><!-- box end --><div class="cpzs mt10"><h2><a href="#"><img src="images/cpzs.png" alt="产品展示"></a></h2><div class="cpcon"><ul><li><a href="#"><img src="upfiles/cp.png" alt="" /><p>北方温泉会议中心</p></a></li><li><a href="#"><img src="upfiles/cp2.png" alt="" /><p>古北之光温泉度假酒店</p></a></li><li><a href="#"><img src="upfiles/cp3.png" alt="" /><p>北京故宫</p></a></li><li><a href="#"><img src="upfiles/cp4.png" alt="" /><p>北京颐和园</p></a></li></ul><div class="clear"></div></div></div></div><!-- content end --><div class="xian"></div><div class="links"><div class="link_img left"><img src="images/link.png" alt="友情链接" /></div><div class="linkcon left"><a href="https://blog.csdn.net/weixin_43151418/article/details/134613121">友情链接</a> | <a href="https://blog.csdn.net/weixin_43151418/article/details/134607804">故乡云南</a> | <a href="https://blog.csdn.net/weixin_43151418/article/details/134534785">故乡内蒙</a> | <a href="https://blog.csdn.net/weixin_43151418/article/details/134532725">故乡北京</a> | <a href="https://blog.csdn.net/weixin_43151418/article/details/134458927">故乡广州</a> | <a href="https://blog.csdn.net/weixin_43151418/article/details/134467729">故乡上海</a> | <a href="https://blog.csdn.net/weixin_43151418/article/details/134437021">故乡沈阳</a> | <a href="https://blog.csdn.net/weixin_43151418/article/details/131495285">故乡武汉</a> | <a href="https://blog.csdn.net/weixin_43151418/article/details/131412565">故乡天津</a> </div><div class="clear"></div></div><div class="footer"><div class="f_link"><a href="index.html">首页</a> | <a href="gsjj.html">关于北京</a> | <a href="cpzs.html">北京文化 </a> | <a href="zsjm.html">加入北京</a> | <a href="rczp.html">北京景点</a> | <a href="zxly.html">北京美食</a> | <a href="lxwm.html">联系我们</a></div><div class="f_text"><img src="images/ewm.png" width="86px" height="86px" alt="二维码" style="float:right;" />地址：北京市海淀区　　邮箱：100000@tel.com　　<br />Copyright @ 2023. 版权公开. <div class="clear"></div></div></div>
</div>
</body>
</html>

源码下载

html实现我的故乡，城市介绍网站（源码） 点击下载
在这里插入图片描述

     💢 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     💯 神秘个人简介 带你体验不一样得介绍

     💘 为爱表白 为你那个TA，体验别致的浪漫惊喜

     🎀 酷炫邀请函 带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

     亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/134617864（防止抄袭，原文地址不可删除）

相关文章：

html实现我的故乡，城市介绍网站(附源码)

文章目录 1. 我生活的城市北京&#xff08;网站&#xff09;1.1 首页1.2 关于北京1.3 北京文化1.4 加入北京1.5 北京景点1.6 北京美食1.7 联系我们 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43…...

编程日记 2023/11/27 16:22:50

外汇天眼：嘿！他们说这个比赛有手就能赢，你敢不敢来试试？

在外汇市场的波涛汹涌中&#xff0c;一场引人注目的模拟交易比赛正在悄然展开&#xff0c;参与者们纷纷聚焦&#xff0c;听所有获奖的参赛投资者们说&#xff1a;这个比赛有手就能赢&#xff0c;你敢不敢来试试&#xff1f; 比赛规则简单而富有挑战性。你只需在外汇天眼APP开通…...

编程日记 2023/11/27 16:21:48

“智”护城市生命线，宏电亮相第十届中国（上海）国际管网展

11月22-24日&#xff0c;第十届中国&#xff08;上海&#xff09;国际管网展览会在国家会展中心盛大举办&#xff0c;展会旨在配合推进国家基础建设工作&#xff0c;推动管网改造建设&#xff0c;汇聚了三百余家优秀企业参展&#xff0c;展示产品及技术覆盖管网建设、智慧水务、…...

编程日记 2023/11/27 16:20:47

在线音频视频剪辑网站推荐

123apps: Online MP3 Cutter - Cut Songs, Make Ringtones...

编程日记 2023/11/27 16:19:46

Math Functions 数学函数

Math Functions 数学函数 Use the math functions that your database offers whenever possible. 尽可能使用数据库提供的数学函数。 Internally, PeopleCode assigns types to numeric values. Calculations for the Decimal type are processed in arrays to ensure dec…...

编程日记 2023/11/27 16:18:45

Javaweb之Axios的详细解析

1.3.3 请求方法的别名 Axios还针对不同的请求&#xff0c;提供了别名方式的api,具体如下&#xff1a; 方法描述axios.get(url [, config])发送get请求axios.delete(url [, config])发送delete请求axios.post(url [, data[, config]])发送post请求axios.put(url [, data[, con…...

编程日记 2023/11/27 16:17:42

Jenkins Pipeline应用实践

Jenkins Pipeline是一种可编程的、可扩展的持续交付管道&#xff0c;允许您使用脚本来定义整个软件交付过程。 以下是使用Jenkins Pipeline创建和配置流水线的基本步骤。 Part 01. 创建一个Pipeline Job 在Jenkins中创建一个新的"Pipeline"类型的Job。 以下是在Je…...

编程日记 2023/11/27 16:15:39

给经销商开发信怎么写？做商务邮件的技巧？

如何写给经销商的开发信&#xff1f;代理商的外贸开发信模板&#xff1f; 一封令人信服的经销商开发信能够在商业世界中起到至关重要的作用。蜂邮EDM将为您介绍如何撰写一封引人注目且有说服力的经销商开发信&#xff0c;确保您的合作伙伴对您的业务充满信心。 经销商开发信&…...

编程日记 2023/11/27 16:14:38

测试架构师必备技能-Nginx安装部署实战

Nginx(“engine x”)是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的免费开源Web和 反向代理服务器&#xff0c;也是一个 IMAP/POP3/SMTP 代理服务器。在高并发访问的情况下&#xff0c;Nginx是Apache服务器不错的替代品。官网数据显示每秒TPS高达50W左右。本文为读者朋…...

编程日记 2023/11/27 16:13:37

linux 账号管理实例一，stdin，passwd复习

需求 账号名称全名次要用户组是否可登录主机密码 myuser1 1st usermygroup1yespasswordmyuser22st usermygroup1yespasswordmyuser33st user无nopassword 第一&#xff1a;用户&#xff0c;和用户组创建&#xff0c;并分配有效用户组&#xff08;初始用户组是passwd里…...

编程日记 2023/11/27 16:12:36

Spring-jdbcTemplate-配置数据库连接池，配置文件方式beans.xml

1、jdbc.properties jdbc.drivercom.mysql.cj.jdbc.Driver jdbc.urljdbc:mysql:///studb jdbc.userroot jdbc.pwd123456 2、beans.xml <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans&…...

编程日记 2023/11/27 16:11:35

ElasticSearch之cat component templates API

命令样例如下&#xff1a; curl -X GET "https://localhost:9200/_cat/component_templates?vtrue&pretty" --cacert $ES_HOME/config/certs/http_ca.crt -u "elastic:ohCxPHQBEs5*lo7F9"执行结果输出如下&#xff1a; name …...

编程日记 2023/11/27 16:10:34

FLASK博客系列7——我要插入数据库

我们来继续上次的内容&#xff0c;实现将数据插入数据库。 我们先更改下models.py&#xff0c;由于上次笔误&#xff0c;把外键关联写错了。在这里给大家说声抱歉。不过竟然没有小伙伴发现。 models.py from app import dbclass User(db.Model): # 表名将会是 user&#xff0…...

编程日记 2023/11/27 16:09:33

HarmonyOS应用开发者高级认证（题库）

判断题 每一个自定义组件都有自己的生命周期 正确Worker线程不支持UI操作 正确首选项preferences是以key-value形式存储数据&#xff0c;其中key是可以重复的。 错误HarmonyOS应用可以兼容OpenHarmony生态 正确使用端云一体化开发&#xff0c;无需自己搭建服务器 正确只要…...

编程日记 2023/11/27 16:08:32

软件建模与文档：架构师怎样绘制系统架构蓝图？

Java全能学习面试指南&#xff1a;https://javaxiaobear 首先&#xff0c;请你设想这样一个场景&#xff1a;如果公司安排你做架构师&#xff0c;要你在项目开发前期进行软件架构设计&#xff0c;你该如何开展你的工作&#xff1f;如何输出你的工作成果&#xff1f;如何确定你的…...

编程日记 2023/11/27 16:07:31

ChatGLM2-6B微调过程说明文档

参考文档&#xff1a; ChatGLM2-6B 微调(初体验) - 知乎 环境配置 下载anaconda&#xff0c;版本是Anaconda3-2023.03-0-Linux-x86_64.sh&#xff0c;其对应的python版本是3.10&#xff0c;试过3.7和3.11版本的在运行时都报错。 执行下面的命令安装anaconda sh Anaconda3-202…...

编程日记 2023/11/27 16:06:30

Django之中间件

引入 1、Django自带7个中间件&#xff0c;每个中间件都有各自的功能 2、django能够自定义中间件 3、使用场景&#xff1a; 1. 全局身份校验 2. 全局用户权限校验 3. 全局访问频率的校验 ...... 【1】什么是中间件 Django中间件是一个轻量级、可重用的组件&#xff0c;用于处理…...

编程日记 2023/11/27 16:05:29

sql中的left join, right join 和inner join，union 与union all的用法

left join&#xff0c; right join 和inner join&#xff1a;这些都是SQL中用来连接两个或多个表的操作。 union&#xff0c;union all&#xff1a;用于合并两个或多个 SELECT 语句的结果。 但是有时候&#xff0c;对于Select出来的结果集不是很清楚。 假设我们有两张表。pers…...

编程日记 2023/11/27 16:04:28

Linux：strace 简介

文章目录 1. 前言2. 什么是 strace ?3. 使用 strace3.1 追踪指定进程3.1.1 通过程序名追踪进程3.1.2 通过 进程 ID (PID) 追踪程序3.1.3 追踪 子进程 或 线程 3.2 系统调用情况统计3.3 追踪过滤3.3.1 追踪指定的系统调用集合3.3.2 追踪对指定文件句柄集合操作的系统调用3.3.3 …...

编程日记 2023/11/27 16:03:27

【深度学习】神经网络训练过程中不收敛或者训练失败的原因

在面对模型不收敛的时候&#xff0c;首先要保证训练的次数够多。在训练过程中&#xff0c;loss并不是一直在下降&#xff0c;准确率一直在提升的&#xff0c;会有一些震荡存在。只要总体趋势是在收敛就行。若训练次数够多&#xff08;一般上千次&#xff0c;上万次&#xff0c;…...

编程日记 2023/11/27 16:02:26

Linux操作系统-系统安装与三种网络模式

本文将指导您在VMware Workstation 16 Pro环境下安装CentOS 7系统&#xff0c;详细介绍从创建虚拟机到完成操作系统安装的完整步骤。一、创建虚拟机1.点击“文件”菜单&#xff0c;选择“创建虚拟机”&#xff0c;然后点击“自定义”开始创建虚拟机。2.点击"浏览"按钮…...

编程新知 2026/4/9 8:07:47

MATLAB仿真下虚拟磁链控制技术在直接功率控制与整流器、逆变器仿真中的应用

虚拟磁链&#xff0c;直接功率控制simulink仿真&#xff0c;vf-dpc&#xff0c;整流器仿真&#xff0c;逆变器仿真虚拟磁链仿真&#xff0c;MATLAB仿真&#xff0c;参考文献&#xff0c;最近在搞电力电子仿真的时候&#xff0c;总被传统直接功率控制&#xff08;DPC&#xff09…...

编程新知 2026/4/9 7:04:33

汽车牌照数据集 YOLO 目标检测 | 可下载

点击下载数据集~ 关于数据集&#xff1a; 数据集&#xff1a;汽车牌照检测 该数据集包含车牌图像及其对应的YOLO格式标注。它旨在用于训练和评估专注于检测图像中车牌的模型。 数据集概览&#xff1a; 图片总数&#xff1a; 433 张车牌图片 图片格式&#xff1a; .png 标…...

编程新知 2026/4/9 6:31:12

深入解析航顺HK32F030C8T6与STM32F030的兼容性差异及实战调优

1. 航顺HK32F030C8T6与STM32F030的硬件差异解析 第一次拿到航顺HK32F030C8T6这颗国产MCU时&#xff0c;我下意识以为它和STM32F030可以完全互换。但实际在智能家居项目中踩坑后才发现&#xff0c;两者的硬件差异远比想象中多。最明显的区别就是主频——STM32F030最高只能跑到48…...

编程新知 2026/4/9 5:52:28

AutoGod:安卓-全兼容！一站式自动化框架，开发效率直接拉满谪

1. 架构背景与演进动力 1.1 从单体到碎片化&#xff1a;.NET 的开源征程 在.NET Framework 时代&#xff0c;构建系统主要围绕 Windows 操作系统紧密集成&#xff0c;采用传统的封闭式开发模式。然而&#xff0c;随着.NET Core 的推出&#xff0c;微软开启了彻底的开源与跨平台…...

编程新知 2026/4/9 5:44:25

OpenClaw+Qwen3.5-9B创作助手：从大纲到短视频脚本全自动

OpenClawQwen3.5-9B创作助手&#xff1a;从大纲到短视频脚本全自动 1. 为什么需要自动化创作流程 作为一个内容创作者&#xff0c;我经常面临这样的困境&#xff1a;明明有好的创意&#xff0c;却卡在执行环节。从构思大纲到完成短视频脚本&#xff0c;往往需要反复查阅资料、…...

编程新知 2026/4/9 5:42:18

EasyAnimateV5图生视频实战：多图批量处理脚本开发（Python+requests API）

EasyAnimateV5图生视频实战&#xff1a;多图批量处理脚本开发&#xff08;Pythonrequests API&#xff09; 1. 项目背景与需求场景 在日常的内容创作和视频制作中&#xff0c;我们经常遇到这样的需求&#xff1a;需要将大量的静态图片转换为动态视频。无论是电商商品展示、社…...

编程新知 2026/4/9 5:30:01

【开源】从设计文档到可交付技术交底书：专利.Skill

【开源】从设计文档到可交付技术交底书&#xff1a;专利.Skill 摘要 设计文档、代码都有了&#xff0c;专利点却还没梳清&#xff1f;交底书既要系统框图与流程图&#xff0c;又要代理人能直接改的 Word&#xff0c;多轮补材料还不能覆盖旧稿&#xff1f;本文介绍开源仓库 pat…...

编程新知 2026/4/9 5:09:43

CLIP-GmP-ViT-L-14从零开始：国产昇腾910B芯片ACL适配部署实践

CLIP-GmP-ViT-L-14从零开始&#xff1a;国产昇腾910B芯片ACL适配部署实践 1. 项目概述 CLIP-GmP-ViT-L-14是一个经过几何参数化(GmP)微调的CLIP模型&#xff0c;在ImageNet和ObjectNet数据集上达到了约90%的准确率。这个模型结合了视觉和语言理解能力&#xff0c;能够计算图像…...

编程新知 2026/4/9 5:01:40

Jetson Nano 平台YOLO目标检测优化详细设计方案

Jetson Nano 平台YOLO目标检测优化详细设计方案 1. 项目概况与设计目标 Jetson Nano 作为 NVIDIA 推出的入门级边缘 AI 计算平台&#xff0c;虽然在计算能力上相比高端 GPU有所限制&#xff0c;但在功耗控制和成本效益方面表现优异&#xff0c;特别适合对功耗敏感的边缘部署场景…...

编程新知 2026/4/9 5:01:40