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_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（防止抄袭，原文地址不可删除）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/170383.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2.19 keil里面工具EventCorder使用方法

2.19 keil里面工具EventCorder使用方法

设置方法如下&#xff1a; 添加初始化代码如下&#xff1a; eventRecord.c #include "eventRecord.h" #include "usart.h" extern UART_HandleTypeDef *pcControlUart;/* RecordEvent初始化 */ void InitEventRecorder(void) {#ifdef RTE_Compiler_Even…
阅读更多...
[架构之路-251]：目标系统 - 设计方法 - 软件工程 - 软件建模 - 什么是建模，什么是软件系统建模？软件系统阶段性建模？正向建模与反向建模？

[架构之路-251]：目标系统 - 设计方法 - 软件工程 - 软件建模 - 什么是建模，什么是软件系统建模？软件系统阶段性建模？正向建模与反向建模？

目录 前言&#xff1a; 一、什么是建模 1.1 什么是建模 1.2 常见的建模的方式与种类 二、什么是软件系统建模 2.1 软件系统建模的概念 2.2 软件系统常见的三种建模方法和手段 2.3 软件系统建模的常见工具 三、软件系统阶段性建模 3.1 软件工程在不同阶段对软件系统进…
阅读更多...
合共软件创新亮相：第102届上海电子展成就技术新篇章

合共软件创新亮相：第102届上海电子展成就技术新篇章

2023年&#xff0c;第102届中国&#xff08;上海&#xff09;电子展活动在全球瞩目中圆满落幕。作为下半年华东地区最具影响力的电子展会&#xff0c;此次盛会吸引了来自全球的600家领先企业&#xff0c;共同探讨电子元器件行业的最新发展成果和趋势。 本届展会围绕核心先导元器…
阅读更多...
网络运维与网络安全 学习笔记2023.11.25

网络运维与网络安全 学习笔记2023.11.25

网络运维与网络安全 学习笔记 第二十六天 今日目标 ACL原理与类型、基本ACL配置、高级ACL配置 高级ACL之ICMP、高级ACL之telnet ACL原理与类型 项目背景 为了企业的业务安全&#xff0c;要求不同部门对服务器有不同的权限 PC1不能访问Server PC2允许访问Server 允许其他所…
阅读更多...
MyBatis框架_01

MyBatis框架_01

Web后端开发_03 MyBatis框架 什么是MyBatis? MyBatis是一款优秀的持久层框架&#xff0c;用于简化JDBC的开发。MyBatis本是 Apache的一个开源项目iBatis&#xff0c;2010年这个项目由apache迁移到了google code&#xff0c;并且改名为MyBatis 。2013年11月迁移到Github。官网…
阅读更多...
Transformer——decoder

Transformer——decoder

上一篇文章&#xff0c;我们介绍了encoder&#xff0c;这篇文章我们将要介绍decoder Transformer-encoder decoder结构&#xff1a; 如果看过上一篇文章的同学&#xff0c;肯定对decoder的结构不陌生&#xff0c;从上面框中可以明显的看出&#xff1a; 每个Decoder Block有两个…
阅读更多...
nrm安装及使用

nrm安装及使用

一、介绍 nrm 是一个 Node.js 的 registry 管理工具&#xff0c;它允许你快速地在不同的 npm registry 之间进行切换。通过使用 nrm&#xff0c;你可以方便地将 npm 的 registry 切换为淘宝镜像、npm 官方镜像或者其他定制的镜像&#xff0c;以加快包的下载速度。nrm仓库请点击…
阅读更多...
Python武器库开发-前端篇之CSS基本语法(三十)

Python武器库开发-前端篇之CSS基本语法(三十)

前端篇之CSS基本语法(三十) CSS简介 CSS&#xff08;层叠样式表&#xff09;是一种用于描述网页外观和布局的样式表语言。它与 HTML 一起&#xff0c;帮助开发者对网页进行美化和布局。CSS通过定义网页元素的颜色、字体、大小、背景、边框等属性&#xff0c;使网页变得更加美…
阅读更多...
redis 数据结构

redis 数据结构

redis 数据结构 动态字符串SDS 优点 获取字符串长度的时间复杂度O(1) 支持动态扩容&#xff0c;减少内存分配次数 新字符串小于1M – 新空间为扩展后字符串长度的两倍 1 新字符串大于1M – 新空间为扩展后字符串长度 1M 1. 内存预分配 二进制安全&#xff08;记录了字符…
阅读更多...
2023金盾杯线上赛-AGRT战队-WP

2023金盾杯线上赛-AGRT战队-WP

目录 WEB ApeCoin get_source ezupload easyphp MISC 来都来了 芙宁娜 Honor Crypto 我看看谁还不会RSA hakiehs babyrsa PWN sign-format RE Re1 WEB ApeCoin 扫描发现有源码泄露&#xff0c;访问www.tar.gz得到源码。 在源码中发现了冰蝎马。 Md5解码&am…
阅读更多...
【可编程串行接口8251A】：用处、内部结构、各引脚的解释、工作方式

【可编程串行接口8251A】：用处、内部结构、各引脚的解释、工作方式

8251A的作用 微机内部的数据传送方式为并行方式。 若外设采用串行方式&#xff0c;则微机与外设之间需加串行接口。 串行接口基本功能就是&#xff1a;输入数据时&#xff0c;进行串/并转换&#xff1b;输出数据时&#xff0c;进行并/串转换。Intel8251A是一种可编程的通用同步…
阅读更多...
frp V0.52.3 搭建

frp V0.52.3 搭建

下载 https://github.com/fatedier/frp/releases/ 此版本暂时没有windows的&#xff0c;想在windows使用请下载v0.52.2 简易搭建 frps.toml的配置文件&#xff0c;以下12000、8500需要在云服务器中的防火墙中开放tcp # bindPort为frps和frpc通信的端口&#xff0c;需要在防…
阅读更多...
渗透测试信息搜集

渗透测试信息搜集

注&#xff1a;太简陋了&#xff0c;不忍直视 渗透测试信息收集 黑盒测试&#xff1a;给域名 灰盒测试&#xff1a;给域名、账户(或密码) 白盒测试&#xff1a;给域名、账户、密码 授权书 对安全公司进行授权 攻防演习 是对个人进行授权 渗透测试&#xff1a;&#xff0…
阅读更多...
实验室信息管理系统源码，LIS系统源码，lis源码

实验室信息管理系统源码，LIS系统源码，lis源码

医学检验(LIS)管理系统源码&#xff0c;云LIS系统全套商业源码 随着全自动生化分析仪、全自动免疫分析仪和全自动血球计数器等仪器的使用&#xff0c;检验科的大多数项目实现了全自动化分析。全自动化分析引入后&#xff0c;组合化验增多&#xff0c;更好的满足了临床需要&…
阅读更多...
springboot 返回problem+json

springboot 返回problem+json

spring所有配置都在WebMvcAutoConfiguration中 其中有 ProblemDetailsExceptionHandler 容器中的一个组件 -ControllerAdvice用来集中处理异常的 -点进ResponseEntityExceptionHandler 包含这些异常&#xff0c;如果出现以下异常&#xff0c;会被springboot支持以RFC 7807规…
阅读更多...
142.【Nginx负载均衡-01】

142.【Nginx负载均衡-01】

Nginx_基础篇 (一)、Nginx 简介1.背景介绍(1).http和三大邮局协议(2).反向代理与正向代理 2.常见服务器对比(1).公司介绍(2).lls 服务器(3).Tomcat 服务器(4).Apache 服务器(5).Lighttpd 服务器(6).其他的服务器 3.Nginx的优点(1).速度更快、并发更高(2).配置简单&#xff0c;扩…
阅读更多...
1.1 半加器

1.1 半加器

输入1输入2结果进位0000101001101101 半加器: 实现1位的加法 根据结果可知输入1与输入2相加结果 -> 符合 异或门进位 -> 符合 与门最终要么有结果要么有进位,不存在即有结果也有进位 异或门的实现也可以由基本的3个 “与或非” 门实现 与:& , 或:| , 非:! 用这3个…
阅读更多...
从前序与中序遍历序列构造二叉树（C++实现）

从前序与中序遍历序列构造二叉树（C++实现）

从前序与中序遍历序列构造二叉树 题目思路分析代码代码讲解 题目 思路分析 我们可以通过递归实现的二叉树构建函数。它根据给定的先序遍历序列和中序遍历序列构建一棵二叉树&#xff0c;并返回根节点。可以创建一个_build 函数&#xff0c;该函数负责构建二叉树的节点&#xff…
阅读更多...
OSG粒子系统与阴影-自定义粒子系统示例＜2＞（5）

OSG粒子系统与阴影-自定义粒子系统示例＜2＞（5）

自定义粒子系统示例(二) 目前自定义粒子的方法有很多&#xff0c;在OSG 中使用的是 Billboard 技术与色彩融合技术。色彩融合是一种高级的渲染技术&#xff0c;如果读者有兴趣&#xff0c;可参看 OSG 粒子系统实现的源代码。这里采用简单的布告牌技术(osg::Billboard)与动画来实…
阅读更多...
01背包问题

01背包问题

介绍 有N件物品和一个最多能被重量为W 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 分析 优化后的代码 public class demo {static class Item{int index;String na…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023