电商商城定制开发web期末作业网页设计——我的家乡（网页源码）

作品介绍

1.电商商城定制开发网页作品简介方面 ：HTML。主要有：首页 家乡简介 风景名胜 特色美食 站长介绍 在线调查 等总共 6 个页面html下载。

2.电商商城定制开发网页作品编辑：电商商城定制开发此作品为学生个人主页电商商城定制开发网页设计题材，电商商城定制开发代码为简单学生水平 html+css 布局制作，电商商城定制开发作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML电商商城定制开发软件编辑修改网页）。

3.电商商城定制开发网页作品技术：Div+CSS、电商商城定制开发鼠标滑过特效、Table、电商商城定制开发导航栏效果、表单、电商商城定制开发二级三级页面等，视频、 音频元素 、Flash，电商商城定制开发基本期末作业所需的知电商商城定制开发识点全覆盖。

文章目录

一、设计说明

1.LOGO、导航栏、页尾

  logo电商商城定制开发由一张图片组成；电商商城定制开发导航栏是由列表，电商商城定制开发超链接组成，电商商城定制开发划过每个列表块是都会电商商城定制开发有颜色变化和底部边框的变化；电商商城定制开发页尾是由段落文字和一电商商城定制开发个图像构成，电商商城定制开发图像作为一个标志在右下角。

2.首页

主体部分：电商商城定制开发首页的主体分为上下两部分，电商商城定制开发下面在分为左右两部分。电商商城定制开发上面的部分的div为一个；电商商城定制开发下面左部分的div电商商城定制开发为一个新闻，电商商城定制开发这个部分由一张图片和电商商城定制开发一个段落文字链接组成，下右方的div电商商城定制开发又分为上下两个div，电商商城定制开发上方为一个简短的家乡介绍段落，电商商城定制开发下方为一个风景图片滚动介绍。

3.家乡简介

主体部分：电商商城定制开发左右两个部分。电商商城定制开发左边为一个简介目录的一个div,电商商城定制开发该部分的每一个标题对电商商城定制开发应的是右边简介的内容位置；电商商城定制开发右边的最上方放置了一电商商城定制开发个家乡宣传视频，电商商城定制开发下方是家乡的内容介绍电商商城定制开发用段落加图片的方式展现，电商商城定制开发可以从左边的目录直接电商商城定制开发找到相应位置。

4.风景名胜

主体部分：电商商城定制开发在一个大的div电商商城定制开发中设置了一个一列多行的表格，电商商城定制开发每个表格中都是一个风景的介绍，电商商城定制开发每个风景介绍都由一个照片、电商商城定制开发一段文字介绍和一个超电商商城定制开发链接来链接每个风景点的介绍。

5.特色美食

主体内容：电商商城定制开发分为上下两个部分，电商商城定制开发上部分中又分为左中右三个部分，电商商城定制开发下方为四个相等的div块。电商商城定制开发上方中左边的div电商商城定制开发块中为一个美食的轮播图，电商商城定制开发中间部分为一个整体的美食简介，由一个照片和一个段落文字链接组成，点击文字信息会链接到一个美食的链接；右边为一个美食排行榜的列表。下边的为四个美食的介绍，分别有一个照片和一段文字链接组成，每个链接为一个美食简介。

6.站长介绍

主体内容：分为左右两个部分组成。左边是一个一列两行表格，上边的表格内容设置了一个个性签名，还有一个时钟显示；下边为一个信息栏。右边是一个自我介绍内容，内容用列表来显现，边框设置阴影更有立体感。

7.在线调查

主体内容：一个div块中用表单来设置问题的输入，其中有单选，复选，多行文本输入。

在最下方还有两个按钮，提交和重置。

二、作品演示

首页

 家乡简介

 

 

名胜风景

  

特色美食

  

站长简介

 

在线调查

 

 三、代码目录

 四、代码演示

首页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>index.html</title>
  9.     <link type="text/css" rel="stylesheet" href="out.css">
  10. </head>
  11.  
  12. <body>
  13.     <div class="header">
  14.         <!--头部-->
  15.         <img id="hi1" src="tupian/baoji9.jpg">
  16.     </div>
  17.  
  18.     <div class="dh">
  19.         <!--导航栏 -->
  20.         <ul>
  21.             <li><a href="我的家乡.html#">首页</a></li>
  22.             <li><a href="家乡简介.html#">家乡简介</a></li>
  23.             <li><a href="风景名胜.html#">风景名胜</a></li>
  24.             <li><a href="美食特色.html#">美食特色</a></li>
  25.             <li><a href="站长简介.html#">站长简介</a></li>
  26.             <li><a href="在线调查.html#">在线调查</a></li>
  27.         </ul>
  28.     </div>
  29.     <div class="donghua">
  30.         <!--轮播-->
  31.         <div id="photo">
  32.             <img src="tupian/baoji6.jpg">
  33.             <img src="tupian/baoji10.jpg">
  34.             <img src="tupian/baoji7.png">
  35.             <img src="tupian/baoji4.jpg">
  36.             <img src="tupian/baoji2.png">
  37.         </div>
  38.     </div>
  39.     <div class="zhuti"><!--主体部分-->
  40.         <div class="zhuti">
  41.             <div id="zhuti-left"><!--主体左侧新闻部分-->
  42.                 <table><!--新闻表格-->
  43.                     <tr>
  44.                         <img src="tupian/baoji3.png">
  45.                     </tr>
  46.                     <h4>宝鸡新闻</h4>
  47.                     <hr size="3" color="rgb(24, 24, 88)">
  48.                     <a href="http://fufeng.gov.cn/art/2022/5/13/art_47_1503593.html">
  49.                         <p>
  50.                             2022年5月13日,第十一届宝鸡市文化旅游节开幕式暨岐山周文化旅游季启动仪式在周文化景区举办,本届文化旅游节开幕式由宝鸡市人民政府主办,宝鸡市文化和旅游局、中共岐山县委、岐山县人民政府承办,文化+、旅游+,文化强市、旅游...
  51.                         </p>
  52.                     </a>
  53.                     </tr>
  54.  
  55.  
  56.  
  57.                 </table>
  58.             </div>
  59.  
  60.  
  61.  
  62.             <div id="zhuti-right"><!--主体右侧部分-->
  63.                 <table>
  64.                     <tr>
  65.                         <h4>宝鸡介绍</h4><!--文字介绍宝鸡-->
  66.                         <hr size="3" color="rgb(24, 24, 88)">
  67.                         <p>
  68.                             宝鸡，古称陈仓、雍城，誉称“炎帝故里、青铜器之乡”，陕西省辖地级市，关中平原城市群副中心城市、关天经济区副中心城市。宝鸡地处关中平原西部，下辖4区8县，总面积18117平方公里。截至2021年末，宝鸡全市常住人口为328.2万。
  69.                         </p>
  70.                         <p>
  71.                             宝鸡历史悠久，是中华文化重要支脉宝学（宝鸡之学）所在地，有2700余年建城史，出土了晚清四大国宝及石鼓、何尊等文物，存有西府社火、凤翔木版年画、泥塑等中华工艺。宝鸡是联合国人居环境奖、中国人居环境奖、中华环境奖获得城市，全国文明城市、中国优秀旅游城市、国家森林城市。宝鸡也是我国西部工业重镇、高端装备制造业基地、中国钛谷。宝鸡位于陇海、宝成、宝中铁路交汇处，是我国重要的铁路交通枢纽之一。
  72.                         </p>
  73.                     </tr>
  74.                     <tr>
  75.                         <br>
  76.                         <h4>主要风景</h4><!--滚动主要风景-->
  77.                         <hr size="3" color="rgb(24, 24, 88)">
  78.                         <marquee behavior="scroll" height="170px">
  79.                             <ul>
  80.                                 <li><img src="tupian/tese1.jpg"></li>
  81.                                 <li><img src="tupian/tese2.jpg"></li>
  82.                                 <li><img src="tupian/tese3.jpg"></li>
  83.                                 <li><img src="tupian/tese4.jpg"></li>
  84.                                 <li><img src="tupian/baoji5.jpg"></li>
  85.                                 <li><img src="tupian/tese6.png"></li>
  86.                             </ul>
  87.                         </marquee>
  88.                         <hr size="3" color="rgb(24, 24, 88)">
  89.                     </tr>
  90.                 </table>
  91.             </div>
  92.         </div>
  93.  
  94.     </div>
  95.     <div id="" class="footer">
  96.         <!--页尾-->
  97.         <img id="fi1" src="tupian/baoji1.jpg"><!--尾页右下角图片-->
  98.         <p><!--尾页文字-->
  99.             古城宝鸡 璀璨文明
  100.         </p>
  101.         <p>
  102.             welcome to baoji||宝鸡欢迎您！
  103.         </p>
  104.     </div>
  105. </body>
  106.  
  107. </html>
  1. /*样式表文件out.css*/
  2. * {
  3.     /*全局选择器*/
  4.     margin: 0px;/*外边距*/
  5.     padding: 0px;/*内边距*/
  6. }
  7.  
  8. body {
  9.     /*主体*/
  10.     color: rgb(42, 61, 79);
  11.     font-family: 楷体;/*字体样式*/
  12.     background-color: rgb(235, 225, 225);/*背景颜色*/
  13. }
  14.  
  15. .header {
  16.     /*头部*/
  17.     width: 100%;/*宽度*/
  18.     height: 150px;/*高度*/
  19. }
  20.  
  21. #hi1 {
  22.     /*头部图片*/
  23.     width: 100%;/*宽度*/
  24.     height: 150px;/*高度*/
  25. }
  26.  
  27. .dh ul {
  28.     /*导航栏*/
  29.     width: 1539px;
  30.     padding: 0px;/*内边距*/
  31.     height: 30px;/*高度*/
  32.     margin-bottom: 30px;/*外边距*/
  33. }
  34.  
  35. .dh ul li {/*导航栏行的设置*/
  36.     height: 30px;
  37.     width: 16.45%;
  38.     list-style: none;/*列表样式*/
  39.     float: left;/*左浮动*/
  40.     display: inline;
  41.     font: 0.9em;
  42. }
  43.  
  44. .dh ul li a {/*导航栏链接设置*/
  45.     text-align: center;/*文本位置*/
  46.     color: white;
  47.     font-size: larger;/*字体大小*/
  48.     font-family: 楷体;
  49.     width: 100%;
  50.     margin: 0px;
  51.     text-decoration: none;/*列表样式*/
  52.     display: block;
  53.     background-color: rgb(87, 156, 241);
  54.     line-height: 40px;
  55.     border-bottom: 0px solid rgb(168, 164, 172);
  56. }
  57.  
  58. .dh ul li a:hover {    /*鼠标划过导航栏时*/
  59.     color: rgb(0, 0, 0);
  60.     background-color: rgb(37, 84, 155);
  61.     border-bottom: 3px solid rgb(16, 4, 28);
  62.     
  63. }
  64.  
  65. .footer {
  66.     /*尾部*/
  67.     margin-top: 10px;
  68.     clear: both;/*清楚浮动*/
  69.     width: 100%;
  70.     height: 70px;
  71.     background-color: rgb(87, 156, 241);
  72.     color: rgb(99, 34, 34);
  73.     font: italic 14px/20px 宋体;/*文字样式*/
  74.     text-align: center;
  75. }
  76.  
  77. .footer p{
  78.     margin-top: 10px;
  79. }
  80.  
  81. #fi1 {
  82.     /*尾部图片*/
  83.     width: 100px;
  84.     height: 70px;
  85.     float: right;/*右浮动*/
  86.     padding: 0px;/*内边距*/
  87. }
  88.  
  89. /*主体部分*/
  90.  
  91. .donghua {
  92.     /*轮播*/
  93.     border-radius: 5px;/*边框弧度*/
  94.     width: 70%;
  95.     height: 250px;
  96.     overflow: hidden;/*图片隐藏*/
  97.     margin: 10px 200px 0px 200px;
  98. }
  99.  
  100. #photo {/*轮播图片的总设置*/
  101.     display: block;/*块展示*/
  102.     width: 6000px;
  103.     height: 250px;
  104.     animation: bj 8s linear infinite;/*动画设置*/
  105.     /*动画*/
  106. }
  107.  
  108. #photo img {
  109.     float: left;
  110.     width: 1200px;
  111.     height: 100%;
  112.     padding: 0px 0px 0px 0px;
  113. }
  114.  
  115. @keyframes bj {/*轮播图动画*/
  116.  
  117.     0%,
  118.     20% {
  119.         margin-left: 0px;
  120.     }
  121.  
  122.     25%,
  123.     40% {
  124.         margin-left: -1200px;
  125.     }
  126.  
  127.     45%,
  128.     60% {
  129.         margin-left: -2400px;
  130.     }
  131.  
  132.     65%,
  133.     80% {
  134.         margin-left: -3600px;
  135.     }
  136.  
  137.     85%,
  138.     100% {
  139.         margin-left: -4800px;
  140.     }
  141. }
  142.  
  143. .zhuti {/*主体内容*/
  144.     margin: 20px 100px 0px 100px;
  145. }
  146.  
  147. #zhuti-left {/*主体左边部分*/
  148.     float: left;
  149.     padding: 5px;
  150.     width: 200px;
  151.     background-color: rgb(210, 200, 170);
  152. }
  153.  
  154. #zhuti-left img {/*左边图片设置*/
  155.     width: 190px;
  156.     height: 150px;
  157. }
  158.  
  159. #zhuti-left img:hover{
  160.     transform: scale(1.1);
  161. }
  162.  
  163. #zhuti-left a {/*左边超链接*/
  164.     text-decoration: none;
  165.     color: rgb(61, 87, 109);
  166. }
  167.  
  168. #zhuti-left a:hover{
  169.     color: rgb(211, 35, 35);
  170. }
  171.  
  172. #zhuti-left p {/*左边文字设置*/
  173.     letter-spacing: 2px;/*字间距*/
  174.     text-indent: 2em;
  175.     line-height: 1.5em;
  176. }
  177.  
  178. #zhuti-right {/*右边整体设置*/
  179.     float: left;/*左浮动*/
  180.     width: 800px;
  181.     height: 438px;
  182.     padding: 5px;
  183.     background-color: rgb(210, 200, 170);
  184.     margin-left: 40px;
  185. }
  186.  
  187. #zhuti-right p {/*右边文字设置*/
  188.     letter-spacing: 2px;
  189.     text-indent: 2em;
  190.     line-height: 1.5em;
  191. }
  192.  
  193. #zhuti-right img {/*右边图片设置*/
  194.     width: 170px;
  195.     height: 200px;
  196.     border: 2px #cc66 ridge;
  197. }
  198.  
  199. #zhuti-right ul {/*右边列表设置图片*/
  200.     list-style-type: none;/*列表样式无*/
  201. }
  202.  
  203. #zhuti-right li {
  204.     float: left;
  205. }

家乡简介

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>jxjj</title>
  9.     <link type="text/css" rel="stylesheet" href="jianjie.css">
  10. </head>
  11.  
  12. <body>
  13.     <div class="header">
  14.         <!--头部-->
  15.         <img id="hi1" src="tupian/baoji9.jpg">
  16.     </div>
  17.     <div class="dh">
  18.         <!--导航栏 -->
  19.         <ul>
  20.             <li><a href="我的家乡.html#">首页</a></li>
  21.             <li><a href="家乡简介.html#">家乡简介</a></li>
  22.             <li><a href="风景名胜.html#">风景名胜</a></li>
  23.             <li><a href="美食特色.html#">美食特色</a></li>
  24.             <li><a href="站长简介.html#">站长简介</a></li>
  25.             <li><a href="在线调查.html#">在线调查</a></li>
  26.         </ul>
  27.     </div>
  28.     <div class="mulu">
  29.         <!--目录-->
  30.         <ul>
  31.             <li>
  32.                 <div id="d1">简介目录</div>
  33.             </li>
  34.             <div id="d2">
  35.                 <hr size="3" color="gray">
  36.                 <li><a href="#shiming">市名由来<span>>></span></a></li>
  37.                 <li><a href="#shihua">市花市树<span>>></span></a></li>
  38.                 <li><a href="#huanjin">地理环境<span>>></span></a></li>
  39.                 <li><a href="#lishi">历史沿革<span>>></span></a></li>
  40.                 <li><a href="#ziyuan">自然资源<span>>></span></a></li>
  41.                 <li><a href="#quhua">行政区划<span>>></span></a></li>
  42.                 <li><a href="#renkou">人口名族<span>>></span></a></li>
  43.         </ul>
  44.     </div>
  45.     </div>
  46.     </div>
  47.     <div class="zhuti">
  48.         <!--主体-->
  49.         <div id="ship">
  50.             <!--宣传视频-->
  51.             <embed src="https://v.qq.com/txp/iframe/player.html?vid=s0542g8s7qt" width="800px" height="300px"
  52.                 autostart="true" loop="true"></embed>
  53.         </div>
  54.         <div id="shiming">
  55.             <!--市名介绍-->
  56.             <img src="tupian/baoji5.jpg">
  57.             <h4><a name="shiming">市名由来：</a></h4>
  58.             <p>
  59.                 （1）唐天宝14年（755年），范阳节度使安禄山起兵反叛，鱼阳鼙动地来的时候，玄宗与贵妃正在华清池温泉水洗凝脂。
  60.                 叛军破关入陕，直逼长安。玄宗携贵妃杨玉环仓惶出逃，行止马嵬坡驿士兵哗变，玄宗被迫诛杀杨国忠，缢死杨贵妃，玄宗一行逃到陈仓，关中将士纷纷潜散。这时叛军追尾。
  61.                 玄宗慌不择路，只带几个亲兵钻入山中。爬过一座山峦，四面岩石陡峭无路可行。此时，山外尘土飞扬，叛军战马嘶鸣，玄宗扑到再地，失声痛哭道：“命休此矣。” 忽然飞来两只山鸡，盘旋之后，款款南飞。
  62.                 众人跟着陈仓山顶，歇入庙中。叛军追到。突然，冰雹倾泻不停，砸得叛军溃退而去。说也奇怪，山下雷雨交加，山上却晴空万里。众人再找那两只山鸡，已化为石鸡，昂首屹立。
  63.                 临别时，玄宗脱口而出：“陈仓，宝地也；山鸟，神鸡也。”宝鸡便因玄宗御口金言：“宝地神鸡”而得名，此后，陈仓更名为宝鸡，陈仓山始称鸡峰山。
  64.             </p>
  65.             <p>
  66.                 （2）秦文公十九年（公元前747年），有个陈仓人猎到一只像羊又像猪的怪兽，准备进献国君。可是却有两个小孩劝他万不可行。
  67.                 因为这个怪兽，名叫“獍”，刚一出生，就张口吃母，及长，吸人脑浆，陈仓人一听赶紧用力打头，欲把它杀死。突然，獍开口说话：“你不要杀我，快放了我，去逮这两个小孩。
  68.                 他们是龙凤胎，都叫陈宝，得男者称霸，得女者称王。”
  69.                 陈仓人闻言，以为灵异，放下獍去逮小孩。可是两个小孩忽然变成两只神鸡，一只飞到了河南南阳，千年之后转生为汉光武帝刘秀，另一只直飞陈仓山顶，化为石鸡，体大如羊，光洁如玉。
  70.                 陈仓人放了獍，獍感其德，衔草掩护石鸡。陈仓山从此林密草茂，幸赖石鸡之福，石鸡默默，以俟盛世。在唐至德二年（757年），陈仓山复闻神鸡啼鸣，声传十余里。当是时也，正是安史之乱的紧要关头。
  71.                 玄宗避乱四川，太子李亨在灵州提前登基，史称肃宗，挂帅平叛。闻神鸡鸣叫，唐军节节胜利，叛军一蹶不振。肃宗认为神鸡为国之宝，鸡鸣乃是吉祥之兆，随改陈仓为宝鸡，沿用至今。
  72.             </p>
  73.         </div>
  74.  
  75.         <div id="shihua">
  76.             <!--市花市树介绍-->
  77.             <div id="shihua1">
  78.                 <img id="hua" src="tupian/shihua.jpg">
  79.                 <h4><a name="shihua">宝鸡市市花——海棠花</a></h4>
  80.                 <p>
  81.                     海棠花（英文名：Malus spectabilis）是蔷薇科苹果属的植物，是中国的特有植物。生长于海拔50米至2,000米的地区，一般生于平原和山地，目前已由人工引种栽培。为落叶小乔木。
  82.                 </p>
  83.             </div>
  84.             <div id="shishu">
  85.                 <img id="shu" src="tupian/shishu.jpg">
  86.                 <h4>宝鸡市市树——白皮松</h4>
  87.                 <p>
  88.                     白皮松是一种高大的乔木，能长到30多木，是我国的特优品种。白皮松的树型挺拔茎枝，生命力旺盛且枝繁叶茂，而且寿命很长，在宝鸡市的栽培历史悠久，是很有代表性的树种之一。
  89.                 </p>
  90.             </div>
  91.         </div>
  92.         <div id="dili">
  93.             <!--地理环境介绍-->
  94.             <img src="tupian/dili.webp">
  95.             <h4><a name="huanjin">地理环境:</a></h4>
  96.             <p>
  97.                 宝鸡地处陕、甘、宁、川四省（区）结合部，处于西安、兰州、银川、成都四个省会城市的中心位置，介于东经106°18′~108°03′，北纬33°35′~35°06′之间。
  98.                 陇海铁路、宝成铁路、宝中铁路在此交会，是中国境内亚欧大陆桥上第三个大十字枢纽。
  99.                 东连咸阳、杨凌示范区，南接汉中，西北与甘肃省的天水和平凉毗邻。秦岭南屏，渭水中流，关陇西阻北横，渭北沃野平原。东西长156.6千米，南北宽160.6千米，总面积18117平方千米
  100.                 [90] ，其中市区面积3625平方千米。
  101.             </p>
  102.             <br>
  103.             <h5>地形地貌：</h5>
  104.             <p>
  105.                 宝鸡地质构造复杂，东、西、南、北、中的地貌差异大，具有南、西、北三面环山，以渭河为中轴向东拓展，呈尖角开口槽形的特点。
  106.                 山、川、原兼备，以山地、丘陵为主，呈显“六山一水三分田”格局，巍峨峻峭的秦岭群峰与平畴沃野的渭河平原互为映衬，构成了宝鸡市的地貌主体。
  107.                 位于宝鸡市太白县境内的秦岭主峰太白山海拔3767米，是中国大陆东部的最高山峰。
  108.             </p>
  109.             <p>
  110.                 宝鸡市位于秦岭纬向构造体系与其他构造体系的复合交接部位，具南北衔接、东西过渡的特点，可分为南部的秦岭褶皱带、中部的渭河断陷带和北部的鄂尔多斯台向斜区3个地质构造单元。
  111.                 中生代（末期）的燕山运动奠定了现代秦岭山脉的基础。渭河断陷盆地处于鄂尔多斯台向斜和秦岭褶皱系之间，为第四纪沉积物所覆盖，形成渭河平原及其两侧不对称的黄土台原。渭河由西向东横贯其间。
  112.                 渭河北部的岐山是以奥陶纪灰岩为主的低山，而渭河南部则是由古老变质岩和不同时代的花岗岩组成的中高山。
  113.             </p>
  114.             <p>
  115.                 宝鸡土壤分布由于地质地貌结构复杂，海拔高度差异悬殊，形成十分复杂且多种多样的成土环境，主要分为秦岭、关山山地和渭北黄土台塬、渭河谷地等不同区域。
  116.             </p>
  117.             <h5>水文：</h5>
  118.             <p>
  119.                 宝鸡市河流网排列以秦岭为界，分属黄河、长江两大水系。黄河水系河流主要是以渭河为干流的渭河水系，其主要支流有通关河、小水河、清姜河、石头河、汤峪河、金陵河、千河、漆水河等。
  120.                 渭河横贯宝鸡市境内206.1公里，多年平均径流量为35.51亿立方米。
  121.                 长江水系以嘉陵江上游河段为主干，其主要支流有将龙沟、北星沟、安河、石家沟、小峪河、旺峪河等，宝鸡市境内流长72公里，多年平均径流量为56.27亿立方米。
  122.                 境内秦岭主脊南侧还分布着汉江水系的支流湑水河、红崖河等。
  123.             </p>
  124.             <h5>气候：</h5>
  125.             <p>
  126.                 宝鸡市位于中国内陆中心腹地，关中平原西部，属于中纬度暖温带的半湿润气候区，为大陆性季风气候类型。
  127.                 冬冷夏热，春暖秋凉，四季分明。境内地形复杂，北部山区、中部川塬、南部秦岭，渭河横贯其中，因而气候类型多样，垂直差异明显，气象灾害频繁。
  128.                 宝鸡市年平均气温13度，全区在7.5-13.0度之间，4-9月为暖温期，10-3月为冷温期。全年无霜期在158-225天。极端最高气温42.7度（扶风），极端最低气温-25.5度（太白）。
  129.                 宝鸡市平均降水量700毫米，全区在610-780毫米之间，4-10月份降水占全年总量的90%，5-9月为多雨期，7-9月为主汛期，7-9月降水量占全年的60%。历史年雨量最多是秦岭，达1137毫米，年雨量最少是扶风，仅325毫米。
  130.             </p>
  131.         </div>
  132.         <div id="lishi">
  133.             <!--历史介绍-->
  134.             <img src="tupian/lishi.webp">
  135.             <h4><a name="lishi">历史沿革：</a></h4>
  136.             <p>
  137.                 宝鸡是周秦王朝发祥地。公元前11世纪，周先祖之一的古公亶父率族人迁徙到岐山下的周原（今宝鸡市岐山县），“古公乃贬戎狄之俗而营筑城郭室屋而邑别居之，作五官有司”（
  138.                 《史记·周本纪》），建立了周王朝早期的国家组织。
  139.                 这就是西周最早的都城岐邑，距今已3200多年。古公亶父被后世尊为太王。周在古公亶父死后的季历和文王时期，国势发展很快，先后征服了西落鬼戎、始呼、翳徒之戎，邻近的许多部落和方国也归附于周，巩固了周族在渭水中游的统治，为伐纣灭商，建立西周王朝奠定了基础。
  140.             </p>
  141.  
  142.         </div>
  143.         <div id="ziyuan">
  144.             <!--资源介绍-->
  145.             <h4><a name="ziyuan">自然资源：</a></h4>
  146.             <h5>矿产资源：</h5>
  147.             <p>
  148.                 宝鸡市自元古代至第四纪地层发育齐全，经历多旋回构造变动和岩浆活动以及复杂的变质作用，形成多种内生矿床和沉积矿床，矿产资源丰富。
  149.                 境内已发现矿产地202处，发现各类矿种资源45种，有铁、铜、铅、锌、镍、金、银、钨、钼、汞、黄铁等金属矿产，石灰石、电石灰石、大理石、白云石、硅石、耐火粘土、萤石、磷块岩、石英岩等非金属矿产。
  150.                 其中列入陕西省矿产资源储量表的矿种26种，矿区96处。已探明矿产储备资源/储量潜在价值在全市前三位的矿种有：水泥用灰岩、磷、煤。宝鸡地区煤矿主要集中在凤县，有草滩沟、罗钵庵、扈家窑等煤矿，陇县娘娘庙、麟游北马坊也有分布。
  151.                 全市共有各类采矿企业338户，共设置探矿权88个，勘察登记总面积2600平方公里。
  152.             </p>
  153.             <h5>植物资源</h5>
  154.             <p>
  155.                 宝鸡境内植物类型很多。植物区系以华北区系成分为主，华中、中国喜马拉雅区系成分也占重要地位。
  156.                 森林植物主要集中在秦岭和关山，秦岭山地随海拔递升，依次有落叶阔叶林、针阔叶混交林、针叶林和高山灌丛草甸等植被类型。
  157.                 植物资源丰富，宝鸡境内有资源植物2100多种，仅秦岭主峰太白山就有种子植物1550多种。特别是宝鸡有极其丰富的经济植物，据统计共有经济植物1000余种，太白山已发现的药用植物就有510多种，有广阔的综合利用前途。
  158.                 渭北台原、渭河平原主要为大田农作物、蔬菜、果园和城市绿化等栽培植物类型。全市森林覆盖率53.78%。山区有林地面积64.3万公顷，种植作物包括苹果、核桃、板栗、柿子、梨，桃子等。秦岭、关山的天然森林和在太白县的原始森林中还有野生果树，如猕猴桃，五味子、山荆子、山楂、沙棘果等近百种。
  159.                 野生中药材有500多种，其中有党参、当归、黄芪、天麻、杜仲、山萸、贝母等。
  160.             </p>
  161.             <h5>动物资源</h5>
  162.             <p>
  163.                 野生动物资源主要分布在秦岭、关山山地，市境内有国家一级保护珍贵动物10种，即大熊猫、金丝猴、羚牛、秦岭虎、云豹、豹、朱鹮、大鸨、黑鹳、白肩雕；另有国家二级保护动物18种。
  164.             </p>
  165.             <img src="tupian/ziyuan1.webp">
  166.             <h5>水资源：</h5>
  167.             <p>
  168.                 宝鸡市地下水储量估算，可供开采水量约7.56亿立方米。可控制利用水资源量为11亿立方米，宝鸡市有较理想的地表水源基地。
  169.                 1999年建成的引嘉济清工程，每年可向宝鸡供水912.5万立方米；2006年又建成冯家山引水二期工程，市区自来水供水能力达到20.9万立方米/日，冯家山引水工程，每年可向宝鸡供水2920万立方米，满足了宝鸡市区的用水需求
  170.             </p>
  171.         </div>
  172.         <div id="quhua">
  173.             <!--区域划分-->
  174.             <h4><a name="quhua">行政区划：</a></h4>
  175.             <p>截至2021年1月，宝鸡市辖4个市辖区、8个县，市政府驻地金台区陈仓大道行政中心</p>
  176.             <img src="tupian/quhua.png">
  177.         </div>
  178.         <div id="renkou">
  179.             <h4><a name="renkou">人口民族</a>：</h4>
  180.             <!--人口介绍-->
  181.             <h5>人口：</h5>
  182.             <p>截至2019年年末，宝鸡市常住人口376.10万人,城镇人口比重为54.26%。全市人口出生率9.7‰，死亡率6.19‰，人口自然增长率3.51‰</p>
  183.             <p>截至2017年末，宝鸡市常住人口378.10万人，城镇人口比重为52.12%。全市人口出生率9.91%，死亡率6.07%，人口自然增长率3.84%。</p>
  184.             <p>截至2017年末，宝鸡市常住人口377.10万人，城镇人口比重为53.17%。全市人口出生率9.61%，死亡率6.13%，人口自然增长率3.48‰。</p>
  185.             <h5>民族</h5>
  186.             <p>2016年末，宝鸡市汉族人口占绝大部分，达到了99.9%，全市有回族、满族、蒙古族、羌族等27个少数民族，共2万多人，占372万总人口的0.54%，集中分布在金台区、渭滨区、陈仓区、陇县、凤县、千阳县等7个县区。
  187.             </p>
  188.         </div>
  189.     </div>
  190.  
  191.  
  192.  
  193.  
  194.     <div id="" class="footer">
  195.         <!--页尾-->
  196.         <img id="fi1" src="tupian/baoji1.jpg">
  197.         <p>
  198.             古城宝鸡 璀璨文明
  199.         </p>
  200.         <p>
  201.             welcome to baoji|宝鸡欢迎您！
  202.         </p>
  203.     </div>
  204. </body>
  205.  
  206. </html>
  1. * {
  2.     /*全局选择器*/
  3.     margin: 0px;
  4.     padding: 0px;
  5. }
  6.  
  7. .header {
  8.     /*头部*/
  9.     width: 100%;
  10.     height: 130px;
  11. }
  12.  
  13. body {
  14.     background-color: rgb(235, 225, 225);
  15. }
  16.  
  17. #hi1 {
  18.     /*头部图片*/
  19.     width: 100%;
  20.     height: 150px;
  21. }
  22.  
  23. .dh {
  24.     height: 30px;
  25.     margin-top: 20px;
  26. }
  27.  
  28. .dh ul {
  29.     /*导航栏*/
  30.     margin-bottom: 30px;
  31.     width: 1539px;
  32.     padding: 0px;
  33.     height: 30px;
  34. }
  35.  
  36. .dh ul li {
  37.     /*列表设置*/
  38.     height: 30px;
  39.     width: 16.45%;
  40.     list-style: none;
  41.     /*列表样式*/
  42.     float: left;
  43.     display: inline
  44.         /*行内显示*/
  45. }
  46.  
  47. .dh ul li a {
  48.     /*列表超链接设置*/
  49.     text-align: center;
  50.     /*文本中部*/
  51.     color: white;
  52.     width: 100%;
  53.     font-size: larger;
  54.     font-family: 楷体;
  55.     text-decoration: none;
  56.     /*列表下划线无*/
  57.     display: block;
  58.     background-color: rgb(87, 156, 241);
  59.     line-height: 40px;
  60.     /*行高*/
  61.     border-bottom: 1px solid rgb(168, 164, 172);
  62. }
  63.  
  64. .dh ul li a:hover {
  65.     /*鼠标划过时*/
  66.     color: rgb(0, 0, 0);
  67.     background-color: rgb(37, 84, 155);
  68.     border-bottom: 3px solid rgb(16, 4, 28);
  69. }
  70.  
  71. .footer {
  72.     /*尾部*/
  73.     margin-top: 10px;
  74.     clear: both;
  75.     /*浮动清空*/
  76.     width: 100%;
  77.     height: 70px;
  78.     background-color: rgb(87, 156, 241);
  79.     color: rgb(28, 41, 99);
  80.     font: italic 14px/20px 宋体;
  81.     /*字体设置*/
  82.     text-align: center;
  83. }
  84.  
  85. .footer p {
  86.     margin-top: 10px;
  87. }
  88.  
  89. #fi1 {
  90.     /*尾部图片*/
  91.     width: 100px;
  92.     height: 70px;
  93.     float: right;
  94.     /*右浮动*/
  95.     padding: 0px;
  96.     /*内边距*/
  97. }
  98.  
  99. #shiming {
  100.     /*市名简介*/
  101.     clear: both;
  102.     /*浮动清除*/
  103.     margin-top: 30px;
  104.     background-color: rgb(255, 255, 255);
  105.     padding: 15px;
  106.     border-color: rgb(75, 99, 153);
  107.     border-style: dashed;
  108.     /*虚线 */
  109.     border-radius: 10px;
  110. }
  111.  
  112. #shiming img {
  113.     /*市名图片*/
  114.     border-radius: 5%;
  115.     /*边框弧度*/
  116.     width: 150px;
  117.     height: 150px;
  118.     float: left;
  119.     /*左浮动*/
  120.     margin: 5px 10px 0px 5px;
  121. }
  122.  
  123. #shiming img:hover {
  124.     /*图片划过时*/
  125.     transform: scale(1.2);
  126.     /*图片放大*/
  127. }
  128.  
  129. #shiming p {
  130.     /*市名文本设置*/
  131.     letter-spacing: 2px;
  132.     /*字体间隔*/
  133.     text-indent: 2em;
  134.     /*缩进*/
  135.     line-height: 1.5em;
  136. }
  137.  
  138. #shihua {
  139.     /*市花1*/
  140.     clear: both;
  141.     /*浮动清除*/
  142.     margin-top: 20px;
  143.     padding: 5px;
  144.     /*内边距*/
  145.     height: 200px;
  146.     background-color: rgb(255, 255, 255);
  147.     border-color: rgb(75, 99, 153);
  148.     border-style: dashed;
  149.     /*虚线*/
  150.     border-radius: 10px;
  151.  
  152. }
  153.  
  154. #shihua1 {
  155.     /*市花2*/
  156.     width: 450px;
  157.     height: 200px;
  158.     float: left;
  159.     /*左浮动*/
  160. }
  161.  
  162. #shishu {
  163.     /*市树*/
  164.     width: 450px;
  165.     height: 200px;
  166.     float: right;
  167.     /*右浮动*/
  168.     padding: 5px;
  169.     /*内边距*/
  170. }
  171.  
  172. #hua {
  173.     /*花图片*/
  174.     border-radius: 5%;
  175.     /*图片弧度*/
  176.     width: 150px;
  177.     height: 150px;
  178.     float: left;
  179.     /*左浮动*/
  180.     margin: 5px 10px 0px 5px;
  181. }
  182.  
  183. #hua:hover {
  184.     /*划过图片时*/
  185.     transform: scale(1.2);
  186.     /*图片放大*/
  187.  
  188. }
  189.  
  190. #shu {
  191.     /*树图片*/
  192.     border-radius: 5%;
  193.     /*图片弧度*/
  194.     width: 150px;
  195.     height: 150px;
  196.     float: left;
  197.     /*左浮动*/
  198.     margin: 0px 10px 0px 0px;
  199. }
  200.  
  201. #shu:hover {
  202.     /*鼠标化过时*/
  203.     transform: scale(1.2);
  204.     /*图片放大*/
  205. }
  206.  
  207. #shihua p {
  208.     /*市花文本设置*/
  209.     letter-spacing: 2px;
  210.     /*字间距*/
  211.     text-indent: 2em;
  212.     /*缩进*/
  213.     line-height: 1.5em;
  214. }
  215.  
  216. #dili {
  217.     /*地理*/
  218.     clear: both;
  219.     /*清除浮动*/
  220.     background-color: rgb(255, 255, 255);
  221.     padding: 15px;
  222.     margin-top: 20px;
  223.     border-color: rgb(75, 99, 153);
  224.     border-style: dashed;
  225.     border-radius: 10px;
  226.  
  227. }
  228.  
  229. #dili img {
  230.     /*地理图片*/
  231.     width: 150px;
  232.     height: 150px;
  233.     float: left;
  234.     /*左浮动*/
  235.     margin: 0px 20px 0px 10px;
  236.     padding: 10px 10px 10px 0px;
  237.     border-radius: 5px;
  238.     border: 1px solid rgb(20, 3, 31);
  239.     /*左浮动*/
  240. }
  241.  
  242. #dili img:hover {
  243.     /*鼠标划过时*/
  244.     transform: scale(1.2);
  245.     /*图片放大*/
  246. }
  247.  
  248. #dili p {
  249.     /*地理文本设置*/
  250.     letter-spacing: 2px;
  251.     /*字间间距*/
  252.     text-indent: 2em;
  253.     line-height: 1.5em;
  254. }
  255.  
  256. #lishi {
  257.     /*历史*/
  258.     clear: both;
  259.     background-color: rgb(255, 255, 255);
  260.     padding: 15px;
  261.     margin-top: 20px;
  262.     border-color: rgb(75, 99, 153);
  263.     border-style: dashed;
  264.     /*边框样式*/
  265.     border-radius: 10px;
  266.     /*边框弧度*/
  267.  
  268. }
  269.  
  270. #lishi p {
  271.     /*历史字段*/
  272.     letter-spacing: 2px;
  273.     /*字间距*/
  274.     text-indent: 2em;
  275.     /*缩进*/
  276.     line-height: 1.5em;
  277. }
  278.  
  279. #lishi img {
  280.     /*历史图片*/
  281.     width: 150px;
  282.     height: 100px;
  283.     float: left;
  284.     margin: 5px 10px 0px 10px;
  285.     border-radius: 5px;
  286.     /*边框弧度*/
  287.  
  288. }
  289.  
  290. #lishi img:hover {
  291.     /*历史图片划过时*/
  292.     transform: scale(1.2);
  293. }
  294.  
  295. #ziyuan {
  296.     /*资源*/
  297.     clear: both;
  298.     background-color: rgb(255, 255, 255);
  299.     padding: 15px;
  300.     margin-top: 20px;
  301.     border-color: rgb(75, 99, 153);
  302.     border-style: dashed;
  303.     /*边框样式*/
  304.     border-radius: 10px;
  305.     /*边框弧度*/
  306.  
  307. }
  308.  
  309. #ziyuan p {
  310.     /*资源字段*/
  311.     letter-spacing: 2px;
  312.     /*字间距*/
  313.     text-indent: 2em;
  314.     /*文段缩进*/
  315.     line-height: 1.5em;
  316. }
  317.  
  318. #ziyuan img {
  319.     /*资源图片*/
  320.     width: 150px;
  321.     height: 100px;
  322.     float: left;
  323.     margin: 5px 10px 0px 10px;
  324.     border-radius: 5px;
  325.  
  326. }
  327.  
  328. #ziyuan img:hover {
  329.     /*鼠标划过时资源图片*/
  330.     transform: scale(1.2);
  331. }
  332.  
  333. #quhua {
  334.     /*行政区划*/
  335.     clear: both;
  336.     background-color: rgb(255, 255, 255);
  337.     padding: 15px;
  338.     margin-top: 20px;
  339.     border-color: rgb(75, 99, 153);
  340.     border-style: dashed;
  341.     border-radius: 10px;
  342.  
  343. }
  344.  
  345. #quhua p {
  346.     /*区划段落*/
  347.     letter-spacing: 2px;
  348.     text-indent: 2em;
  349.     line-height: 1.5em;
  350. }
  351.  
  352. #quhua img {
  353.     /*区划图片*/
  354.     width: 800px;
  355.     height: 400px;
  356.     margin: 5px 10px 0px 10px;
  357.     border-radius: 5px;
  358.  
  359. }
  360.  
  361. #quhua img:hover {
  362.     /*鼠标划过时的区划图片*/
  363.     transform: scale(1.2);
  364. }
  365.  
  366. #renkou {
  367.     /*人口*/
  368.     clear: both;
  369.     background-color: rgb(255, 255, 255);
  370.     padding: 15px;
  371.     margin-top: 20px;
  372.     border-color: rgb(75, 99, 153);
  373.     border-style: dashed;
  374.     border-radius: 10px;
  375.  
  376. }
  377.  
  378. #renkou p {
  379.     /*人口段落*/
  380.     letter-spacing: 2px;
  381.     text-indent: 2em;
  382.     line-height: 1.5em;
  383. }
  384.  
  385. .mulu {
  386.     /*页面目录*/
  387.     float: left;
  388.     /*左浮动*/
  389.     width: 200px;
  390.     margin-top: 30px;
  391.     background-color: rgb(201, 176, 162);
  392. }
  393.  
  394. #d1 {
  395.     /*目录块大小设置*/
  396.     font-family: 黑体;
  397.     font-size: 100%;
  398.     /*字体大小*/
  399.     color: white;
  400.     float: left;
  401.     background-color: rgb(61, 58, 128);
  402.     width: 70px;
  403.     height: 20px;
  404.     padding: 5px 5px;
  405.     margin: 4px;
  406. }
  407.  
  408. #d2 {
  409.     /*目录内容块设置*/
  410.     clear: both;
  411. }
  412.  
  413. .mulu ul li {
  414.     /*列表设置*/
  415.     list-style-type: none;
  416. }
  417.  
  418. .mulu ul {
  419.     /*目录块*/
  420.     margin: 0px;
  421.     padding: 15px 10px 15px 10px;
  422. }
  423.  
  424. .mulu ul li a {
  425.     /*目录超链接设置*/
  426.     display: block;
  427.     text-decoration: none;
  428.     /*下划线无*/
  429.     color: rgb(79, 50, 72);
  430.     line-height: 30px;
  431.     /*行高*/
  432.     border-bottom: 1px dashed black;
  433.     /*底部边框*/
  434.     padding: 0px 0px 0px 0px;
  435. }
  436.  
  437. .mulu ul li a:hover {
  438.     /*鼠标划过时目录时*/
  439.     color: aqua;
  440. }
  441.  
  442. .mulu span {
  443.     /*目录链接块*/
  444.     float: right;
  445. }
  446.  
  447. .zhuti {
  448.     /*主体*/
  449.     background-color: rgb(235, 225, 225);
  450.     margin: 0px 200px 0px 300px;
  451. }
  452.  
  453. #ship {
  454.     /*视频设置*/
  455.     text-align: center;
  456.     margin-top: 50px;
  457. }

名胜风景

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>fenjin</title>
  9.     <link type="text/css" rel="stylesheet" href="fenjin.css">
  10. </head>
  11.  
  12. <body>
  13.     <div class="header">
  14.         <!--头部-->
  15.         <img id="hi1" src="tupian/baoji9.jpg">
  16.     </div>
  17.     <div class="dh">
  18.         <!--导航栏 -->
  19.         <ul>
  20.             <li><a href="我的家乡.html#">首页</a></li>
  21.             <li><a href="家乡简介.html#">家乡简介</a></li>
  22.             <li><a href="风景名胜.html#">风景名胜</a></li>
  23.             <li><a href="美食特色.html#">美食特色</a></li>
  24.             <li><a href="站长简介.html#">站长简介</a></li>
  25.             <li><a href="在线调查.html#">在线调查</a></li>
  26.         </ul>
  27.     </div>
  28.     <div class="zhuti"><!--主体部分-->
  29.         <h2>风景名胜</h2><!--风景标题-->
  30.         <div id="biaoge"><!--表格-->
  31.             <table border="2">
  32.                 <tr>
  33.                     <th>
  34.                         <div id="taiba"><!--太白-->
  35.                             <img src="tupian/taiba.png">
  36.                             <h2>太白山</h2>
  37.                             <p>
  38.                                 太白山，秦岭山脉最高峰，如鹤立鸡群之势冠列秦岭群峰之首。
  39.                                 自古以来，太白山就以高、寒、险、奇、富饶、神秘的特点闻名于世、称雄华夏。
  40.                             </p>
  41.                             <span>
  42.                                 <a href="https://baike.baidu.com/item/%E5%A4%AA%E7%99%BD%E5%B1%B1/121632">
  43.                                     <p>>>>
  44.                                     </p>
  45.                                 </a>
  46.                             </span>
  47.                         </div>
  48.                     </th>
  49.                 </tr>
  50.                 <tr>
  51.                     <th>
  52.                         <div id="caoyuan"><!--关山草原-->
  53.                             <img src="tupian/caoyuan.jpg">
  54.                             <h2>关山草原</h2>
  55.                             <p>
  56.                                 关山草原（Guanshan Grassland）位于陕西省宝鸡市陇县西南部，西邻甘肃省天水市张家川回族自治县马鹿乡，
  57.                                 距宝鸡市区134公里、西安市300公里，是中国西北内陆地区唯一的以高山草甸为主体的具有欧式风情的省级风景名胜区，国家AAAA级旅游景区...
  58.                             </p>
  59.                             <span>
  60.                                 <a href="https://baike.baidu.com/item/%E5%85%B3%E5%B1%B1%E8%8D%89%E5%8E%9F">
  61.                                     <p>
  62.                                         >>>
  63.                                     </p>
  64.                                 </a>
  65.                             </span>
  66.                         </div>
  67.                     </th>
  68.                 </tr>
  69.                 <tr>
  70.                     <th>
  71.                         <div id="jialin"><!--嘉陵江源头-->
  72.                             <img src="tupian/jialin.webp">
  73.                             <h2>嘉陵江源头</h2>
  74.                             <p>
  75.                                 嘉陵江源头风景区位于陕西宝鸡市南郊、川陕公路三十三公里处的秦岭之巅。
  76.                                 属天台山国家森林公园四大风景区之一，总面积三千六百公顷，著名的嘉陵江发源于景区内海拔二千八百多米的嘉陵谷中。
  77.                                 最新开发景点神河峡谷，幽兰深谷，飞龙盘道，潭瀑交错，奇石遍布，植被丰富，鸟鸣幽谷静，清流白石出，人道...
  78.                             </p>
  79.                             <span>
  80.                                 <a href="https://baike.baidu.com/item/%E5%98%89%E9%99%B5%E6%B1%9F%E6%BA%90%E5%A4%B4%E9%A3%8E%E6%99%AF%E5%8C%BA/9076000?fromtitle=%E5%98%89%E9%99%B5%E6%B1%9F%E6%BA%90%E5%A4%B4&fromid=7970677">
  81.                                     <p>>>>
  82.                                     </p>
  83.                                 </a>
  84.                             </span>
  85.                         </div>
  86.                     </th>
  87.                 </tr>
  88.                 <tr>
  89.                     <th>
  90.                         <div id="baiyuan"><!--黄柏塬-->
  91.                             <img src="tupian/baiyuan.webp">
  92.                             <h2>黄柏塬</h2>
  93.                             <p>
  94.                                 太白县黄柏塬乡地处秦岭南麓腹地，位于太白山西南脚，太白县东南方，距县城71公里，辖区总面积896平方公里，现已成立黄柏塬原生态风景区
  95.                                 ，境内崇山拱持，层峦迭嶂；苍松翠柏，四季常青；碧流穿峡，山秀水清；空气清新，植被丰富，被誉为“天然氧吧”。气候的垂直分带和小气候差异，
  96.                                 不仅利于各种生物繁衍生息，还形成了许多奇异的自然景观。由于...
  97.                             </p>
  98.                             <span>
  99.                                 <a href="https://baike.baidu.com/item/%E9%BB%84%E6%9F%8F%E5%A1%AC">
  100.                                     <p>>>>
  101.                                     </p>
  102.                                 </a>
  103.                             </span>
  104.                         </div>
  105.                     </th>
  106.                 </tr>
  107.                 <tr>
  108.                     <th>
  109.                         <div id="honghe"><!--红河谷-->
  110.                             <img src="tupian/honghe.jpg">
  111.                             <h2>红河谷</h2>
  112.                             <p>
  113.                                 红河谷森林公园位于陕西省眉县境内，地处秦岭主峰太白山北麓红河流域，东临太白山国家森林公园，西南接太白山自然保护区。
  114.                                 公园设计2341公顷，园内林木茂盛，森林覆盖率达91.7%以上，最高海拔3666.6米。这方集山、谷、石、林、水于一体，“幽、奇、峻、秀”特色独具的风水宝地，
  115.                                 以其挡不住的魅力，吸引着八方游人前来旅游...
  116.                             </p>
  117.                             <span>
  118.                                 <a href="http://www.honghegu.cn/index.php?v=listing&cid=2&page=1">
  119.                                     <p>>>>
  120.                                     </p>
  121.                                 </a>
  122.                             </span>
  123.                         </div>
  124.                     </th>
  125.                 </tr>
  126.                 <tr>
  127.                     <th>
  128.                         <div id="tongtian"><!--通天河国家森林公园-->
  129.                             <img src="tupian/tongtian.webp">
  130.                             <h2>通天河国家森林公园</h2>
  131.                             <p>
  132.                                 通天河国家森林公园位于陕西省宝鸡市西南部，秦岭南麓凤县唐藏镇境内，距宝鸡市90公里，距凤县县城41公里，距宝汉公路31公里。公园面积5235公顷。地势西北高、东南低，最高海拔2738.7米，最低海拔1580米，
  133.                                 森林覆盖率达98.6%，拥有广阔的自然森林植被景观...
  134.                             </p>
  135.                             <span>
  136.                                 <a href="https://baike.baidu.com/item/%E9%80%9A%E5%A4%A9%E6%B2%B3%E5%9B%BD%E5%AE%B6%E6%A3%AE%E6%9E%97%E5%85%AC%E5%9B%AD">
  137.                                     <p>>>>
  138.                                     </p>
  139.                                 </a>
  140.                             </span>
  141.                         </div>
  142.                     </th>
  143.                 </tr>
  144.                 <tr>
  145.                     <th>
  146.                         <div id="jifen"><!--鸡峰山-->
  147.                             <img src="tupian/jifen.webp">
  148.                             <h2>鸡峰山</h2>
  149.                             <p>
  150.                                 鸡峰山景区为陕西省省级重点保护单位。位于天台山主峰景区的东北方，宝鸡市区的东南方，距市区15公里，主峰元始天尊峰海拔2014米。古称“陈仓山”、“宝鸡山”，或称“鸡山”。宝鸡地名即源于此...
  151.                             </p>
  152.                             <span><a href="https://baike.baidu.com/item/%E9%B8%A1%E5%B3%B0%E5%B1%B1/2284054">
  153.                                     <p>>>>
  154.                                     </p>
  155.                                 </a>
  156.                             </span>
  157.                         </div>
  158.                     </th>
  159.                 </tr>
  160.                 <tr>
  161.                     <th>
  162.                         <div id="qianhu"><!--千湖国家湿地公园-->
  163.                             <img src="tupian/qianhu.webp">
  164.                             <h2>千湖国家湿地公园</h2>
  165.                             <p>
  166.                                 陕西千湖国家湿地公园位于渭河一级支流千河谷地中游陕西省宝鸡市千阳县境内，总面积573.2公顷，公园规划为湿地保护保育区、科普宣教展示区、湿地观光休闲区、湿地管理服务区四大功能区。
  167.                                 是以河流实地特征为主，集河流湿地、库塘湿地、沼泽湿地特征于一体，是我国西北地区典型的黄土高原湿地...
  168.                             </p>
  169.                             <span>
  170.                                 <a href="https://baike.baidu.com/item/%E9%99%95%E8%A5%BF%E5%8D%83%E6%B9%96%E5%9B%BD%E5%AE%B6%E6%B9%BF%E5%9C%B0%E5%85%AC%E5%9B%AD/23695049?fromtitle=%E5%8D%83%E6%B9%96%E5%9B%BD%E5%AE%B6%E6%B9%BF%E5%9C%B0%E5%85%AC%E5%9B%AD&fromid=8356119">
  171.                                     <p>>>>
  172.                                     </p>
  173.                                 </a>
  174.                             </span>
  175.                         </div>
  176.                     </th>
  177.                 </tr>
  178.                 <tr>
  179.                     <th>
  180.                         <div id="longmen"><!--陕西省龙门洞森林公园-->
  181.                             <img src="tupian/longmen.webp">
  182.                             <h2>陕西省龙门洞森林公园</h2>
  183.                             <p>
  184.                                 陕西省龙门洞森林公园，陕西省重点文物保护单位，省级森林公园。位于陕甘交界的陇县新集川乡境内。宝中铁路从东侧穿过，212省级公路可达景区。距宝鸡市119公里，西安市300公里，平凉市100多公里。
  185.                                 是宝鸡市北线旅游的重点景区，是独具特色的融道教名胜、原始森林、喀斯特岩溶景观为一体的综合性森林公园。龙门洞古称灵仙岩，因元代丘处机创建道教全真龙门派而誉满神州，素有“关山第二华山”之美誉。
  186.                             </p>
  187.                             <span>
  188.                                 <a href="https://baike.baidu.com/item/%E9%99%95%E8%A5%BF%E7%9C%81%E9%BE%99%E9%97%A8%E6%B4%9E%E6%A3%AE%E6%9E%97%E5%85%AC%E5%9B%AD/6021509?fromtitle=%E9%BE%99%E9%97%A8%E6%B4%9E%E6%A3%AE%E6%9E%97%E5%85%AC%E5%9B%AD&fromid=2281514">
  189.                                     <p>>>>
  190.                                     </p>
  191.                                 </a>
  192.                             </span>
  193.                         </div>
  194.                     </th>
  195.                 </tr>
  196.                 <tr>
  197.                     <th>
  198.                         <div id="qinfen"><!--青峰峡森林公园-->
  199.                             <img src="tupian/qinfen.webp">
  200.                             <h2>青峰峡森林公园</h2>
  201.                             <p>
  202.                                 青峰峡森林公园，国家AAAA级旅游景区 [1]
  203.                                 ，位于宝鸡市东南75公里处的太白县桃川镇，西距太白县城8公里，杨凌100公里、咸阳130公里、西安160公里、汉中170公里，南至秦岭主峰四十里跑马梁，
  204.                                 北至褒斜古栈道，东西两侧以五里峡山梁为界。姜眉公路从公园门口经过，将公园与西安、咸阳、汉中、宝鸡等城市连为一体，交通十分便利。
  205.                             </p>
  206.                             <span><a href="https://baike.baidu.com/item/%E9%9D%92%E5%B3%B0%E5%B3%A1%E6%A3%AE%E6%9E%97%E5%85%AC%E5%9B%AD/7677506?fromtitle=%E9%9D%92%E5%B3%B0%E5%B3%A1&fromid=467242">
  207.                                     <p>>>></p>
  208.                                 </a></span>
  209.                         </div>
  210.                     </th>
  211.                 </tr>
  212.             </table>
  213.         </div>
  214.     </div>
  215.  
  216.  
  217.     <div id="" class="footer">
  218.         <!--页尾-->
  219.         <img id="fi1" src="tupian/baoji1.jpg">
  220.         <p>
  221.             古城宝鸡 璀璨文明
  222.         </p>
  223.         <p>
  224.             welcome to baoji|宝鸡欢迎您！
  225.         </p>
  226.     </div>
  227. </body>
  228.  
  229. </html>
  1. * {/*全局选择器*/
  2.     margin: 0px;
  3.     padding: 0px;
  4. }
  5.  
  6. .header {
  7.     /*头部*/
  8.     width: 100%;
  9.     height: 150px;
  10. }
  11. body{/*主体*/
  12.     background-color: rgb(235, 225, 225);
  13. }
  14. #hi1 {
  15.     /*头部图片*/
  16.     width: 100%;
  17.     height: 150px;
  18. }
  19.  
  20. img{/*图片设置*/
  21.     border-radius: 15px;/*边框弧度*/
  22.  
  23. }
  24.  
  25. .dh ul {
  26.     /*导航栏*/
  27.     margin-bottom: 30px;
  28.     width: 1539px;
  29.     padding: 0px;
  30.     height: 30px;
  31. }
  32.  
  33. .dh ul li {/*导航栏列表*/
  34.     height: 30px;
  35.     width: 16.45%;
  36.     list-style: none;/*列表样式*/
  37.     float: left;/*左浮动*/
  38.     display: inline;/*行内显示*/
  39.     font: 0.9em;/*字体大小*/
  40. }
  41. .dh{/*导航高度*/
  42.     height: 30px;
  43. }
  44. .dh ul li a {/*导航链接设置*/
  45.     text-align: center;/*文字居中*/
  46.     color: white;
  47.     width: 100%;
  48.     font-size: larger;
  49.     font-family: 楷体;
  50.     text-decoration: none;/*下划线无*/
  51.     display: block;/*块显示*/
  52.     background-color: rgb(87, 156, 241);
  53.     line-height: 40px;
  54.     border-bottom: 1px solid rgb(168, 164, 172);/*底部边框*/
  55. }
  56.  
  57. .dh ul li a:hover {
  58.     /*鼠标划导航栏时过时*/
  59.     color: rgb(0, 0, 0);
  60.     background-color: rgb(37, 84, 155);
  61.     border-bottom: 3px solid rgb(16, 4, 28);
  62. }
  63.  
  64. .footer {
  65.     /*尾部*/
  66.     margin-top: 10px;
  67.     clear: both;/*清除浮动*/
  68.     width: 100%;
  69.     height: 70px;
  70.     background-color: rgb(87, 156, 241);
  71.     color: rgb(28, 41, 99);
  72.     font: italic 14px/20px 宋体;/*字体设置*/
  73.     text-align: center;
  74. }
  75. .footer p{/*底部段落设置*/
  76.     margin-top: 10px;
  77. }
  78.  
  79. #fi1 {
  80.     /*尾部图片*/
  81.     width: 100px;
  82.     height: 70px;
  83.     float: right;/*右浮动*/
  84.     padding: 0px;
  85. }
  86. span{
  87.     /*>>>行内设置*/
  88.     float: right;
  89. }
  90. span p{/*>>>行内段落设置*/
  91.     font-size: small;
  92. }
  93. span a{/*链接设置*/
  94.     color: rgb(0, 0, 0);
  95. }
  96. span a:hover{/*鼠标划过时链接变化*/
  97.     color: rgb(77, 248, 10);
  98. }
  99. .zhuti h2{/*主体标题设置*/
  100.     color: red;
  101.     font-family: 楷体;/*字体样式*/
  102.     margin-top: 20px;
  103. }
  104. .zhuti{/*主体设置*/
  105.     text-align: center;/*文本居中*/
  106. margin: 0px 200px 0px 200px;
  107. background-color: rgb(235, 225, 225);
  108. }
  109. #taiba{/*太白介绍*/
  110.     margin-top: 20px;
  111.     height: 200px;
  112.     background-color: rgb(235, 225, 225);
  113.     font-size: x-large;
  114.     padding: 10px;
  115.     font-family: 楷体;
  116. }
  117. #taiba p{
  118.     letter-spacing: 2px;/*字简介*/
  119.     text-indent: 2em;/*缩进*/
  120.     line-height: 1.5em;/*行高设置*/
  121.     font-size: large;
  122.  
  123. }
  124. #taiba img{/*太白图片*/
  125.     height: 200px;
  126.     width: 300px;
  127.     float: left;
  128.     margin: 0px 10px 0px 0px;
  129. }
  130. #taiba img:hover {/*鼠标划过时*/
  131.     transform: scale(1.2);
  132.  
  133. }
  134.  
  135. #caoyuan{/*关山草原介绍*/
  136.     margin-top: 20px;
  137.     height: 200px;
  138.     background-color: rgb(235, 225, 225);
  139.     font-size: x-large;
  140.     padding: 10px;
  141.     font-family: 楷体;
  142. }
  143. #caoyuan p{/*关山草原段落*/
  144.     letter-spacing: 2px;
  145.     text-indent: 2em;
  146.     line-height: 1.5em;
  147.     font-size: large;
  148.  
  149. }
  150. #caoyuan img{/*关山草原图片*/
  151.     height: 200px;
  152.     width: 300px;
  153.     float: left;
  154.     margin: 0px 10px 0px 0px;
  155. }
  156. #caoyuan img:hover {/*鼠标关山草原图片时*/
  157.     transform: scale(1.2);
  158.  
  159. }
  160.  
  161. #jialin{/*嘉陵江源头介绍*/
  162.     margin-top: 20px;
  163.     height: 200px;
  164.     background-color: rgb(235, 225, 225);
  165.     font-size: x-large;
  166.     padding: 10px;
  167.     font-family: 楷体;
  168. }
  169. #jialin p{/*嘉陵江源头段落*/
  170.     letter-spacing: 2px;
  171.     text-indent: 2em;
  172.     line-height: 1.5em;
  173.     font-size: large;
  174.  
  175. }
  176. #jialin img{/*嘉陵江源头图片*/
  177.     height: 200px;
  178.     width: 300px;
  179.     float: left;
  180.     margin: 0px 10px 0px 0px;
  181. }
  182. #jialin img:hover {/*鼠标划过时嘉陵江源头图片*/
  183.     transform: scale(1.2);
  184.  
  185. }
  186.  
  187. #baiyuan{/*黄柏塬介绍*/
  188.     margin-top: 20px;
  189.     height: 200px;
  190.     background-color: rgb(235, 225, 225);
  191.     font-size: x-large;
  192.     padding: 10px;
  193.     font-family: 楷体;
  194. }
  195. #baiyuan p{/*黄柏塬段落设置*/
  196.     letter-spacing: 2px;
  197.     text-indent: 2em;
  198.     line-height: 1.5em;
  199.     font-size: large;
  200.  
  201. }
  202. #baiyuan img{/*黄柏塬图片*/
  203.     height: 200px;
  204.     width: 300px;
  205.     float: left;
  206.     margin: 0px 10px 0px 0px;
  207. }
  208. #baiyuan img:hover {/*鼠标划过时黄柏塬图片*/
  209.     transform: scale(1.2);
  210.  
  211. }
  212.  
  213. #honghe{/*红河谷介绍*/
  214.     margin-top: 20px;
  215.     height: 200px;
  216.     background-color: rgb(235, 225, 225);
  217.     font-size: x-large;
  218.     padding: 10px;
  219.     font-family: 楷体;
  220. }
  221. #honghe p{/*红河谷段落设置*/
  222.     letter-spacing: 2px;
  223.     text-indent: 2em;
  224.     line-height: 1.5em;
  225.     font-size: large;
  226.  
  227. }
  228. #honghe img{/*红河谷图片*/
  229.     height: 200px;
  230.     width: 300px;
  231.     float: left;
  232.     margin: 0px 10px 0px 0px;
  233. }
  234. #honghe img:hover {/*鼠标划过红河谷图片*/
  235.     transform: scale(1.2);
  236.  
  237. }
  238.  
  239. #tongtian{/*通天河国家森林公园介绍*/
  240.     margin-top: 20px;
  241.     height: 200px;
  242.     background-color: rgb(235, 225, 225);
  243.     font-size: x-large;
  244.     padding: 10px;
  245.     font-family: 楷体;
  246. }
  247. #tongtian p{/*通天河国家森林公园段落设置*/
  248.     letter-spacing: 2px;
  249.     text-indent: 2em;
  250.     line-height: 1.5em;
  251.     font-size: large;
  252.  
  253. }
  254. #tongtian img{/*通天河国家森林公园图片设置*/
  255.     height: 200px;
  256.     width: 300px;
  257.     float: left;
  258.     margin: 0px 10px 0px 0px;
  259. }
  260. #tongtian img:hover {/*鼠标划过通天河国家森林公园图片*/
  261.     transform: scale(1.2);
  262.  
  263. }
  264.  
  265. #jifen{/*鸡峰山介绍*/
  266.     margin-top: 20px;
  267.     height: 200px;
  268.     background-color: rgb(235, 225, 225);
  269.     font-size: x-large;/*字体大小*/
  270.     padding: 10px;
  271.     font-family: 楷体;
  272. }
  273. #jifen p{/*鸡峰山段落设置*/
  274.     letter-spacing: 2px;
  275.     text-indent: 2em;
  276.     line-height: 1.5em;
  277.     font-size: large;
  278.  
  279. }
  280. #jifen img{/*鸡峰山图片设置*/
  281.     height: 200px;
  282.     width: 300px;
  283.     float: left;
  284.     margin: 0px 10px 0px 0px;
  285. }
  286. #jifen img:hover {/*鼠标划过鸡峰山图片设置*/
  287.     transform: scale(1.2);
  288.  
  289. }
  290.  
  291. #qianhu{/*千湖国家湿地公园介绍*/
  292.     margin-top: 20px;
  293.     height: 200px;
  294.     background-color: rgb(235, 225, 225);
  295.     font-size: x-large;
  296.     padding: 10px;
  297.     font-family: 楷体;
  298. }
  299. #qianhu p{/*千湖国家湿地公园段落设置*/
  300.     letter-spacing: 2px;
  301.     text-indent: 2em;
  302.     line-height: 1.5em;
  303.     font-size: large;
  304.  
  305. }
  306. #qianhu img{/*千湖国家湿地公园图片设置*/
  307.     height: 200px;
  308.     width: 300px;
  309.     float: left;
  310.     margin: 0px 10px 0px 0px;
  311. }
  312. #qianhu img:hover {/*鼠标划过千湖国家湿地公园图片设置*/
  313.     transform: scale(1.2);
  314.  
  315. }
  316.  
  317. #longmen{/*陕西省龙门洞森林公园介绍*/
  318.     margin-top: 20px;
  319.     height: 200px;
  320.     background-color: rgb(235, 225, 225);
  321.     font-size: x-large;
  322.     padding: 10px;
  323.     font-family: 楷体;
  324. }
  325. #longmen p{/*陕西省龙门洞森林公园段落设置*/
  326.     letter-spacing: 2px;
  327.     text-indent: 2em;
  328.     line-height: 1.5em;
  329.     font-size: large;
  330.  
  331. }
  332. #longmen img{/*陕西省龙门洞森林公园图片设置*/
  333.     height: 200px;
  334.     width: 300px;
  335.     float: left;
  336.     margin: 0px 10px 0px 0px;
  337. }
  338. #longmen img:hover {/*鼠标划过陕西省龙门洞森林公园图片设置*/
  339.     transform: scale(1.2);
  340.  
  341. }
  342.  
  343. #qinfen{/*青峰峡森林公园介绍*/
  344.     margin-top: 20px;
  345.     height: 200px;
  346.     background-color:w;
  347.     font-size: x-large;
  348.     padding: 10px;
  349.     font-family: 楷体;
  350. }
  351. #qinfen p{/*青峰峡森林公园段落设置*/
  352.     letter-spacing: 2px;
  353.     text-indent: 2em;
  354.     line-height: 1.5em;
  355.     font-size: large;
  356.  
  357. }
  358. #qinfen img{/*青峰峡森林公园图片设置*/
  359.     height: 200px;
  360.     width: 300px;
  361.     float: left;
  362.     margin: 0px 10px 0px 0px;
  363. }
  364. #qinfen img:hover {/*鼠标划过青峰峡森林公园图片设置*/
  365.     transform: scale(1.2);
  366.  
  367. }
  368. .zhuti a{/*主体超链接设置*/
  369.     text-decoration: none;
  370. }

美食特色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>meishi</title>
  9.     <link type="text/css" rel="stylesheet" href="meishi.css">
  10. </head>
  11.  
  12. <body>
  13.     <div class="header">
  14.         <!--头部-->
  15.         <img id="hi1" src="tupian/baoji9.jpg">
  16.     </div>
  17.  
  18.     <div class="dh">
  19.         <!--导航栏 -->
  20.         <ul>
  21.             <li><a href="我的家乡.html#">首页</a></li>
  22.             <li><a href="家乡简介.html#">家乡简介</a></li>
  23.             <li><a href="风景名胜.html#">风景名胜</a></li>
  24.             <li><a href="美食特色.html#">美食特色</a></li>
  25.             <li><a href="站长简介.html#">站长简介</a></li>
  26.             <li><a href="在线调查.html#">在线调查</a></li>
  27.         </ul>
  28.     </div>
  29.  
  30.     <div class="zhuti">
  31.         <!--主体-->
  32.         <div id="zhutileft">
  33.             <div id="photo">
  34.                 <img src="tupian/meibo1.jpg">
  35.                 <img src="tupian/meibo6.webp">
  36.                 <img src="tupian/meibo3.jpg">
  37.                 <img src="tupian/meibo4.jpg">
  38.                 <img src="tupian/meibo2.webp">
  39.             </div>
  40.         </div>
  41.         <div id="zhutimain">
  42.             <img src="tupian/meijian.jpg">
  43.             <h4>
  44.                 舌尖上的美食
  45.             </h4>
  46.             <a
  47.                 href="https://post.smzdm.com/p/730781/#:~:text=%E8%AF%B4%E5%88%B0%E5%AE%9D%E9%B8%A1%E7%89%B9%E8%89%B2%E7%BE%8E%E9%A3%9F,%E3%80%81%E8%80%81%E5%8F%A4%E5%AE%B6%E7%81%AB%E9%94%85%E7%AD%89%E3%80%82">
  48.                 <p>
  49.                     说到宝鸡特色美食，著名的臊子面、擀面皮、马蹄酥、醋粉、血条面等出于宝鸡地区的九县和陈仓区，作为以工业移民和逃荒人群为主的宝鸡金台、渭滨两区，
  50.                     代表美食往往是其他地区美食的改良品，如蜂蜜凉粽、茶酥、豆腐包子、老苗炸鸡、圆门洞炒货、松枝......
  51.                 </p>
  52.             </a>
  53.         </div>
  54.         <div id="zhutiright">
  55.             <ul>
  56.                 <li>
  57.                     <div id="d1">美食排行榜</div>
  58.                 </li>
  59.                 <div id="d2">
  60.                     <hr size="3" color="gray">
  61.                     <li><a href="#">岐山肉臊子夹馍<span>[1]</span></a></li>
  62.                     <li><a href="#">岐山臊子面<span>[2]</span></a></li>
  63.                     <li><a href="#">岐山擀面皮<span>[3]</span></a></li>
  64.                     <li><a href="#">豆花泡馍<span>[4]</span></a></li>
  65.                     <li><a href="#">豆腐包子<span>[5]</span></a></li>
  66.                     <li><a href="#">陇县马蹄酥<span>[6]</span></a></li>
  67.                     <li><a href="#">凤翔腊驴肉<span>[7]</span></a></li>
  68.                     <li><a href="#">扶风鹿糕馍<span>[8]</span></a></li>
  69.                     <li><a href="#">西府扯面<span>[9]</span></a></li>
  70.                     <li><a href="#">岐山锅盔<span>[10]</span></a></li>
  71.             </ul>
  72.         </div>
  73.         <div id="bottom">
  74.             <div id="meishi1">
  75.                 <img src="tupian/meishi1.jpg">
  76.                 <h4>岐山臊子面</h4>
  77.                 <a href="https://baike.baidu.com/item/%E8%87%8A%E5%AD%90%E9%9D%A2/656612">
  78.                     <p>臊（sào）子面是中国陕西省的特色传统面食之一、是著名西府小吃，以宝鸡的岐山臊子面最为正宗。在陕西关中平原及甘肃...
  79.                     </p>
  80.                 </a>
  81.             </div>
  82.             <div id="meishi2">
  83.                 <img src="tupian/meishi3.webp">
  84.                 <h4>豆花泡馍</h4>
  85.                 <a href="https://baike.baidu.com/item/%E8%B1%86%E8%8A%B1%E6%B3%A1%E9%A6%8D/4626484">
  86.                     <p>豆花泡馍是流传于陕西省西府地区（即今天陕西省宝鸡市凤翔区）地方传统风味的名小吃，其馍采用独特工艺加调味料烙成，厚过...
  87.                     </p>
  88.                 </a>
  89.             </div>
  90.             <div id="meishi3">
  91.                 <img src="tupian/meishi2.webp">
  92.                 <h4>搅团</h4>
  93.                 <a href="https://baike.baidu.com/item/%E6%90%85%E5%9B%A2/1184341">
  94.                     <p>臊（sào）子面是中国陕西省的特色传统面食之一、是著名西府小吃，以宝鸡的岐山臊子面最为正宗。在陕西关中平原及...
  95.                     </p>
  96.                 </a>
  97.             </div>
  98.             <div id="meishi4">
  99.                 <img src="tupian/meishi4.webp">
  100.                 <h4>岐山擀面皮</h4>
  101.                 <a href="https://baike.baidu.com/item/%E6%93%80%E9%9D%A2%E7%9A%AE">
  102.                     <p>擀面皮是陕西关中地区特有的传统名小吃，尤以西府宝鸡地区为最佳，宝鸡岐山擀面皮2011年被认定为中华名小吃。擀面...
  103.                     </p>
  104.                 </a>
  105.             </div>
  106.  
  107.         </div>
  108.     </div>
  109.  
  110.     <div id="" class="footer">
  111.         <!--页尾-->
  112.         <img id="fi1" src="tupian/baoji1.jpg">
  113.         <p>
  114.             古城宝鸡 璀璨文明
  115.         </p>
  116.         <p>
  117.             welcome to baoji|宝鸡欢迎您！
  118.         </p>
  119.     </div>
  120. </body>
  121.  
  122. </html>
  1. * {
  2.     /*全局选择器*/
  3.     margin: 0px;
  4.     padding: 0px;
  5. }
  6.  
  7. body {
  8.     /*主体*/
  9.     color: aliceblue;
  10.     /*颜色*/
  11.     font-family: 楷体;
  12.     /*字体样式*/
  13.     background-color: rgb(235, 225, 225);
  14. }
  15.  
  16. .header {
  17.     /*头部*/
  18.     width: 100%;
  19.     height: 150px;
  20. }
  21.  
  22. #hi1 {
  23.     /*头部图片*/
  24.     width: 100%;
  25.     height: 150px;
  26. }
  27.  
  28. .dh ul {
  29.     /*导航栏*/
  30.     margin-bottom: 30px;
  31.     padding: 0px;
  32.     height: 30px;
  33.     width: 1539px;
  34. }
  35.  
  36. .dh ul li {
  37.     /*导航栏列表*/
  38.     height: 30px;
  39.     width: 16.45%;
  40.     list-style: none;
  41.     /*列表样式无*/
  42.     float: left;
  43.     /*左浮动*/
  44.     display: inline;
  45.     /*行内显示*/
  46.     font: 0.9em;
  47. }
  48.  
  49. .dh ul li a {
  50.     /*导航栏超链接*/
  51.     text-align: center;
  52.     color: white;
  53.     width: 100%;
  54.     font-size: larger;
  55.     text-decoration: none;
  56.     /*下划线无*/
  57.     display: block;
  58.     background-color: rgb(87, 156, 241);
  59.     line-height: 40px;
  60.     border-bottom: 1px solid rgb(168, 164, 172);
  61. }
  62.  
  63. .dh ul li a:hover {
  64.     /*鼠标划过时*/
  65.     color: rgb(0, 0, 0);
  66.     background-color: rgb(37, 84, 155);
  67.     border-bottom: 3px solid rgb(16, 4, 28);
  68. }
  69.  
  70. .footer {
  71.     /*尾部*/
  72.     clear: both;
  73.     width: 100%;
  74.     height: 70px;
  75.     background-color: rgb(87, 156, 241);
  76.     color: rgb(28, 41, 99);
  77.     font: italic 14px/20px 宋体;
  78.     text-align: center;
  79. }
  80.  
  81. .footer p {
  82.     /*尾部段落*/
  83.     margin-top: 10px;
  84. }
  85.  
  86. #fi1 {
  87.     /*尾部图片*/
  88.     width: 100px;
  89.     height: 70px;
  90.     float: right;
  91.     padding: 0px;
  92. }
  93.  
  94. .zhuti {
  95.     /*主体*/
  96.     margin: 10px 150px 0px 150px;
  97.     background-color: burlywood;
  98. }
  99.  
  100. #zhutiright {
  101.     /*美食排行耪标题主体右边*/
  102.     width: 25%;
  103.     height: 400px;
  104.     background-color: aqua;
  105.     float: left;
  106. }
  107.  
  108. #d1 {
  109.     /*美食排行耪标题主体右边*/
  110.     font-family: 黑体;
  111.     font-size: 100%;
  112.     color: white;
  113.     float: left;
  114.     background-color: rgb(134, 16, 16);
  115.     width: 100px;
  116.     height: 20px;
  117.     padding: 5px 5px;
  118.     margin: 4px;
  119. }
  120.  
  121. #d2 {
  122.     /*美食排行耪内容设置*/
  123.     clear: both;
  124. }
  125.  
  126. #zhutiright ul li {
  127.     /*列表设置*/
  128.     list-style-type: none;
  129.     /*列表样式无*/
  130. }
  131.  
  132. #zhutiright ul {
  133.     /*列表设置*/
  134.     margin: 0px;
  135.     padding: 15px 10px 15px 10px;
  136. }
  137.  
  138. #zhutiright ul li a {
  139.     /*列表超链接设置*/
  140.     display: block;
  141.     text-decoration: none;
  142.     color: black;
  143.     line-height: 30px;
  144.     border-bottom: 1px dashed black;
  145.     padding: 0px 0px 0px 0px;
  146. }
  147.  
  148. #zhutiright span {
  149.     /*排列大小*/
  150.     float: right;
  151. }
  152.  
  153. #zhutileft {
  154.     /*主体左边设置*/
  155.     width: 50%;
  156.     height: 400px;
  157.     background-color: aquamarine;
  158.     float: left;
  159.     overflow: hidden;
  160.     /*隐藏*/
  161.     border-radius: 5px;
  162.     /*弧度*/
  163.  
  164. }
  165.  
  166. #photo {
  167.     /*动画设置图片*/
  168.     display: block;
  169.     width: 3045px;
  170.     height: 400px;
  171.     animation: bj 8s linear infinite;
  172.     /*动画*/
  173. }
  174.  
  175. #photo img {
  176.     /*图片设置*/
  177.     float: left;
  178.     width: 609px;
  179.     height: 100%;
  180.     padding: 0px 0px 0px 0px;
  181. }
  182.  
  183. /*轮播图动画*/
  184. @keyframes bj {
  185.  
  186.     0%,
  187.     20% {
  188.         margin-left: 0px;
  189.     }
  190.  
  191.     25%,
  192.     40% {
  193.         margin-left: -609px;
  194.     }
  195.  
  196.     45%,
  197.     60% {
  198.         margin-left: -1218px;
  199.     }
  200.  
  201.     65%,
  202.     80% {
  203.         margin-left: -1827px;
  204.     }
  205.  
  206.     85%,
  207.     100% {
  208.         margin-left: -2436px;
  209.     }
  210. }
  211.  
  212. #zhutimain {
  213.     /*中间内容设置*/
  214.     width: 25%;
  215.     height: 400px;
  216.     background-color: rgb(201, 199, 206);
  217.     float: left;
  218.     text-align: center;
  219. }
  220.  
  221. #zhutimain img {
  222.     /*中部图片设置*/
  223.     border-radius: 5px;
  224.     width: 250px;
  225.     height: 160px;
  226.     margin: 8px 0px 0px 0px;
  227. }
  228.  
  229. #zhutimain img:hover {
  230.     /*划过中间图片设置*/
  231.     transform: scale(1.2);
  232. }
  233.  
  234. #zhutimain h4 {
  235.     /*中间内容标题设置*/
  236.     color: brown;
  237. }
  238.  
  239. #zhutimain a {
  240.     /*中间内容超链接设置*/
  241.     text-decoration: none;
  242.     /*下划线无*/
  243.     color: rgb(16, 159, 21);
  244. }
  245.  
  246. #zhutimain a:hover {
  247.     /*划过中间主体超链接设置*/
  248.     color: rgb(120, 8, 109);
  249. }
  250.  
  251. #zhutimain p {
  252.     /*中间主体段落设置*/
  253.     margin: 3px 5px 0px 5px;
  254.     letter-spacing: 2px;
  255.     /*字间距设置*/
  256.     text-indent: 2em;
  257.     line-height: 1.5em;
  258. }
  259.  
  260. #bottom {
  261.     /*底部四个美食div设置*/
  262.     width: 100%;
  263.     height: 300px;
  264.     background-color: blueviolet;
  265.     clear: both;
  266. }
  267.  
  268. #meishi1 {
  269.     /*美食1设置*/
  270.     float: left;
  271.     width: 24%;
  272.     height: 300px;
  273.     background-color: rgb(255, 255, 255);
  274.     text-align: center;
  275.     border-style: solid;
  276. }
  277.  
  278. #meishi1 img {
  279.     /*美食1图片设置*/
  280.     border-radius: 5px;
  281.     width: 250px;
  282.     height: 160px;
  283.     margin: 8px 0px 0px 0px;
  284. }
  285.  
  286. #meishi1 img:hover {
  287.     /*划过美食1图片设置*/
  288.     transform: scale(1.2);
  289. }
  290.  
  291. #meishi1 h4 {
  292.     /*美食1标题设置*/
  293.     color: brown;
  294. }
  295.  
  296. #meishi1 a {
  297.     /*美食1超链接设置*/
  298.     text-decoration: none;
  299.     color: rgb(16, 159, 21);
  300. }
  301.  
  302. #meishi1 a:hover {
  303.     /*划过美食1超链接设置*/
  304.     color: rgb(120, 8, 109);
  305. }
  306.  
  307. #meishi1 p {
  308.     /*美食1段落设置*/
  309.     margin: 3px 5px 0px 5px;
  310.     letter-spacing: 2px;
  311.     text-indent: 2em;
  312.     line-height: 1.5em;
  313. }
  314.  
  315. #meishi2 {
  316.     /*美食2设置*/
  317.     float: left;
  318.     width: 25%;
  319.     height: 300px;
  320.     background-color: rgb(255, 255, 255);
  321.     text-align: center;
  322.     border-style: solid;
  323.     border-left: none;
  324. }
  325.  
  326. #meishi2 img {
  327.     border-radius: 5px;
  328.     width: 250px;
  329.     height: 160px;
  330.     margin: 8px 0px 0px 0px;
  331. }
  332.  
  333. #meishi2 img:hover {
  334.     transform: scale(1.2);
  335. }
  336.  
  337. #meishi2 h4 {
  338.     color: brown;
  339. }
  340.  
  341. #meishi2 a {
  342.     text-decoration: none;
  343.     color: rgb(16, 159, 21);
  344. }
  345.  
  346. #meishi2 a:hover {
  347.     color: rgb(120, 8, 109);
  348. }
  349.  
  350. #meishi2 p {
  351.     margin: 3px 5px 0px 5px;
  352.     letter-spacing: 2px;
  353.     text-indent: 2em;
  354.     line-height: 1.5em;
  355. }
  356.  
  357. #meishi3 {
  358.     /*美食3设置*/
  359.     float: left;
  360.     width: 25%;
  361.     height: 300px;
  362.     background-color: rgb(255, 255, 255);
  363.     text-align: center;
  364.     border-style: solid;
  365.     border-left: none;
  366. }
  367.  
  368. #meishi3 img {
  369.     border-radius: 5px;
  370.     width: 250px;
  371.     height: 160px;
  372.     margin: 8px 0px 0px 0px;
  373. }
  374.  
  375. #meishi3 img:hover {
  376.     transform: scale(1.2);
  377. }
  378.  
  379. #meishi3 h4 {
  380.     color: brown;
  381. }
  382.  
  383. #meishi3 a {
  384.     text-decoration: none;
  385.     color: rgb(16, 159, 21);
  386. }
  387.  
  388. #meishi3 a:hover {
  389.     color: rgb(120, 8, 109);
  390. }
  391.  
  392. #meishi3 p {
  393.     margin: 3px 5px 0px 5px;
  394.     letter-spacing: 2px;
  395.     text-indent: 2em;
  396.     line-height: 1.5em;
  397. }
  398.  
  399. #meishi4 {
  400.     /*美食4设置*/
  401.     float: left;
  402.     width: 25%;
  403.     height: 300px;
  404.     background-color: rgb(255, 255, 255);
  405.     text-align: center;
  406.     border-style: solid;
  407.     border-left: none;
  408. }
  409.  
  410. #meishi4 img {
  411.     border-radius: 5px;
  412.     width: 250px;
  413.     height: 160px;
  414.     margin: 8px 0px 0px 0px;
  415. }
  416.  
  417. #meishi4 img:hover {
  418.     transform: scale(1.2);
  419. }
  420.  
  421. #meishi4 h4 {
  422.     color: brown;
  423. }
  424.  
  425. #meishi4 a {
  426.     text-decoration: none;
  427.     color: rgb(16, 159, 21);
  428. }
  429.  
  430. #meishi4 a:hover {
  431.     color: rgb(120, 8, 109);
  432. }
  433.  
  434. #meishi4 p {
  435.     margin: 3px 5px 0px 5px;
  436.     letter-spacing: 2px;
  437.     /*字间距设置*/
  438.     text-indent: 2em;
  439.     line-height: 1.5em;
  440. }

站长简介

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>zhanzhang</title>
  9.     <link type="text/css" rel="stylesheet" href="zhanzhang.css">
  10.     <!--样式设置-->
  11.     <style>
  12.         script {
  13.             color: rgb(140, 15, 15);
  14.         }
  15.     </style>
  16.     <!--时钟显示-->
  17.     <script>
  18.         function showTime() {
  19.             var time = new Date();
  20.             var day = time.getDay();
  21.             var date = time.getDate();
  22.             var year = time.getFullYear();
  23.             var month = time.getMonth() + 1;
  24.             var hour = time.getHours();
  25.             var minute = time.getMinutes();
  26.             var second = time.getSeconds();
  27.             var day1 = day.toString();
  28.             var nianyue = year + "年" + "&nbsp" + month + "月";
  29.             var mytime = hour + ":" + minute + ":" + second;
  30.             // document.getElementById("xinqi").innerHTML = day1;
  31.             document.getElementById("ri").innerHTML = date;
  32.             document.getElementById("nianyue").innerHTML = nianyue;
  33.             document.getElementById("tt").innerHTML = mytime;
  34.             setTimeout("showTime()", 1000);
  35.         }
  36.     </script>
  37. </head>
  38.  
  39. <body>
  40.     <div class="header">
  41.         <!--头部-->
  42.         <img id="hi1" src="tupian/baoji9.jpg">
  43.     </div>
  44.  
  45.     <div class="dh">
  46.         <!--导航栏 -->
  47.         <ul>
  48.             <li><a href="我的家乡.html#">首页</a></li>
  49.             <li><a href="家乡简介.html#">家乡简介</a></li>
  50.             <li><a href="风景名胜.html#">风景名胜</a></li>
  51.             <li><a href="美食特色.html#">美食特色</a></li>
  52.             <li><a href="站长简介.html#">站长简介</a></li>
  53.             <li><a href="在线调查.html#">在线调查</a></li>
  54.         </ul>
  55.     </div>
  56.     <!--主体-->
  57.     <div id="zhuti">
  58.         <div id="left">
  59.             <!--主体左边-->
  60.             <table border="1">
  61.                 <tr>
  62.                     <th>
  63.                         <div id="geqian"><!--个签-->
  64.                             <h2>
  65.                                 <pre> 年轻是我们唯一有权利
  66.  去编织梦想的时光
  67.  
  68.                ---李嘉诚</pre>
  69.                             </h2>
  70.                         </div>
  71.                         <div id="shijian"><!--时间-->
  72.                             <div id="ri"> 24</div>
  73.                             <div id="nianyue">二0二二年五月</div>
  74.                             <div id="tt">20:57</div>
  75.                             <script>
  76.                                 showTime();
  77.                             </script>
  78.                         </div>
  79.                     </th>
  80.                 </tr>
  81.                 <tr>
  82.                     <th>
  83.                         <div id="xinxi"><!--信息-->
  84.                             <br>
  85.                             <br>
  86.                             <br>
  87.  
  88.                             <p>学院：</p>
  89.                             <p>专业：</p>
  90.                             <p>班级：</p>
  91.                             <P>学号：</P>
  92.                             <p>联系方式：<br>邮箱：</p>
  93.                         </div>
  94.                     </th>
  95.                 </tr>
  96.             </table>
  97.         </div>
  98.         <div id="right"><!--右边-->
  99.             <div id="zhan1"><!--标题-->
  100.                 <h1>站长简介</h1>
  101.             </div>
  102.             <div id="zhan2"><!--内容-->
  103.                 <ul>
  104.                     <li>姓名：     </li>
  105.                     <li>性别：</li>
  106.                     <li>家乡：宝鸡</li>
  107.                     <li>爱好：乒乓球、追剧、看书、散步、看电影
  108.                         <ul id="tuijian">
  109.                             <li>推荐的书：
  110.                                 <ul id="shu">
  111.                                     <li>《堂吉诃德》</li>
  112.                                     <li>《百年孤独》</li>
  113.                                     <li>《平凡的世界》</li>
  114.                                 </ul>
  115.                             </li>
  116.                             <li id="zong">推荐的综艺：
  117.                                 <ul id="zongyi">
  118.                                     <li>令人心动的offer</li>
  119.                                     <li>王牌对王牌</li>
  120.                                     <li>极限挑战</li>
  121.                                 </ul>
  122.                             </li>
  123.                         </ul>
  124.                     </li>
  125.                     <li id="qita">其他：......</li>
  126.                 </ul>
  127.             </div>
  128.         </div>
  129.  
  130.     </div>
  131.  
  132.  
  133.  
  134.  
  135.  
  136.     <div id="" class="footer">
  137.         <!--页尾-->
  138.         <img id="fi1" src="tupian/baoji1.jpg">
  139.         <p>
  140.             古城宝鸡 璀璨文明
  141.         </p>
  142.         <p>
  143.             welcome to baoji|宝鸡欢迎您！
  144.         </p>
  145.     </div>
  146. </body>
  147.  
  148. </html>
  1. * {
  2.     /*全局选择器*/
  3.     margin: 0px;
  4.     padding: 0px;
  5. }
  6.  
  7. body {
  8.     /*主体*/
  9.     color: rgb(0, 0, 0);
  10.     font-family: 楷体;
  11.     background-color: rgb(218, 202, 202);
  12. }
  13.  
  14. .header {
  15.     /*头部*/
  16.     width: 100%;
  17.     height: 150px;
  18. }
  19.  
  20. #hi1 {
  21.     /*头部图片*/
  22.     width: 100%;
  23.     height: 150px;
  24. }
  25.  
  26. .dh ul {
  27.     /*导航栏*/
  28.     margin-bottom: 30px;
  29.     padding: 0px;
  30.     width: 1539px;
  31.     height: 30px;
  32. }
  33.  
  34. .dh ul li {
  35.     /*导航栏链接*/
  36.     height: 30px;
  37.     width: 16.45%;
  38.     list-style: none;
  39.     float: left;
  40.     display: inline;
  41.     font: 0.9em;
  42. }
  43.  
  44. .dh ul li a {
  45.     /*导航栏超链接*/
  46.     text-align: center;
  47.     color: white;
  48.     width: 100%;
  49.     font-size: larger;
  50.     text-decoration: none;
  51.     display: block;
  52.     background-color: rgb(87, 156, 241);
  53.     line-height: 40px;
  54.     border-bottom: 1px solid rgb(168, 164, 172);
  55. }
  56.  
  57. .dh ul li a:hover {
  58.     /*鼠标划过时*/
  59.     color: rgb(0, 0, 0);
  60.     background-color: rgb(37, 84, 155);
  61.     border-bottom: 3px solid rgb(16, 4, 28);
  62. }
  63.  
  64. .footer {
  65.     /*尾部*/
  66.     margin-top: 10px;
  67.     clear: both;
  68.     width: 100%;
  69.     height: 70px;
  70.     background-color: rgb(87, 156, 241);
  71.     color: rgb(28, 41, 99);
  72.     font: italic 14px/20px 宋体;
  73.     text-align: center;
  74. }
  75.  
  76. .footer p {
  77.     /*尾部段落*/
  78.     margin-top: 10px;
  79. }
  80.  
  81. #fi1 {
  82.     /*尾部图片*/
  83.     width: 100px;
  84.     height: 70px;
  85.     float: right;
  86.     padding: 0px;
  87. }
  88.  
  89. #zhuti {
  90.     /*主体*/
  91.     margin: 10px 300px 0px 300px;
  92.     background-color: blueviolet;
  93.  
  94. }
  95.  
  96. #left {
  97.     /*左边div设置*/
  98.     width: 28.5%;
  99.     padding: 5px;
  100.     height: 600px;
  101.     float: left;
  102.     background-color: rgb(218, 202, 202);
  103.  
  104. }
  105.  
  106. #geqian h2 {
  107.     /*个签*/
  108.     margin: 30px 0px 0px 0px;
  109.     padding: 10px;
  110.     height: 100px;
  111. }
  112.  
  113. #right {
  114.     /*右边*/
  115.     width: 60%;
  116.     height: 565px;
  117.     background-color: rgb(218, 202, 202);
  118.     float: left;
  119.     border: 0px double rgb(64, 151, 120);
  120.     margin: 20px 0px 50px 50px;
  121.     /*外边距*/
  122.     box-shadow: 20px 20px 25px 10px #242443;
  123.     /*阴影*/
  124.     border-radius: 100px;
  125.     /*弧度设置*/
  126. }
  127.  
  128. #shijian {
  129.     /*时间*/
  130.     text-align: center;/*文本居中*/
  131.     margin: 90px 0px 0px 0px;
  132.     height: 150px;
  133. }
  134.  
  135. #ri {
  136.     /*日*/
  137.     font-size: 45px;
  138.     margin: 0px 0px 5px 0px;
  139. }
  140.  
  141. #nianyue {
  142.     /*年月*/
  143.     font-size: 20px;
  144. }
  145.  
  146. #tt {
  147.     /*几点*/
  148.     margin-top: 5px;
  149. }
  150.  
  151. table {
  152.     /*表格*/
  153.     border-color: rgb(64, 151, 120);
  154. }
  155.  
  156. #xinxi {
  157.     /*信息*/
  158.     height: 200px;
  159. }
  160.  
  161. #zhan1 {
  162.     /*右边标题*/
  163.     margin: 30px 0px 30px 0px;
  164.     text-align: center;
  165. }
  166.  
  167. #zhan2 {
  168.     /*右边内容设置*/
  169.     font-size: large;
  170.     width: 60%;
  171.     margin: 40px 10px 0px 70px;
  172. }
  173.  
  174. #zhan2 ul li {
  175.     /*右边列表设置*/
  176.     height: 30px;
  177.     font: 0.9em;
  178. }
  179.  
  180. #tuijian {
  181.     /*推荐设置*/
  182.     margin: 10px 0px 0px 30px;
  183. }
  184.  
  185. #shu {
  186.     /*书设置*/
  187.     margin-left: 30px;
  188. }
  189.  
  190. #zong {
  191.     /*综艺设置*/
  192.     margin-top: 80px;
  193. }
  194.  
  195. #zongyi {
  196.     /*综艺设置*/
  197.     margin: 10px 0px 0px 30px;
  198. }
  199.  
  200. #qita {
  201.     /*其他*/
  202.     margin-top: 250px;
  203. }

在线调查

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>diaocha</title>
  9.     <link type="text/css" rel="stylesheet" href="diaocha.css">
  10. </head>
  11.  
  12. <body>
  13.     <div class="header">
  14.         <!--头部-->
  15.         <img id="hi1" src="tupian/baoji9.jpg">
  16.     </div>
  17.  
  18.     <div class="dh">
  19.         <!--导航栏 -->
  20.         <ul>
  21.             <li><a href="我的家乡.html#">首页</a></li>
  22.             <li><a href="家乡简介.html#">家乡简介</a></li>
  23.             <li><a href="风景名胜.html#">风景名胜</a></li>
  24.             <li><a href="美食特色.html#">美食特色</a></li>
  25.             <li><a href="站长简介.html#">站长简介</a></li>
  26.             <li><a href="在线调查.html#">在线调查</a></li>
  27.         </ul>
  28.     </div>
  29.  
  30.     <div id="main">
  31.         <form>
  32.             <fieldset>
  33.                 <!--定义域标题-->
  34.                 <legend align="center">在线调查</legend>
  35.                 1.您的家乡：<input name="jiaxiang" type="text"><br><br>
  36.                 2.你了解你的家乡吗？<br><input name="lj" type="radio" value="liaojie" checked="checked" />了解<br>
  37.                 <input name="lj" type="radio" value="henliaojie" />很了解<br>
  38.                 <input name="lj" type="radio" value="buliaojie" />不了解<br>
  39.                 <input name="fenqi" type="radio" value="bijiaohao" />比较好<br>
  40.                 <input name="fenqi" type="radio" value="bijiaocha" />比较差<br>
  41.                 <input name="fenqi" type="radio" value="buqingchu" />不太清楚<br><br>
  42.                 3.您心目中的家乡是什么样子的？（可多选）<br><input name="yangzi" type="checkbox" value="1"
  43.                     checked="checked" />经济水平明显提高，人们的钱袋子鼓起来<br>
  44.                 <input name="yangzi" type="checkbox" value="2" />出行变得更加方便，道路通畅，交通便利<br>
  45.                 <input name="yangzi" type="checkbox" value="2" /> 生活水平改善，文化娱乐生活丰富<br>
  46.                 <input name="yangzi" type="checkbox" value="2" /> 美食丰富，传统小吃和特色美食回归，人们也讲究科学饮食<br>
  47.                 <input name="yangzi" type="checkbox" value="2" />社会福利丰富，社会保障完善，风气优良<br>
  48.                 <input name="yangzi" type="checkbox" value="2" />回归传统，保留一份传统的田园生活气息<br>
  49.                 <input name="yangzi" type="checkbox" value="2" /> 其他补充<br><br>
  50.                 4.您认为您的家乡有什么传统：<br><textarea name="chuantong" rows="3" cols="50" wrap="virtual"></textarea><br><br>
  51.                 5.您认为您的家乡有什么美食特色：<br><textarea name="meishi" rows="3" cols="50" wrap="virtual"></textarea><br><br>
  52.                 6.您认为您的家乡有什么名胜风景：<br><textarea name="fengjin" rows="3" cols="50" wrap="virtual"></textarea><br><br>
  53.                 7.您觉得您的家乡的社会风气如何？<br><input name="fenqi" type="radio" value="henhao" checked="checked" />很好<br><br>
  54.                 8.请填写您的宝贵意见:<br><textarea name="yijian" rows="5" cols="50" wrap="virtual"></textarea>
  55.                 <br>
  56.             </fieldset>
  57.             <div id="tijiao">
  58.                 <!--提交重置-->
  59.                 <input type="submit" name="submit" value="提交">
  60.                 <input type="reset" name="reset" value="重置">
  61.             </div>
  62.         </form>
  63.     </div>
  64.  
  65.     <div id="" class="footer">
  66.         <!--页尾-->
  67.         <img id="fi1" src="tupian/baoji1.jpg">
  68.         <p>
  69.             古城宝鸡 璀璨文明
  70.         </p>
  71.         <p>
  72.             welcome to baoji|宝鸡欢迎您！
  73.         </p>
  74.     </div>
  75. </body>
  76.  
  77. </html>
  1. * {
  2.     /*全局选择器*/
  3.     margin: 0px;
  4.     padding: 0px;
  5. }
  6.  
  7. body {
  8.     /*主体*/
  9.     color: rgb(0, 0, 0);
  10.     font-family: 楷体;
  11.     background-color: rgb(218, 202, 202);
  12. }
  13.  
  14. .header {
  15.     /*头部*/
  16.     width: 100%;
  17.     height: 150px;
  18. }
  19.  
  20. #hi1 {
  21.     /*头部图片*/
  22.     width: 100%;
  23.     height: 150px;
  24. }
  25.  
  26. .dh ul {
  27.     /*导航栏*/
  28.     margin-bottom: 30px;
  29.     padding: 0px;
  30.     width: 1539px;
  31.     height: 30px;
  32. }
  33.  
  34. .dh ul li {
  35.     /*导航栏列表*/
  36.     height: 30px;
  37.     width: 16.45%;
  38.     list-style: none;
  39.     /*列表样式无*/
  40.     float: left;
  41.     /*左浮动*/
  42.     display: inline;
  43.     /*行内显示*/
  44.     font: 0.9em;
  45. }
  46.  
  47. .dh ul li a {
  48.     /*导航栏超链接*/
  49.     text-align: center;
  50.     /*文本居中*/
  51.     color: white;
  52.     width: 100%;
  53.     font-size: larger;
  54.     text-decoration: none;
  55.     display: block;
  56.     background-color: rgb(87, 156, 241);
  57.     line-height: 40px;
  58.     border-bottom: 1px solid rgb(168, 164, 172);
  59. }
  60.  
  61. .dh ul li a:hover {
  62.     /*鼠标划过时*/
  63.     color: rgb(0, 0, 0);
  64.     background-color: rgb(37, 84, 155);
  65.     border-bottom: 3px solid rgb(16, 4, 28);
  66. }
  67.  
  68. .footer {
  69.     /*尾部*/
  70.     margin-top: 10px;
  71.     clear: both;
  72.     /*清除浮动*/
  73.     width: 100%;
  74.     height: 70px;
  75.     background-color: rgb(87, 156, 241);
  76.     color: rgb(28, 41, 99);
  77.     font: italic 14px/20px 宋体;
  78.     /*字体设置*/
  79.     text-align: center;
  80. }
  81.  
  82. .footer p {
  83.     /*尾部段落*/
  84.     margin-top: 10px;
  85. }
  86.  
  87. #fi1 {
  88.     /*尾部图片*/
  89.     width: 100px;
  90.     height: 70px;
  91.     float: right;
  92.     padding: 0px;
  93. }
  94.  
  95. #main {
  96.     /*主体内容设置*/
  97.     font-size: large;
  98.     color: rgb(6, 2, 69);
  99.     margin: 30px 300px 30px 300px;
  100. }
  101.  
  102. #tijiao {
  103.     /*提交按钮*/
  104.     margin-top: 20px;
  105.     text-align: center;
  106. }
  107.  
  108. #tijiao input {
  109.     width: 100px;
  110.     height: 35px;
  111.     background-color: rgb(99, 150, 134);
  112. }
  113.  
  114. fieldset {
  115.     /*定义域设置*/
  116.     padding: 20px;
  117. }

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发