Table of contents
Web front-end technology basic experiment report
Experimental topic: List to implement simple website navigation
Experiment purpose: Familiar with the relevant tags of list implementation web pages
Experimental process and results:
Web front-end technology basic experiment report
Experimental topic: List to implement simple website navigation
Experiment purpose: Familiar with the relevant tags of list implementation web pages
Experiment content:
Project 1 Design simple website navigation
1. Visit the website at http://www.hao123.com . Some page screenshots are shown in Figure 1-3-4.
Figure 1-3-4 Screenshot of some links of hao123
2. Use a combination of paragraphs or unordered lists and hyperlinks to implement website navigation. The page effect is shown in Figure 1-3-5.
Figure 1-3-5 Effect diagram of two ways to implement website navigation
3. Set the href attribute of the hyperlink and the title of the hyperlink according to the URL shown in Table 1-3-1.
Table 1-3-1 Navigation link information table on the first line of the web page
| serial number |
Website name |
URL |
| 1 |
Baidu |
http://www.baidu.com/ |
| 2 |
Sina |
http://www.sina.com.cn/ |
| 3 |
Tencent |
http://www.qq.com/ |
| 4 |
Sohu |
http://www.sohu.com/ |
| 5 |
NetEase |
http://www.163.com/ |
| 6 |
valley song |
http://www.google.com.hk/ |
4. The page effect when no style is used is shown in Figure 1-3-6.
Figure 1-3-6 Navigation entry page when styles are not used
Project 2 Introduction to Design Freshman Course
1. Programming to implement the freshman course introduction page, the effect is shown in Figure 1-3-7.
Figure 1-3-7 Freshman Course Introduction Page
The corresponding content of the bookmark used in Figure 1-3-7 is as follows.
Basic English, advanced English, selected readings of newspapers and periodicals, audio-visual, spoken English, English writing, translation theory and practice, language theory, introduction to linguistics, literary history and selected readings of literary works in major English-speaking countries, national conditions of major English-speaking countries, etc.
return
"Advanced Mathematics" Course Introduction With the rapid development of science and technology , mathematics is increasingly becoming an important means and tool for scientific research in various disciplines. Advanced mathematics is the foundation of modern mathematics . It is a required course for students majoring in science and economics and management. It is also the most widely used course in modern science and technology, economic management, and humanities. Therefore, learning this course well is crucial for students' future development. This course is the first important basic mathematics course that students learn after entering university. Through the teaching of this course , students can master the ideas and methods of dealing with mathematical problems , cultivate students' scientific thinking ability , and lay a good foundation for the study of subsequent courses.
return
The college physics course, which takes the basics of physics as its content, is an important general and compulsory basic course for students majoring in science and engineering. College physics courses not only lay the necessary physical foundation for students, but also play an important role that cannot be replaced by other courses in cultivating students' scientific worldview, enhancing students' ability to analyze and solve problems, and cultivating students' exploration spirit and innovative consciousness. .
return
Extracurricular development training one
1. Design the Web page according to the following requirements, as shown in Figure 1-3-8. Requirements are as follows:
(1) The title of the page is: "Guilin Scenery Exhibition".
Figure 1-3-8 Guilin Scenery Exhibition
Extracurricular development training 2
2. Design the "Introduction to China's Famous Universities" page, as shown in Figure 1-3-9.
(1) The title of the page is "Introduction to China's Famous Universities".
(2) Insert 7 university hyperlinks into the scrolling text mark, respectively:
Tsinghua University ( Tsinghua University );
Peking University ( Peking University );
Shanghai Jiao Tong University ( Shanghai Jiao Tong University Chinese homepage portal );
Fudan University ( http://www.fudan.edu.cn/index.html );
Nanjing University ( Nanjing University );
Xi'an Jiaotong University ( Xi'an Jiaotong University );
Harbin Institute of Technology (http://www.hit.edu.cn/).
Figure 1-3-9 Introduction to China’s famous universities
Experimental process and results:
Project 1: Design simple website navigation
Code:
<!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>
screenshot:
Code:
<!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>
screenshot:
Project 2: Introduction to Design Freshman Course
Code:
<!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>
screenshot:
Extracurricular development training one
Code:
<!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>
screenshot:
Extracurricular development training 2
Code:
<!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>
screenshot:
