这是一个简单的家乡旅游网页制作, 非常适合html期末大作业
网页效果
#文件目录
代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>幽幽西湖情</title><link rel="stylesheet" type="text/css" href="css/index.css"></head><body><div class="page"><div class="banner"><div align="center"><img src="images/banner.jpg" /></div></div><div class="daohang"><p><a href="index.html">首页</a></p><p><a href="xihu.html">杭州西湖</a></p><p><a href="xiaochi.html">杭州小吃</a></p><p><a href="fengjing.html">杭州风景</a></p><p><a href="liuyan.html">客户留言</a></p><p><a href="lianxi.html">地理位置</a></p><p><a href="zhanzhang.html">站长信息</a></p></div><div class="content"><div class="zuo"><img src="images/zuo1.jpg" /><div class="fangshi"><h1>新闻公告</h1><p> 11月19日，杭州西湖风景名胜区管委会（市园林文物局）召开领导干部会议，传达学习贯彻党的十八大精神。西湖风景名胜区（市园文局）党委书记、管委会主任（局长）刘颖传达了十八大精神，并就名胜区（园文局）深入学习贯彻十八大精神作了部署，管委会副主任王宏伟、吕雄伟等党委班子成员、机关全体人员、各基层区（局）管干部参加会议。会议由党委副书记、副主任张鸿斌主持。<br /></p></div></div><div class="you"><div class="jieshao"><h1>杭州介绍</h1><p><img src="images/jieshao.jpg" width="218" height="147" style="float:left; margin-right:19px;" />杭州市（本地吴语读音（IPA）：愂 tsei）简称杭，中国浙江省省会，副省级城市，浙江省政治、经济、文化、科教中心，长三角地区副中心城市和南翼中心城市，浙江省的金融中心和行政中心，全国重点风景旅游城市和历史文化名城，大陆国际形象最佳城市之一，中国七大古都之一。古时杭州曾称“临安”、“钱塘”、“武林”等。杭州位于浙江省北部，处杭嘉湖平原南缘，拥有约2300年的建城史，是一个典型的山水文化名城。西子湖、钱塘江、千岛湖以及周边丘陵构成了杭州的山水美景。</p><p>自古以来，杭州的经济和文化比较发达，素有“东南第一州”之称。“欲把西湖比西子，淡妆浓抹总相宜”赞美西子湖之美。活跃的多元化经济和发达的文化教育使杭州成为浙江省政治、经济和文化的中心。 </p></div><div class="jieshaoB"><h1>产品展示</h1><p><marquee><img src="images/chanpin1.jpg" /><img src="images/chanpin2.jpg" /><img src="images/chanpin3.jpg" /><img src="images/chanpin4.jpg" /><img src="images/chanpin5.jpg" /><img src="images/chanpin6.jpg" /><img src="images/chanpin7.jpg"/><img src="images/chanpin8.jpg" /></marquee></p></div></div><div class="clearit"></div></div><div class="foot"><div align="center"></div></div></div></body></html>
@charset "utf-8";/* CSS Document */body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div {margin: 0;padding: 0;border: 0;}* {margin: 0;padding: 0;border: 0;}body {font-family: "宋体";font-size: 12px;color: #000000;line-height: 20px;text-align: left}td,th {font-family: "宋体";font-size: 12px;color: #000000;}a {color: #000000;}A:link {TEXT-DECORATION: none;}A:visited {TEXT-DECORATION: none;}A:hover {TEXT-DECORATION: underline;}ul,li {list-style-type: none;}.clearit {clear: both;}.page {width: 1003px;margin: 0 auto;}.daohang {width: 1003px;height: 42px;margin: 0 auto;overflow: hidden;background: url("../images/daohang.jpg") repeat-x;}.daohang p {width: 140px;line-height: 42px;display: block;float: left;text-align: center;font-size: 14px;font-weight: bold;}.daohang p a {color: #345479;}.content {width: 1003px;margin: 0 auto;background: #c2cdda;padding: 20px 0 0;}.zuo {width: 220px;float: left;margin-left: 10px;display: inline;}.fangshi {width: 220px;border: 1px solid #ffffff;margin-top: 10px;background: #345479;}.fangshi h1 {font-size: 14px;padding: 0 10px;font-weight: bold;line-height: 26px;line-height: 26px;border-bottom: 1px solid #ffffff;color: #ffffff;}.fangshi p {text-align: left;padding: 0 10px;line-height: 24px;color: #ffffff;}.you {width: 750px;float: left;margin-left: 10px;display: inline;}.jieshao {width: 748px;border: 1px solid #ffffff;background: #345479;margin-bottom: 10px;}.jieshao h1 {font-size: 14px;padding: 0 10px;font-weight: bold;line-height: 28px;line-height: 28px;background: #345479;border-bottom: 1px solid #ffffff;color: #ffffff;}.jieshao p {text-align: left;padding: 10px;line-height: 24px;color: #ffffff;}.jieshaoB {width: 748px;border: 1px solid #ffffff;background: #345479;margin-bottom: 10px;}.jieshaoB h1 {font-size: 14px;padding: 0 10px;font-weight: bold;line-height: 28px;line-height: 28px;background: #345479;border-bottom: 1px solid #ffffff;color: #ffffff;}.jieshaoB p {padding: 10px 0;}.jieshaoB img {width: 200px;margin-right: 10px;padding: 1px;border: 1px solid #FFFF00;background: #FFFFFF;}.foot {width: 1003px;margin: 0 auto;padding-top: 50px;background: url("../images/foot.jpg") repeat-x top;padding-bottom: 50px;}.foot p {text-align: center;line-height: 30px;color: #345479;}.you h2 {font-size: 14px;font-weight: bold;text-align: center;line-height: 30px;border-bottom: 1px solid #FFFF00;color: #000000;}.neirong {padding: 20px;line-height: 24px;color: #000000;}.zhanshi {padding-bottom: 20px;overflow: hidden;}.zhanshi img {width: 160px;display: block;float: left;margin-left: 10px;display: inline;}.messageB {width: 600px;padding: 10px 0;overflow: hidden;text-align: left;line-height: 24px;}.messageB ul li {line-height: 24px;margin-top: 16px;list-style: none;padding: 0;border: 0;}.messageB ul li span {vertical-align: middle;padding-right: 12px;}.messageB ul li .message_in {width: 300px;height: 22px;border: 1px solid #999999;vertical-align: middle;line-height: 22px;padding: 0;}.messageB ul li .message_te {width: 500px;height: 90px;border: 1px solid #999999;vertical-align: middle;line-height: 18px;padding: 0;}.messageB ul li .message_btn {width: 64px;height: 20px;padding: 0;line-height: 20px;background: url("../images/btn.gif") no-repeat;color: #FFFFFF;font-weight: bold;cursor: hand;}
