一、中国十大名胜古迹欣赏
中国十大名胜古迹是指1985年由《中国旅游报》发起并组织全国人民经过半年多的评比，于当年9月9日评选出的万里长城、桂林山水、北京故宫、杭州西湖、苏州园林、安徽黄山、长江三峡、台湾日月潭、承德避暑山庄、西安秦兵马俑十个风景名胜区。这十个景区分布于祖国的东西南北各个区域，包括自然景观，历史建筑，人文景观和文物古迹等。
在head标记中插入style标记，并定义*、div、ul、li、h3、a等标记的样式。
<style type="text/css">
* {padding: 0;margin: 0;}
.div1 {
width: 1000px;height: 780px;margin: 0px auto;text-align: center;
padding: 50px;box-shadow: 0 0 10px #F1F2F3;/* 盒子阴影 */
}
h3 {font-size: 36px;color: red;padding-bottom: 10px;}
p {margin: 5px auto;text-indent: 2em;font-size: 18px;text-align: left;}
ul {margin: 5px auto;width: 900px;list-style-type: none;height: 320px;}
li {float: left;width: 150px;height: 130px;margin: 15px;}
img {border: 0;width: 150px;height: 100px;}
a:link,a:visited,a:active {text-decoration: none;}
a:hover {border-bottom: 4px solid #FF0000;}
/* 使用CSS3让img旋转360度、过渡0.3s,此时不能将a设置为行内块显示方式 ；
若想让整个超链接均有动画效果，则需要将a设置为行内块显示方式
a{display:inline-block;}
a:hover{transform: rotate(360deg);transition: all 0.3s;}
*/
a {color: black;text-decoration: none;}
a:hover img {transform: rotate(360deg);transition: all 0.3s;}
</style>
<!-- prj_3_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旅游景点欣赏 </title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.div1 {
width: 1000px;
height: 780px;
margin: 0px auto;
text-align: center;
padding: 50px;
box-shadow: 0 0 10px #F1F2F3;
/* 盒子阴影 */
}
h3 {
font-size: 36px;
color: red;
padding-bottom: 10px;
}
p {
margin: 5px auto;
text-indent: 2em;
font-size: 18px;
text-align: left;
}
ul {
margin: 5px auto;
width: 900px;
list-style-type: none;
height: 320px;
}
li {
float: left;
width: 150px;
height: 130px;
margin: 15px;
}
img {
border: 0;
width: 150px;
height: 100px;
}
a:link,
a:visited,
a:active {
text-decoration: none;
}
a:hover {
border-bottom: 4px solid #FF0000;
}
/* 使用CSS3让img旋转360度、过渡0.3s,此时不能将a设置为行内块显示方式 ；
若想让整个超链接均有动画效果，则需要将a设置为行内块显示方式
a{display:inline-block;}
a:hover{transform: rotate(360deg);transition: all 0.3s;}
*/
a {
color: black;
text-decoration: none;
}
a:hover img {
transform: rotate(360deg);
transition: all 0.3s;
}
</style>
</head>
<body>
<embed src="pro31/Sleep-Away.mp3" width="0" height="0">
<div class="div1">
<h3>旅游景点欣赏</h3>
<hr color="red" size="3">
<p>万里长城、桂林山水、北京故宫、杭州西湖、苏州园林、安徽黄山、长江三峡、台湾日月潭、承德避暑山庄、西安秦兵马俑等旅游景点区分布于祖国的东西南北各个区域，包括自然景观、历史建筑、人文景观和文物古迹等。</p>
<ul>
<li><a href="pro31/image-3-1-wlcc.jpg" target="embed">万里长城<br><img src="pro31/image-3-1-wlcc.jpg" /></a></li>
<li><a href="pro31/image-3-1-glss.jpg" target="embed">桂林山水<br><img src="pro31/image-3-1-glss.jpg" /></a></li>
<li><a href="pro31/image-3-1-bjgg.jpg" target="embed">北京故宫<br><img src="pro31/image-3-1-bjgg.jpg" /></a></li>
<li><a href="pro31/image-3-1-hzxh.jpg" target="embed">杭州西湖<br><img src="pro31/image-3-1-hzxh.jpg" /></a></li>
<li><a href="pro31/image-3-1-szyl.jpg" target="embed">苏州园林<br><img src="pro31/image-3-1-szyl.jpg" /></a></li>
<li><a href="pro31/image-3-1-ahhs.jpg" target="embed">安徽黄山<br><img src="pro31/image-3-1-ahhs.jpg" /></a></li>
<li><a href="pro31/image-3-1-cjsx.jpg" target="embed">长江三峡<br><img src="pro31/image-3-1-cjsx.jpg" /></a></li>
<li><a href="pro31/image-3-1-ryt.jpg" target="embed">日月潭<br><img src="pro31/image-3-1-ryt.jpg" /></a></li>
<li><a href="pro31/image-3-1-bssz.jpg" target="embed">避暑山庄<br><img src="pro31/image-3-1-bssz.jpg" /></a></li>
<li><a href="pro31/image-3-1-bmy.jpg" target="embed">兵马俑<br><img src="pro31/image-3-1-bmy.jpg" /></a></li>
</ul>
<embed src="pro31/image-3-1-wlcc.jpg" name="embed" type="text/html" width="440px" height="350px" />
</div>
</body>
</html>
二、Web前端技术新书推荐
在head标记中插入style标记，并定义*、div、ul、li、h3、a等标记的样式。
<style type="text/css">
* {padding: 0;margin: 0;}
h1 {color: red;}
div {margin: 0 auto;width: 1000px;text-align: center;}
li {margin: 20px;display: inline-block;}
ul {list-style-type: none;}
img {width: 200px;}
a:hover img{border-radius: 55px 25px;box-shadow: 5px 5px 10px #da85d9;}
a:hover {border-bottom: 10px solid red;}
marquee {margin: 0 auto;padding: 4px auto;}
</style>
<!-- prj_3_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web前端技术新书推荐</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
h1 {
color: red;
}
div {
margin: 0 auto;
width: 1000px;
text-align: center;
}
li {
margin: 20px;
display: inline-block;
}
ul {
list-style-type: none;
text-align: center;
}
img {
width: 200px;
}
a:hover img {
border-radius: 55px 25px;
box-shadow: 5px 5px 10px #da85d9;
}
a:hover {
border-bottom: 10px solid red;
}
marquee {
margin: 0 auto;
padding: 4px auto;
}
</style>
</head>
<body>
<div>
<h1 align="center">Web前端技术新书推荐</h1>
<hr color="red">
<ul>
<li> <a href="pro32/book1.html" target="detail"><img src="pro32/book-1.jpg"></a> </li>
<li> <a href="pro32/book2.html" target="detail"><img src="pro32/book-2.jpg"></a> </li>
<li> <a href="pro32/book3.html" target="detail"><img src="pro32/book-3.jpg"></a> </li>
<li> <a href="pro32/book4.html" target="detail"><img src="pro32/book-4.jpg"></a> </li>
</ul>
<hr color="red">
<iframe name="detail" src="pro32/book1.html" width="1000px" height="400px" frameborder="0"></iframe>
<marquee behavior="alternate" direction="left" height="36px" bgcolor="#F1F2F3">
<font face="隶书" size="5"> 欢迎大家选用教材，欢迎交流讨论！ </font>
</marquee>
</div>
</body>
</html>
三、万维网WWW简介
万维网WWW简介初始页面
在超链接上盘旋时页面
文字素材：
1989年12月，蒂姆为他的发明正式定名为World Wide Web，即我们熟悉的WWW；1991年5月WWW在Internet上首次露面，立即引起轰动，获得了极大的成功被广泛推广应用。
Web通过一种超文本方式，把网络上不同计算机内的信息有机地结合在一起，并且可以通过超文本传输协议（HTTP）从一台Web服务器转到另一台Web服务器上检索信息。Web服务器能发布图文并茂的信息，甚至在软件支持的情况下还可以发布音频和视频信s息。此外，Internet的许多其它功能，如E-mail、Telnet、 FTP、WAIS等都有可通过Web实现。
<!-- prj_3_3.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>万维网的发明者、英国计算机科学家:蒂姆·伯纳斯·李</title>
<style type="text/css">
#container {
width: 1260px;
margin: 0 auto;
text-align: center;
}
embed {
display: inline-block;
}
#content {
display: none;
}
#content {
margin: 0 auto;
width: 1260px;
font-size: 18px;
}
#content p {
text-indent: 2em;
font-size: 18px;
text-align: left;
}
#main:hover #content {
display: block;
}
a {
font-size: 18px;
padding-top: 10px;
width: 100%;
height: 40px;
display: inline-block;
}
a:visited,
a:link,
a:active {
text-decoration: none;
}
a:hover {
background-color: #F1F2FC;
}
.copyright {
width: 100%;
height: 50px;
background-color: #F1FCFA;
}
</style>
</head>
<body>
<div id="container">
<h2>万维网的发明者、英国计算机科学家:蒂姆·伯纳斯·李（Tim Berners-Lee）</h2>
<embed src="pro33/tim.png" type="text/html" width="640px" height="359px">
<embed src="pro33/What-Is-The-World-Wide-Web.mp4" type="" width="600px" height="359px">
<div id="main">
<a href="http://info.cern.ch/hypertext/WWW/TheProject.html"><strong>1989年仲夏之夜，蒂姆成功开发出世界上第一个Web服务器和第一个Web客户机</strong></a>
<div id="content">
<p> 1989年12月，蒂姆为他的发明正式定名为World Wide Web，即我们熟悉的WWW；1991年5月WWW在Internet上首次露面，立即引起轰动，获得了极大的成功被广泛推广应用。 </p>
<p>Web通过一种超文本方式，把网络上不同计算机内的信息有机地结合在一起，并且可以通过超文本传输协议（HTTP）从一台Web服务器转到另一台Web服务器上检索信息。Web服务器能发布图文并茂的信息，甚至在软件支持的情况下还可以发布音频和视频信s息。此外，Internet的许多其它功能，如E-mail、Telnet、
FTP、WAIS等都有可通过Web实现。</p>
</div>
</div>
<p class="copyright"><a href="http://info.cern.ch/hypertext/WWW/TheProject.html">World Wide Web</a></p>
</div>
</body>
</html>
四、专业课程简介页面
文字素材：
基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概论、主要英语国家文学史及文学作品选读、主要英语国家国情等。返回
英语
基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概论、主要英语国家文学史及文学作品选读、主要英语国家国情等。 返回
高数
《高等数学》课程介绍随着科学技术的迅猛发展数学正日益成为各学科进行科学研究的重要手段和工具。高等数学是近代数学的基础是理科各专业和经济管理专业类学生的必修课也是在现代科学技术、经济管理、人文科学中应用最广泛的一门课程。因此学好这门课程对学生今后的发展是至关重要的。本课程是学生进入大学后学习的第一门重要的数学基础课。通过本课程的教学使学生掌握处理数学问题的思想和方法培养学生科学思维能力同时为后续课程的学习奠定良好的基础。 返回
大学物理
以物理学基础为内容的大学物理课程，是理工科个专业学生一门重要的通识性的必修基础课。大学物理课程既为学生打好必要的物理基础，又在培养学生科学的世界观，增强学生分析问题和解决问题的能力，培养学生的探索精神、创新意识等方面，具有其他课程不能替代的重要作用。 返回
<!-- prj_3_4_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>专业课程简介</title>
<style type="text/css">
p {
text-indent: 2em;
}
</style>
</head>
<body>
<h2 align="center">专业课程简介</h2>
<!-- 定义书签目录 -->
<a name="dir0">专业课程导航</a> <!-- 这是根目录 -->
<ul>
<li><a href="#dir1">英语</a></li>
<li><a href="#dir2">高数</a></li>
<li><a href="#dir3">大学物理</a></li>
</ul>
<!-- 定义书签内容 -->
<h3><a name="dir1"></a>英语</h3> <!-- 英语 -->
<p>基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概论、主要英语国家文学史及文学作品选读、主要英语国家国情等。<strong><a href="#dir0">返回</a></strong>
</p>
<h3><a name="dir2"></a>高数</h3> <!-- 高数 -->
<p>
《高等数学》课程介绍随着科学技术的迅猛发展数学正日益成为各学科进行科学研究的重要手段和工具。高等数学是近代数学的基础是理科各专业和经济管理专业类学生的必修课也是在现代科学技术、经济管理、人文科学中应用最广泛的一门课程。因此学好这门课程对学生今后的发展是至关重要的。本课程是学生进入大学后学习的第一门重要的数学基础课。通过本课程的教学使学生掌握处理数学问题的思想和方法培养学生科学思维能力同时为后续课程的学习奠定良好的基础。<strong><a
href="#dir0">返回</a></strong>
</p>
<h3><a name="dir3"></a>大学物理</h3> <!-- 大学物理 -->
<p>
以物理学基础为内容的大学物理课程，是理工科个专业学生一门重要的通识性的必修基础课。大学物理课程既为学生打好必要的物理基础，又在培养学生科学的世界观，增强学生分析问题和解决问题的能力，培养学生的探索精神、创新意识等方面，具有其他课程不能替代的重要作用。
<strong><a href="#dir0">返回</a></strong>
</p>
</body>
</html>
五、课外拓展训练
定义样式。img标记样式为“宽度100px、高度100px、边框0px”；h3标记样式为“红色、居中”；ul样式为“去除列表项前的符号、内容居中显示、边界上下为0、左右自动、宽度520px、高度150px”；li样式为“行内块显示、宽度120px、行高30px”。
注意：图像圆角边框样式采用规则如下：
a:hover img{
border-radius: 25px;/* 盘旋时图像改为圆角边框 */
}
1、桂林风景展览
<!-- project_3_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>桂林风景展览</title>
<style type="text/css">
img {
width: 100px;
height: 100px;
border: 0;
}
h3 {
color: #ff0000;
}
ul {
list-style-type: none;
text-align: center;
margin: 0 auto;
width: 520px;
height: 150px;
}
li {
/* float:left; */
display: inline-block;
width: 120px;
line-height: 30px;
}
a:hover img {
border-radius: 25px;
/* 盘旋时图像改为圆角边框 */
}
</style>
</head>
<body>
<h3 align="center">桂林风景展览</h3>
<ul>
<li><a href="kwtz31/image31.jpg"><img src="kwtz31/image31.jpg" alt=""><br>桂林风景1<br></a></li>
<li><a href="kwtz31/image32.jpg"><img src="kwtz31/image32.jpg" alt=""><br>桂林风景2<br></a></li>
<li><a href="kwtz31/image33.jpg"><img src="kwtz31/image33.jpg" alt=""><br>桂林风景3<br></a></li>
<li><a href="kwtz31/image34.jpg"><img src="kwtz31/image34.jpg" alt=""><br>桂林风景4<br></a></li>
</ul>
</body>
</html>
2、勤奋好学的四大典故页面
勤奋好学的四大典故中超链接信息表:
| href | title |
|---|---|
| kwtz32/kwtz32-1.html | 悬梁刺股 |
| kwtz32/kwtz32-2.html | 凿壁偷光 |
| kwtz32/kwtz32-3.html | 萤囊映雪 |
| kwtz32/kwtz32-4.html | 闻鸡起舞 |
<!-- project_3_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>勤奋好学的四大典故</title>
<style type="text/css">
h1 {
color: red;
}
img {
width: 250px;
margin: 10px;
}
div {
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<h1 align="center">勤奋好学的四大典故</h1>
<hr>
<marquee behavior="alternate" onmouseover="this.stop();" onmouseout="this.start();">
<a href="kwtz32/kwtz32-1.html" target="content" title="悬梁刺股"><img src="kwtz32/image32-xlcg.jpg"></a>
<a href="kwtz32/kwtz32-2.html" target="content" title="凿壁偷光"><img src="kwtz32/image32-zbtg.jpg"></a>
<a href="kwtz32/kwtz32-3.html" target="content" title='萤囊映雪'><img src="kwtz32/image32-lyyx.jpg"></a>
<a href="kwtz32/kwtz32-4.html" target="content" title='闻鸡起舞'><img src="kwtz32/image32-wjqw.jpg"></a>
</marquee>
<hr>
<iframe name="content" src="kwtz32/kwtz32-1.html" width="100%" height="100px"></iframe>
</div>
</body>
</html>
作者主页： 正函数的个人主页
文章收录专栏： Web design
欢迎大家点赞 👍 收藏 ⭐ 加关注哦！
如果你认为这篇文章对你有帮助，请给正函数点个赞吧，如果发现什么问题，欢迎评论区留言！！
扫一扫
1021
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
