583. 大学生HTML期末大作业 ―【我的家乡南京旅游主题网页】 Web前端网页制作 html+css

原创已于 2024-11-04 13:27:16 修改 · 843 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #课程设计 #1024程序员节 #javascript #css #html5

于 2024-11-04 11:58:46 首次发布

Web网页设计实例同时被 3 个专栏收录

826 篇文章

订阅专栏

旅游

99 篇文章

订阅专栏

家乡

48 篇文章

订阅专栏

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css：导航菜单、三级页面、音频、留言表单等，代码精简，适用于大学生网页课程作业设计等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含15个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.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" />

<body>

<table width="100%" height="42" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="42" style="background:#291707; padding:0px;">
   <table width="1024" border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0px auto;">
<tr>
<td width="13%" height="42"><div align="center" class="STYLE6"><a href="index.html" class="STYLE2 aa">首页</a></div></td>
<td width="13%" height="42"><div align="center" class="STYLE6"><a href="dili.html">地理环境</a></div></td>
<td width="13%" height="42"><div align="center" class="STYLE6"><a href="lishi.html">历史沿革</a></div></td>
<td width="12%" height="42"><div align="center" class="STYLE6"><a href="quhua.html">行政区划</a></div></td>
<td width="13%" height="42"><div align="center" class="STYLE6"><a href="lvyou.html">旅游景点</a></div></td>
<td width="13%" height="42"><div align="center" class="STYLE6"><a href="xinwen.html">新闻中心</a></div></td>
<td width="13%" height="42"><div align="center" class="STYLE6"><a href="xiangce.html">南京相册</a></div></td>
</tr>
</table>
</td>

</tr>
</table>
<table width="1024" height="250" border="0" cellpadding="0" cellspacing="0" bgcolor="#fff">
<tr>
<td colspan="3" height="250"><div style="text-align:center">

<script type="text/javascript">
//imgLink3="";
var focus_width=1024
var focus_height=250
var text_height=0
var swf_height = focus_height+text_height
var pics="images/ad2.jpg|images/ad3.jpg|images/ad4.jpg"
var links="index.html|index.html"
var texts=""
var flashCode = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/hotdeploy/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">';
flashCode = flashCode + '<param name="allowScriptAccess" value="sameDomain"/><param name="movie" value="images/focus.swf"/><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0"/>';
flashCode = flashCode + '<param name="menu" value="false"/><param name="wmode" value="transparent"/>';
flashCode = flashCode + '<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'"/>';
flashCode = flashCode + '<embed src="images/focus.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="'+ focus_width +'" height="'+ swf_height +'" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" wmode="transparent"/></embed>';
flashCode = flashCode + '</object>';
document.write(flashCode)
</script>

</div></td>
</tr>
<tr>
<td width="305" height="122"><img src="images/nanjing.jpg" width="245" height="185" class="img1"/></td>
<td width="747" colspan="2" style="line-height:22px;"><div style="padding:10px;">
<p>南京，简称宁，是江苏省会、副省级市，长三角及华东地区第二大城市，中国科教第三城，中国国家区域中心城市（华东），国家重要的政治、军事、科教、文化、航运、经济和金融中心，国家综合交通枢纽、通信枢纽和科技创新中心，南京都市圈核心城市，长三角辐射带动中西部地区发展的重要门户城市。</p>
<p>南京历史悠久，是首批国家历史文化名城和全国重点风景旅游城市，有着6000多年文明史、近2600年建城史和近500年的建都史，是中国四大古都之一，有“六朝古都”、“十朝都会”之称，是中华文明的重要发祥地。</p>
</div></td>
</tr>
<tr>
   <td colspan="2">
   <table width="1024" border="1" style="overflow:hidden;">
<tr>
<td><img src="images/p1.jpg" class="img1"/></td>
<td><img src="images/p2.jpg" class="img1"/></td>
<td><img src="images/p3.jpg" class="img1"/></td>
<td><img src="images/p4.jpg" class="img1"/></td>
</tr>
</table>

</td>
</tr>
<tr>
<td height="50" colspan="3" bgcolor="#281705" style="color:#a27a4f;"><div align="center"></div></td>
</tr>
</table>
</center>
<embed autostart="true" loop="-1" controls="ControlPanel" width="0" height="0" src="music/music.mp3">
</body>
</html>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */
*{padding:0; margin:0; border:0;}
body{ background:url(../images/bg.jpg) repeat-x #f3f3f3;}
body,td,th {
   font-size: 12px;
   color: #000000;
}
a:link {
   color: #000000;
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: #000000;
}
a:hover {
   text-decoration: none;
   color: #000000;
}
a:active {
   text-decoration: none;
   color: #000000;
}
.STYLE2 {color: #FFFFFF}
body {
   background-color: #ece4d1;
}
.STYLE3 {
   font-size: 14;
   font-weight: bold;
}
.STYLE6 {color: #FFFFFF; font-size: 14; font-weight: bold; }
.STYLE6 a{color:#FFFFFF; font-size:14px; display:block; height:30px; line-height:30px; padding:0px 20xp;}
.STYLE6 a.aa{ background:#fff; color:#000;}
p{ color:#281705;}
.img1{ margin:10px 30px;}
.neirong{padding:10px 30px;}
.neirong p{ line-height:34px;}
.neirong h1{ height:40px; line-height:40px; text-align:center; background:#feba65; font-size:16px; font-weight:bold;}
.quhua tr td{height:30px; line-height:30px;}

.xinwen h1{ height:40px; line-height:40px; text-align:center; background:#feba65; font-size:16px; font-weight:bold;}
.xinwen p{ line-height:34px;}
.xinwen table tr td{height:34px; line-height:34px; background:#CCCCCC; text-indent:10px;}

.mshd{ width:800px; margin:0 auto;}
.mshd tr td{ text-align:center; line-height:30px; font-size:14px; padding-top:20px;}
.mshd tr td img{ display:block; border:1px solid #ccc; padding:2px; width:300px; height:200px; text-align:center; }

.neixiangce{ width:800px; margin:0 auto;}
.neixiangce tr td{ text-align:center; line-height:30px; font-size:14px; padding-top:20px;}
.neixiangce tr td img{ display:block; border:1px solid #ccc; padding:2px; width:200px; height:150px; text-align:center; }

.datu{ width:800px; margin:0 auto;}
.datu tr td{ text-align:left; line-height:30px; font-size:14px; padding-top:20px;}
.fanhui a{width:80px; height:22px; display:block; line-height:22px; background:#feba65; border:1px solid #000000; text-align:center;}
.huifu{width:80px; height:22px; display:block; line-height:22px; background:#f9dcb8; border:1px solid #feba65; text-align:center; margin-top:10px;}

...