文档介绍：重庆工商大学
管理学院
实验报告
课程名称:网页设计与制作实例教程
实验名称:CSS基础
班级:信息管理与信息系统一班
姓名: 唐杰学号: 2013033132
同组人:__无__
实验日期:
实验地点:学创园8A303
实验成绩:__________
指导教师:张世勇
掌握CSS伪类;层叠;CSS选择器基本操作。
(软件、硬件及条件)
在学创园的XP电脑上,进行网页设计与制作。
实验过程分析(包括主要步骤和主要截图)
实例(11-1)实验步骤:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-">
<html xmlns="9/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();
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>
<li>dreamweaver spry框架的介绍与应用</li>
<li>jQuery:the write less, do more</li>
<li>tab选项卡的各种实现方法汇总</li>
<li>web标准已经成为主流的网页设计方法</li>
<li>搜索引擎优化的外部方法和内部方法</li>
</ul>
</body>
</html>
检验实验:-----实验正确
(实例11-2)实验步骤:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-">
<html xmlns="9/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>block&amp;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();
background-position: left top;
}
a:hover {
color: #ffff00;
background-image: url();
background-position: left bottom;
}
-->
</style>
</head>
<body>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">财经</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">房产</a></li>
<li><a href="#">博客</a></li>
</ul>
</body>
</html>
检验实验: