基本⽹页编程界⾯
⼀、实验⽬的
1、掌握HTML标记语⾔、CSS样式的综合使⽤。
2、理解JavaScript的基本⽤法。
3、熟悉Web编程的调试模式。
3、能够使⽤HTML+CSS+JavaScript编写静态页⾯。
⼆、实验任务
设计编写⼀个如下的静态页⾯。功能要求：点击不同的标签，中间的内容处会出现不同内容。美观要求：布局恰当、段落间隔合理，字体、⼤⼩、背景图⽚、显⽰内容均不限，⽹页表现美观即可。
三、实验要求
1、使⽤Visual Studio作为编程⼯具。
2、js代码可以使⽤JavaScript和jQuery，推荐使⽤jQuery。
3、实验上机前，根据实验指导书，提前预习。
3、实验上机结束后，撰写实验报告，在word中记录实验的步骤，包括实现思路、程序设计及实现结果
四、实验内容
1.新建不同的html、css、js⽂件⽤于存放搭建的基本界⾯和界⾯的样式
2.搭建基本界⾯并引⽤外部样式
<!DOCTYPE html>
<html lang="zh-cn">
<meta charset="utf-8">
<head>
<title>webgis</title>
<script src="fun.js" type="text/javascript"></script>
<head>
<title>webgis</title>
<link rel="stylesheet" href="style.css"/></head>
<body>
</body>
</html>
3.设计界⾯
（1）根据图⽚分析界⾯内容
（2）利⽤div设置不同的块，存放不同的内容
4.通过代码添加内容
（1）头部代码（包括标题以及导航部分）
1. 通过P标签添加不同的导航⽂字，同时添加onclick点击事件，为后⾯点击切换js功能做准备。
具体代码如下所⽰：
国内优秀网页界面赏析
<div align="center">
<div id="top"><h1 >清风家园</h1></div>
<p id="s1" > <a οnclick="showP1()">古典散⽂</a></p>
<p id="s2" > <a οnclick="showP2()">现代诗歌</a></p>
<p id="s3" > <a οnclick="showP3()">唐诗精品</a></p>
<p id="s4" > <a οnclick="showP4()">外国佳作</a></p>
<p id="s5" > <a οnclick="showP5()">补充信息</a></p>
</div>
（2）中间部分代码（包括图⽚以及⽂字）
1. 通过相对路径引⽤图⽚，⽅便在不同的设备上使⽤。同时通过%设置图⽚的⼤⼩，使其可以跟随浏览界⾯的⼤⼩变换⼤⼩。
2. 设置不同的⽂字块，并为其添加id，⽅便后⾯的点击调⽤。
具体代码如下所⽰：
<div>
<div><img src="image\2.jpg" width="28%" height="54%" align="left"></div>
<div><img src="image\2.jpg" width="28%" height="54%" align="right"></div>
<div>
<div><p id="x1">      ⼜叫“四六⽂”，这种⽂体，四字、六字句相间，起源于汉魏，形成于南北朝，盛⾏于隋唐。句式迁就，⽂中堆砌辞藻，常影响内容表达。唐朝韩愈、柳宗元提倡古⽂运动后，骈⽂逐渐衰落。其中也不泛名篇佳作。著名的有南朝吴均写的《与朱元思书》，唐王勃写的《滕王阁序》、刘禹锡写的《陋室铭》。</p> </div>
<div><p id="x2">      现代诗也叫“⽩话诗”，最早可追源到清末，是诗歌的⼀种，与古典诗歌相⽐⽽⾔，虽都为感于物⽽作，但⼀般不拘格式和韵律。 <br>      现代诗形式⾃由，意涵丰富，意象经营重于修辞运⽤，完全突破了古诗“温柔敦厚，哀⽽不怨”的特点，更加强调⾃由开放和直率陈述与进⾏“可感与不可感之间”的沟通。</p></div>
<div><p id="x3">      唐诗是中华民族最值得宝爱最应当世代传承的⼀宗珍贵的精神财富。在那数逾五万的诗歌海洋中，可谓是满⽬珠贝，美不胜收。唐代初、盛、中、晚的时代风貌、社会风情，唐⼈的⼈⽣意识、⽣命追求、⽣活与审美的体验，⼀句话，他们的喜、怒、哀、乐和酸、甜、苦、辣，⽆不真实⽽动⼈地熔铸进诗的⾼唱之中：曲曲歌诗，给诗的海洋造成⽆⽐旖旎的风光。</p> </div>
<div><p id="x4">      奠泊桑，法国批判现实主义作家，著有300 篇短篇和长篇⼩说，代表作有《⽺脂球》、《俊友》等，课⽂收有《项链》，《我的叔叔于勒》等。      莎⼠⽐亚，英国⽂艺复兴时期伟⼤的剧作家和诗⼈。流传剧本37 部，长诗两⾸，⼗四⾏诗154 ⾸，代表作品有《罗密欧与朱丽叶》、《哈姆雷特》、《奥赛罗》、《李尔王》等。       契诃夫，19 世纪末期俄国杰出的批判现实主义作家，举世闻名的短篇⼩说巨匠和著名的剧作家，代表作有短篇⼩说《套中⼈》、《变⾊龙》、《哀伤》、《苦恼》、《万卡》等，剧本《万尼亚舅舅》、《伊凡诺夫》、《海鸥》、《樱桃园》等。 </p> </div>
<div><p id="x5">      上述内容如有问题请联系：1111111涉及侵权请联系：
2222222</p></div>
</div>
</div>
（3）尾部代码（含个⼈信息）
1. 包括班级、姓名、学号
<div id="footer">
<div>个⼈信息： </div>
</div>
5.添加样式
（1）适⽤于真个模块，此处将显⽰的背景设置为蓝⾊
#all
{background-color:#CCFFFF;}
（2）最顶端模块的样式
#top
{
text-align:center;
/*background-color:#CCFFFF;*/
}
（3）底部模块的样式
#footer
{
position: relative;
margin-top: -150px; /* footer⾼度的负值 */    text-align:center;
line-height:50px;
clear:both;
background-color:#CCFFFF;
}
（4）不同⽂字部分的样式
#x1{
display:none;
padding-top:15px;
/*background-color:#FFFFFF;*/
width:44%;
height:54%;
margin:0 auto;
text-align:left;
}
#x2{
display: none;
padding-top:15px;
/*background-color:#FFFFFF;*/
width:44%;
height:54%;
margin:0 auto;
text-align:left;
}
#x3{
display: none;
padding-top:15px;
/*background-color:#FFFFFF;*/
width:44%;
height:54%;
margin:0 auto;
text-align:left;
}
#x4{
display: none;
padding-top:15px;
/
*background-color:#FFFFFF;*/
width:44%;
height:54%;
margin:0 auto;
text-align:left;
}
#x5{
display: none;
padding-top:15px;
/*background-color:#FFFFFF;*/
width:44%;
height:54%;
margin:0 auto;
text-align:left;
}
6.添加功能
1. 点击不同⽂字时，会显⽰相应的⽂字，隐藏其余⽂字。function showP1() {
function showP2() {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。