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