这是一个简单的家乡旅游网页制作, 非常适合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 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: #; } .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: #; } .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: #; margin-bottom: 10px; } .jieshao h1 {
font-size: 14px; padding: 0 10px; font-weight: bold; line-height: 28px; line-height: 28px; background: #; 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: #; margin-bottom: 10px; } .jieshaoB h1 {
font-size: 14px; padding: 0 10px; font-weight: bold; line-height: 28px; line-height: 28px; background: #; 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: #; } .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 #; vertical-align: middle; line-height: 22px; padding: 0; } .messageB ul li .message_te {
width: 500px; height: 90px; border: 1px solid #; 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; } 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/218090.html原文链接：https://javaforall.net
