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

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

news 2026/2/8 14:36:26

文章目录

  • 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

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/24 10:00:31

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2026/1/24 13:05:24

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/2/3 22:50:07

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2026/1/29 5:29:57

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2026/2/4 18:09:49

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2026/1/25 2:04:42

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2026/1/29 3:55:23

Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

编程新知 2025/10/16 14:46:22

tauri项目，如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

编程新知 2026/2/6 6:05:11