0


Web前端技术基础实验报告四之列表实现简易网站导航

Web前端技术基础实验报告

实验题目:列表实现简易网站导航

实验目的:熟悉列表实现网页的相关标签

实验内容 :

项目1 设计简易网站导航

1. http://www.hao123.com访问网站,部分页面截图如图1-3-4所示。

图1-3-4 hao123部分链接截图

**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/

  1. 未使用样式时页面效果如图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>&nbsp;&nbsp;&nbsp; <a href="https://www.baidu.com/">百&nbsp;度</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.sina.com.cn/">新&nbsp;浪</a>&nbsp;&nbsp; <a href="https://qzone.qq.com/">腾讯·QQ空间</a>&nbsp;&nbsp; 搜&nbsp;狐&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.netease.com/">网&nbsp;易</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.google.cn/">谷&nbsp;歌</a></p>
            <p>&nbsp;&nbsp;&nbsp;凤 凰 网&nbsp;&nbsp;&nbsp;新浪微博&nbsp;&nbsp;&nbsp;新 华 网&nbsp;&nbsp;&nbsp;人 民 网&nbsp;&nbsp;&nbsp;中国移动&nbsp;&nbsp;&nbsp;&nbsp;CNTV</p>
            <p>&nbsp;&nbsp;&nbsp;人 人 网&nbsp;&nbsp;&nbsp;开 心 网&nbsp;&nbsp;&nbsp;赛 尔 号&nbsp;&nbsp;&nbsp;汽车之家&nbsp;&nbsp;&nbsp;4399游戏&nbsp;&nbsp;&nbsp;太平洋电脑</p>
            <hr >
            <p>&nbsp;&nbsp;&nbsp;东方财富&nbsp;&nbsp;&nbsp;58 同 城&nbsp;&nbsp;&nbsp;中 彩 网&nbsp;&nbsp;&nbsp;淘 宝 网&nbsp;&nbsp;&nbsp;湖南卫视&nbsp;&nbsp;&nbsp;智联招聘</p>
            <p>&nbsp;&nbsp;&nbsp;工商银行&nbsp;&nbsp;&nbsp;凡客诚品&nbsp;&nbsp; 中关村在线&nbsp;&nbsp; 苏宁易购&nbsp;&nbsp;&nbsp;易 车 网&nbsp;&nbsp;&nbsp;去哪儿网</p>
            <p id="p1">&nbsp;&nbsp;&nbsp;京东商城&nbsp;&nbsp;&nbsp;国美电器&nbsp;&nbsp;&nbsp;美 团 网&nbsp;&nbsp; 卓越亚马逊&nbsp;&nbsp; 唯 品 会&nbsp;&nbsp;&nbsp;世纪佳缘</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>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="http://www.sina.com.cn/">新浪</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="http://www.163.com/">网易</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="http://www.qq.com/">腾讯</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="http://www.sohu.com/">搜狐</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概论、主要英语国家文学史及文学作品选读、主要英语国家国情等。<a href="#softwere">返回</a></p>
        <h4><a name="gaoshu">高数</a></h4>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《高等数学》课程介绍随着科学技术的迅猛发展数学正日益成为各学科进行科学研究的重要手段和工具。高等数学是近代数学的基础是理科各专业和经济管理专业类学生的必修课也是在现代科学技术、经济管理、人文科学中应用最广泛的一门课程。因此学好这门课程对学生今后的发展是至关重要的。本课程是学生进入大学后学习的第一门重要的数学基础课。通过本课程的教学使学生掌握处理数学问题的思想和方法培养学生科学思维能力同时为后续课程的学习奠定良好的基础。<a href="#softwere">返回</a></p>
        <h4><a name="dxwl">大学物理</a></h4>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;以物理学基础为内容的大学物理课程,是理工科个专业学生一门重要的通识性的必修基础课。大学物理课程既为学生打好必要的物理基础,又在培养学生科学的世界观,增强学生分析问题和解决问题的能力,培养学生的探索精神、创新意识等方面,具有其他课程不能替代的重要作用。 
<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>&nbsp;<a href="http://www.pku.edu.cn/">北京大学</a>&nbsp;<a
                href="http://www.sjtu.edu.cn/">上海交通大学</a>&nbsp;<a
                href="http://www.fudan.edu.cn/index.html">复旦大学</a>&nbsp;<a
                href="http://www.nju.edu.cn/">南京大学</a>&nbsp;<a href="http://www.xjtu.edu.cn/">西安交通大学</a>&nbsp;<a
                href="http://www.hit.edu.cn/">哈尔滨工业大学</a></marquee>
        <hr color="gainsboro">
    </body>
</html>

截图:

标签: 前端 html css3

本文转载自: https://blog.csdn.net/pzcxl/article/details/124663242
版权归原作者 想这世界简单点 所有, 如有侵权,请联系我们删除。

“Web前端技术基础实验报告四之列表实现简易网站导航”的评论:

还没有评论