网页设计与制作实验报告9.docVIP

重庆工商大学 管理学院 实 验 报 告 课程名称:网页设计与制作实例教程 实验名称：CSS基础 班 级：信息管理与信息系统一班 姓名： 唐杰 学号： 2013033132 同 组 人：__无__ 实验日期：2015.12.03 实验地点：学创园8A303 实验成绩：__________ 指导教师：张世勇 1.实验内容 掌握CSS伪类；层叠；CSS选择器基本操作。 2.实验环境（软件、硬件及条件） 在学创园的XP电脑上，进行网页设计与制作。 实验过程分析（包括主要步骤和主要截图） 实例（11-1）实验步骤： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title列表/title style type=text/css !-- li { font-size: 12px; line-height: 22px; color: #535353; background-image: url(arrow1.gif); background-repeat: no-repeat; background-position: 0px 7px; padding-left: 11px; list-style-type: none; padding-left:11px; } -- /style /head body ul li基于psd设计图的网页设计流程实例/li lidreamweaver spry框架的介绍与应用/li lijQuery:the write less, do more/li litab选项卡的各种实现方法汇总/li liweb标准已经成为主流的网页设计方法/li li有哪些信誉好的足球投注网站引擎优化的外部方法和内部方法/li /ul /body /html 检验实验：-----实验正确 (实例11-2)实验步骤： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleblockamp;inline/title style type=text/css !-- a { font-size: 14px; line-height: 29px; font-weight: bold; text-decoration: none; letter-spacing: 5px; text-align: center; float: left; height: 29px; width: 102px; } li { display: inline; list-style-type: none; } a:link, a:visited { color: #ffffff; background-image: url(1.gif); background-position: left top; } a:hover { color: #ffff00; background-image: url(1.gif); background-position: left bottom; } -- /style /head body ul lia href=#新闻/a/li lia href=#体育/a/li lia href=#财经/a/li lia href=#娱乐/a/li lia href=#房产/a/li lia href=#博客/a/li /ul /body /html 检验实验：-----实验正确 (实例11-3)实验步骤： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title背景图片的/t