一、📚作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
二、🔗作品效果
▶️视频演示
https://live.csdn.net/v/embed/239921
(title-E58JP-平遥古城- 旅游景点介绍 高质量（6页）html+css+js(1))]
🧩 截图演示
06.png
05.png
04.png
03.png
02.png
01.png
三、💒 作品代码
🧱HTML代码
<!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 href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/changimages.js"></script>
</head>
<body>
<div class="main">
<div class="top"><img src="images/top.jpg"/></div>
<div class="menu">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about_kf.html">关于平遥</a></li>
<li><a href="tourism.html">旅游景点</a></li>
<li><a href="culture_kf.html">平遥文化</a></li>
<li><a href="food_kf.html">平遥美食</a></li>
</ul>
</div>
<div class="con">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><div class=pic_show>
<div id=imgADPlayer></div>
<script>
PImgPlayer.addItem( "", "#", "images/pic1.jpg");
PImgPlayer.addItem( "", "#", "images/jd2.jpg");
PImgPlayer.addItem( "", "#", "images/jd3.jpg");
PImgPlayer.init( "imgADPlayer", 650, 400 );
</script>
</div></td>
<td><p>平遥古城位于山西省中部，始建于周宣王时期，明洪武三年（1370年）扩建，距今已有2700多年的历史。还较为完好地保留着明清时期县城的基本风貌，是中国汉民族地区现存最为完整的古城。山西平遥被称为“保存最为完好的四大古城”之一，也是中国仅有的以整座古城申报世界文化遗产获得成功的两座古城市之一。 平遥古城1997年被列入世界文化遗产名录。2009年，平遥古城被世界纪录协会评为中国现存最完整的古代县城。2015年7月13日，平遥古城成为国家5A级旅游景点。 2017年11月19日，获得年度旅游目的地声誉奖。 第一批全国中小学生研学实践教育基地。</p></td>
</tr>
</table>
<h3 class="title">旅游景点</h3>
<div class="jd_list">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><p><a href="jd1.html"><img src="images/jd1.jpg"/></a></p>
<h3>平遥县衙</h3>
<div class="detail">平遥县衙坐落于平遥古城中心，始建于北魏，定型于元明清，保存下来最早的建筑建于元至正六年（1346年），距今已有六百多年的历史，整座衙署坐北朝南，呈轴对称布局，南北轴线长二百余米..</div></td>
<td valign="top"><p><a href="#"><img src="images/jd2.jpg"/></a></p>
<h3>日升昌票号</h3>
<div class="detail">日升昌票号成立于清道光三年（1823年），由山西省平遥县西达蒲村富商李大金出资与总经理雷履泰共同创办。总号设于山西省平遥县城内繁华街市的西大街路南，占地面积1600多平方米...</div></td>
<td valign="top"><p><a href="#"><img src="images/jd3.jpg"/></a></p>
<h3>孔庙</h3>
<div class="detail">文庙即孔庙，是祭祀孔子的地方。平遥文庙位于平遥县城内东南隅，始建于唐贞观初年，其大成殿为金大定三年（1163年）重建，至今保持原貌，是我国现存各级文庙中历史最久的殿宇。 </div></td>
</tr>
<tr>
<td valign="top"><p><a href="#"><img src="images/jd4.jpg"/></a></p>
<h3>清虚观</h3>
<div class="detail">清虚观是古城内最大的道观。按照道东佛西的传统布局安排，坐落于东大街东段路北。清虚观始建于唐显庆二年（657年），原名太平观，宋治平元年（1064年）改为清虚观。...</div></td>
<td valign="top"><p><a href="#"><img src="images/jd5.jpg"/></a></p>
<h3>平遥城墙</h3>
<div class="detail">平遥城墙，始建于西周宣王时期（公元前827年～公元前782年）为夯土城垣。明洪武三年（1370年）重筑，由原“九里十八步”扩为“十二里八分四厘”（6.4公里），变夯土城垣为砖石城墙。</div></td>
<td valign="top"><p><a href="#"><img src="images/jd6.jpg"/></a></p>
<h3>瓮城</h3>
<div class="detail">瓮城，指建在城门外的小城，又叫月城，用以增强城池的防御能力。平遥古城的瓮城城门与大城门的朝向多数呈90°夹角（南门和下东门除外），即便敌军攻破了瓮城城门，还有主城门防御...</div></td>
</tr>
</table>
</div>
</div>
<div class="bottom">平遥古城版权所有</div>
</div>
<embed src="images/m.mp3" hidden="true" autostart="true" loop="true">
</body>
</html>
🏠CSS代码
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
body {
font-family:"微软雅黑";
font-size:14px;
color:#444;
line-height:24px;
background:#444;
}
ul,li{ list-style:none;}
.main {
width:1100px;
margin:0 auto;
background:#fff;
}
.menu{ background:#1c8bcf; height:40px;}
.menu ul{ margin-left:30px;}
.menu ul li{ float:left; text-align:center; margin-right:20px;}
.menu ul li a{ color:#fff; text-decoration:none; display:block; line-height:40px; padding:0px 40px; font-size:16px;}
.menu ul li a:hover{ color:#000; background:#FF0;}
.con {
padding:30px;
min-height:500px;
}
.con img {
margin-right:20px;
}
.title{ font-size:24px; margin-top:30px; margin-bottom:30px;}
.jd_list{ text-align:center;}
.jd_list td{ padding-bottom:30px;}
.jd_list td img{ width:300px; height:200px;}
.jd_list h3{ padding:10px 0;}
.jd_list .detail{ width:260px; margin:0 auto; text-align:left;}
.bottom{ background:#1c8bcf; text-align:center; padding:20px 0; color:#fff;}
.bottom span{ padding-right:20px;}
.title2{font-size:24px; margin-top:30px; margin-bottom:30px; text-align:center; border-bottom:1px solid #ccc; margin-bottom:20px; padding-bottom:30px;}
.title3{ margin:20px 0px;}
.wh p{ text-indent:2em; margin-bottom:10px;
四、🎁更多源码
【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）
📕【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）
