前端开发技术实验报告 实验四.docVIP

长 春 大 学 20 15 — 2016学年第 二 学期 Web前端开发技术 课程 实 验 报 告 学 院： 计算机科学技术 专 业： 软件工程 班 级： 软件14402 学 号： 041440204 姓 名： 梁媛 任课教师： 车娜 实验四 列表与超链接 一、实验目的 1.掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块； 2.掌握超链接标记的使用，能够使用超链接定义网页元素； 3.掌握CSS伪类，会使用CSS伪类实现超链接特效； 二、内容及要求 运用列表标记、超链接标记以及CSS控制列表与超链接的样式实现网页中常见的新闻列表，其效果如图4-1所示，满足如下要求： 1.整个新闻列表整体上由上面的新闻标题和下面的新闻内容两部分构成。 2.新闻内容部分结构清晰，各条新闻并列存在、不分先后。 3.其中各条新闻都是可以点击的链接，当鼠标移上时，其样式会发生变化，如图4-2所示。 4.每个列表项目前添加列表项目图像。 图4-1 新闻列表效果展示 图4-2 鼠标移上链接文字效果 三、实验原理 无序列表：网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分。使用ul/ul标记定义，li/li为具体的列表项。 有序列表：有排列顺序的列表，其各个列表项会按照一定的顺序排列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。使用ol/ol标记定义，li/li为具体的列表项。 定义列表：常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。使用dl/dl、dt/dt和dd/dd进行定义，其中，dt/dt标记用于指定术语名词，dd/dd标记用于对名词进行解释和描述。一对dt/dt可以对应多对dd/dd，即可以对一个名词进行多项解释。 为li设置背景图像的方式实现列表项目图像的具体步骤：使用“list-style”属性将列表项目符号的默认效果设置为none;通过“background”综合属性给列表项添加背景图像并控制到合适的位置。 超链接：超链接a标记，可以实现网页间的跳转。 链接伪类：可以实现超链接不同的链接状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。 锚点链接：使用“a href=”#id名”链接文本/a”创建链接文本。使用相应的id名称标注跳转目标的位置。 四、实验步骤 1、结构分析 2、样式分析 控制效果图4-1的样式主要分为以下几部分： (1) (2) (3) (4) (5) 3、制作页面结构 根据上面的分析，可以使用相应的HTML标记来搭建网页结构 4、定义CSS样式 搭建完页面的结构后，使用CSS对页面的样式进行修饰。 (1) 定义基础样式 (2) 定义整体控制新闻列表 (3) 制作标题部分 (4) 整体控制列表内容 (5) 控制列表项 (6) CSS控制链接文本 五、实验代码及网页效果图 （仅列出关键代码及主要效果图即可） 1．搭建基本结构 关键代码如下： 效果如图4-3所示。 图4-3 结构效果图 2．定义CSS样式 关键代码如下： 效果如图4-4所示，当鼠标移上链接文本，效果如图4-5所示。 图4-4 添加CSS样式后的网页效果 图4-5 鼠标移上链接文本效果 六、实验总结 （此处写实验过程或技术上的总结而不是个人情感心得，如下事例） 1．学会了如何运用……等。 2．…… 2