首页 前端知识 html实现我的故乡,城市介绍网站(附源码)

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

2024-05-28 09:05:14 前端知识 前端哥 1004 774 我要收藏

文章目录

  • 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(防止抄袭,原文地址不可删除)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9870.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!