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

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

news 2025/11/22 13:41:55

文章目录

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. 我生活的城市北京（网站）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_43…...

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

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

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

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

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

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

编程日记 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还针对不同的请求，提供了别名方式的api,具体如下： 方法描述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是一种可编程的、可扩展的持续交付管道，允许您使用脚本来定义整个软件交付过程。以下是使用Jenkins Pipeline创建和配置流水线的基本步骤。 Part 01. 创建一个Pipeline Job 在Jenkins中创建一个新的"Pipeline"类型的Job。以下是在Je…...

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

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

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

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

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

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

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

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

需求账号名称全名次要用户组是否可登录主机密码 myuser1 1st usermygroup1yespasswordmyuser22st usermygroup1yespasswordmyuser33st user无nopassword 第一：用户，和用户组创建，并分配有效用户组（初始用户组是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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Django之中间件

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

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

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

left join， right join 和inner join：这些都是SQL中用来连接两个或多个表的操作。 union，union all：用于合并两个或多个 SELECT 语句的结果。但是有时候，对于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

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

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

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

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录第一章概述第二章弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制第三章主要定义 …...

编程新知 2025/11/16 22:48:50

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/10/18 21:05:27

css的定位（position）详解：相对定位绝对定位固定定位

在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...

编程新知 2025/10/22 12:48:44

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/11/17 1:15:17

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体（对象或容器）QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质（定义颜色、反光等）QFirstPersonC…...

编程新知 2025/9/22 1:53:57

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享相信一定会对你有所帮助~ 那咱们废话不多说，直接开始吧！ 一、基础概念 1. 哈希核心思想： 哈希函数的作用：通过此函数建立一个Key与存储位置之间的映射关系。理想目标：实现…...

编程新知 2025/11/17 19:00:13

多元隐函数偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式，给定一个隐函数关系： F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 🧠 目标： 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z、 …...

编程新知 2025/9/19 5:31:38