目录
Web前端技术基础实验报告
实验题目：列表实现简易网站导航
实验目的：熟悉列表实现网页的相关标签
实验内容 ：
项目1 设计简易网站导航
1. http://www.hao123.com访问网站，部分页面截图如图1-3-4所示。
图1-3-4 hao123部分链接截图
扫描二维码关注公众号，回复：
16942091 查看本文章
2.采用段落或无序列表与超链接组合实现网站导航，页面效果如图1-3-5所示。
图1-3-5 两种方式实现网站导航的效果图
3．按照表1-3-1所示的URL分别设置超链接的href属性和超链接的标题。
表1-3-1 网页首行导航链接信息表
| 序号 |
网站名称 |
URL |
| 1 |
百 度 |
http://www.baidu.com/ |
| 2 |
新 浪 |
http://www.sina.com.cn/ |
| 3 |
腾 讯 |
http://www.qq.com/ |
| 4 |
搜 狐 |
http://www.sohu.com/ |
| 5 |
网 易 |
http://www.163.com/ |
| 6 |
谷 歌 |
http://www.google.com.hk/ |
4. 未使用样式时页面效果如图1-3-6所示。
图1-3-6 未使用样式时导航条目页面
项目2 设计新生课程简介
1.编程实现新生课程简介页面，效果如图1-3-7所示。
图1-3-7 新生课程简介页面
图1-3-7中所使用的书签对应的内容如下所示。
基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概论、主要英语国家文学史及文学作品选读、主要英语国家国情等。
返回
《高等数学》课程介绍随着科学技术的迅猛发展数学正日益成为各学科进行科学研究的重要手段和工具。高等数学是近代数学的基础是理科各专业和经济管理专业类学生的必修课也是在现代科学技术、经济管理、人文科学中应用最广泛的一门课程。因此学好这门课程对学生今后的发展是至关重要的。本课程是学生进入大学后学习的第一门重要的数学基础课。通过本课程的教学使学生掌握处理数学问题的思想和方法培养学生科学思维能力同时为后续课程的学习奠定良好的基础。
返回
以物理学基础为内容的大学物理课程，是理工科个专业学生一门重要的通识性的必修基础课。大学物理课程既为学生打好必要的物理基础，又在培养学生科学的世界观，增强学生分析问题和解决问题的能力，培养学生的探索精神、创新意识等方面，具有其他课程不能替代的重要作用。
返回
课外拓展训练一
1.按如下要求设计Web页面，如图1-3-8所示。要求如下：
(1)页面标题为："桂林风景展览"。
图1-3-8 桂林风景展览
课外拓展训练二
2.设计“中国名牌大学简介”页面，效果如图1-3-9所示。
(1)页面标题为“中国名牌大学简介”。
(2)滚动文字标记内插入7个大学超链接，分别:
清华大学（清华大学）;
北京大学（北京大学）;
上海交通大学（上海交通大学中文主页门户网站）;
复旦大学（http://www.fudan.edu.cn/index.html）;
南京大学（南京大学）;
西安交通大学（西安交通大学）;
哈尔滨工业大学（http://www.hit.edu.cn/）。
图1-3-9 中国名牌大学简介
实验过程及结果：
项目一：设计简易网站导航
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>http://www.hao123.com访问网站</title>
<style type="text/css">
#d1{
margin-top: 100px;
margin-left: 250px;
border-style: solid;
border-color: rgb(158, 204, 95);
height: 245px;
width: 780px;
background: rgb(254, 254, 251);
float: inherit;
}
hr{border:1px dashed #55ff7f;width: 98%;}
p{font-family: 宋体;}
#p1{color: #33CC33;}
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: black;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
a:active {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="d1">
<p> <a href="https://www.baidu.com/">百 度</a> <a href="https://www.sina.com.cn/">新 浪</a> <a href="https://qzone.qq.com/">腾讯·QQ空间</a> 搜 狐 <a href="http://www.netease.com/">网 易</a> <a href="http://www.google.cn/">谷 歌</a></p>
<p> 凤 凰 网 新浪微博 新 华 网 人 民 网 中国移动 CNTV</p>
<p> 人 人 网 开 心 网 赛 尔 号 汽车之家 4399游戏 太平洋电脑</p>
<hr >
<p> 东方财富 58 同 城 中 彩 网 淘 宝 网 湖南卫视 智联招聘</p>
<p> 工商银行 凡客诚品 中关村在线 苏宁易购 易 车 网 去哪儿网</p>
<p id="p1"> 京东商城 国美电器 美 团 网 卓越亚马逊 唯 品 会 世纪佳缘</p>
</div>
</body>
</html>
截图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站导航</title>
<style type="text/css">
#hr1 {
color: rgb(99, 161, 255);
}
p {
text-align: center;
}
ul {
list-style-type: none;
margin: 0 auto;
position: relative;
left: 370px;
}
li {
float: left;
margin: 23px;
}
</style>
</head>
<body>
使用段落标记和超链接实现网页导航
<p><a href="http://www.baidu.com/">百度</a>
<a href="http://www.sina.com.cn/">新浪</a>
<a href="http://www.163.com/">网易</a>
<a href="http://www.qq.com/">腾讯</a>
<a href="http://www.sohu.com/">搜狐</a>
<a href="http://www.google.com.hk/">360搜索</a></li< /p>
<hr id="hr1">
利用无序列表实现水平导航条
<ul>
<li><a href="http://www.baidu.com/">百度</a></li>
<li><a href="http://www.sina.com.cn/">新浪</a></li>
<li><a href="http://www.163.com/">网易</a></li>
<li><a href="http://www.qq.com/">腾讯</a></li>
<li><a href="http://www.sohu.com/">搜狐</a></li>
<li><a href="http://www.google.com.hk/">360搜索</a></li>
</ul>
</body>
</html>
截图：
项目二：设计新生课程简介
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>专业课程导航</title>
</head>
<body>
<h3 align="center"><a name="softwere">专业课程导航</a></h3>
专业课程导航
<ul>
<li><a href="#english">英语</a></li>
<li><a href="#gaoshu">高数</a></li>
<li><a href="#dxwl">大学物理</a></li>
</ul>
<h4><a name="english">英语</a></h4>
<p> 基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概论、主要英语国家文学史及文学作品选读、主要英语国家国情等。<a href="#softwere">返回</a></p>
<h4><a name="gaoshu">高数</a></h4>
<p> 《高等数学》课程介绍随着科学技术的迅猛发展数学正日益成为各学科进行科学研究的重要手段和工具。高等数学是近代数学的基础是理科各专业和经济管理专业类学生的必修课也是在现代科学技术、经济管理、人文科学中应用最广泛的一门课程。因此学好这门课程对学生今后的发展是至关重要的。本课程是学生进入大学后学习的第一门重要的数学基础课。通过本课程的教学使学生掌握处理数学问题的思想和方法培养学生科学思维能力同时为后续课程的学习奠定良好的基础。<a href="#softwere">返回</a></p>
<h4><a name="dxwl">大学物理</a></h4>
<p> 以物理学基础为内容的大学物理课程，是理工科个专业学生一门重要的通识性的必修基础课。大学物理课程既为学生打好必要的物理基础，又在培养学生科学的世界观，增强学生分析问题和解决问题的能力，培养学生的探索精神、创新意识等方面，具有其他课程不能替代的重要作用。
<a href="#softwere">返回</a>
</p>
</body>
</html>
截图：
课外拓展训练一
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桂林风景展览</title>
<style type="text/css">
img {
width: 100px;
height: 100px;
border: 0;
}
h3 {
color: red;
}
ul {
list-style-type: none;
position: relative;
left: 345px;
text-align: center;
}
li {
float: left;
margin: 12px;
}
</style>
</head>
<body>
<h3 align="center">桂林风景展览</h3>
<ul>
<li><a href="shiyan4_3_1.html"><img src="image31.jpg"><br>桂林风景1<br></a></li>
<li><a href="shiyan4_3_2.html"><img src="image32.jpg"><br>桂林风景2<br></a></li>
<li><a href="shiyan4_3_3.html"><img src="image33.jpg"><br>桂林风景3<br></a></li>
<li><a href="shiyan4_3_4.html"><img src="image34.jpg"><br>桂林风景4<br></a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桂林风景1</title>
<style type="text/css">
body {
background-color: #7FFFD4;
}
img {
height: 350px;
width: 450px;
margin-left: 400px;
margin-top: 90px;
border: #000000;
border-style: groove;
border-width: 3px;
}
</style>
</head>
<body>
<img src="image31.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桂林风景2</title>
<style type="text/css">
body {
background-color: #7FFFD4;
}
img {
height: 350px;
width: 450px;
margin-left: 400px;
margin-top: 90px;
border: #000000;
border-style: groove;
border-width: 3px;
}
</style>
</head>
<body>
<img src="image32.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桂林风景3</title>
<style type="text/css">
body {
background-color: #7FFFD4;
}
img {
height: 350px;
width: 450px;
margin-left: 400px;
margin-top: 90px;
border: #000000;
border-style: groove;
border-width: 3px;
}
</style>
</head>
<body>
<img src="image33.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桂林风景4</title>
<style type="text/css">
body {
background-color: #7FFFD4;
}
img {
height: 350px;
width: 450px;
margin-left: 400px;
margin-top: 90px;
border: #000000;
border-style: groove;
border-width: 3px;
}
</style>
</head>
<body>
<img src="image34.jpg">
</body>
</html>
截图：
课外拓展训练二
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中国名牌大学简介</title>
</head>
<body>
<h3 align="center">中国名牌大学简介</h3>
<hr color="gainsboro">
<marquee><a href="http://www.tsinghua.edu.cn/">清华大学</a> <a href="http://www.pku.edu.cn/">北京大学</a> <a
href="http://www.sjtu.edu.cn/">上海交通大学</a> <a
href="http://www.fudan.edu.cn/index.html">复旦大学</a> <a
href="http://www.nju.edu.cn/">南京大学</a> <a href="http://www.xjtu.edu.cn/">西安交通大学</a> <a
href="http://www.hit.edu.cn/">哈尔滨工业大学</a></marquee>
<hr color="gainsboro">
</body>
</html>
截图：
