实验内容
1、 根据所学知识，实现如下图所示的简单两列布局。
整个页面宽度为960px，背景颜色为#CFF。左侧盒子宽度为740px，背景颜色为#C9F，右侧盒子宽度为210px，背景颜色为#FCF。左侧和右侧盒子的高度均为300px。
image
2、 根据所学知识，实现如下功能：
a、设计如图所示的简单无序列表，并为每个列表项添加超链接。每个列表项的宽度为50px，高度为30px，列表中的文字在水平和垂直方向上均居中显示，超链接初始状态和访问后的状态均为黑色无下划线，鼠标经过和点击时文字均为白色，无下划线，背景颜色为#BE3948。
效果图：
image
任务
一、在右侧代码的body标签中添加一个无序列表。
二、为每一个列表项设置超链接，可以设置空链接（#）。
三、在右侧代码的之前，分别定义标签选择器li和a。
b、设计如下功能，要求当前页的页码要显示红色背景，其他页页码在鼠标经过时显示红色背景。
image
任务
一、制作页码部分基本的HTML结构。
二、设置每一个超链接的边框线、间距和填充
三、设置超链接的四种状态
四、定义当前页码的CSS样式
实验过程
一、 实现两列布局
1、 首先在<style type="text/css">内先建一个.mainBox、一个.leftBox、一个.rightBox的样式以及默认样式*，并在<body>中使用<div>来调用定义的样式。
.mainBox {
width: 960px;
margin: 0 auto;
background-color: #CFF;
overflow: visible;
}
.leftBox {
width: 740px;
height: 300px;
background-color: #C9F;
float: left;
}
.rightBox {
width: 210px;
height: 300px;
background-color: #FCF;
float: right;
} * {
padding: 0;
margin: 0;
}
2、 效果如图所示，此时发现leftBox和rightBox设置浮动之后脱离了普通的文档流，不再占用原来文档中的位置，因此无法把父div撑开。
image
3、 所以我们增加一个类选择器
.clear并并设置clear:both；清除浮动，同时为了解决IE6中div有高度的问题可以增加属性height:0;overflow:hidden;。
.clear {
clear: both;
height: 0;
overflow: hidden;
}
4、效果如图：
image
二、 导航列表
1、 首先现在<body>写好标题<h3>课程难度</h3>,然后创建一个列表：
<!--在此制作一个无序列表-->
<ul>
<li>
<a href="#">全部</a>
</li>
<li><a href="#">初级</a></li>
<li><a href="#">中级</a></li>
<li><a href="#">高级</a></li>
</ul>
效果如图：
image
2、 接着给标签li和a设置样式：
li{
width:50px;
height:30px;
text-align:center;
line-height:30px;
float:left;
list-style-type:none;
}
a{
display:block;
}
效果图如下：
image
3、最后再给链接的四种状态设置样式：
a:link,a:visited{
text-decoration:none;
color:#000;
}
a:hover,a:active{
color:#FFF;
background-color:#BE3948;
text-decoration:none;
}
效果图如下：
image
三、 页码
1、 首先还是在<body>中先写好页码的基本结构
<div class="page">
<a href="#">首页</a>
<a href="#"><</a>
<a href="#" class="active">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">…</a>
<a href="#">></a>
<a href="#">末页</a>
</div>
2、 然后我们在<style type="text/css">里面先把.page和.page a两个选择器写好样式：
*{
margin: 0;
padding: 0;
font-size: 12px;
}
.page{
height:40px;
margin-top:10px;
text-align=center;
}
.page a{
display:inline-block;
text-decoration:none;
border:1px solid #E8E8E8;
margin:5px;
padding:5px 10px;
}
效果图如下：
image
4、接着完成链接的四种状态:
page a:link、.page a:visited、page a:hover、.page a:active如下：
.page a:link,.page a:visited{
color:#000;
}
.page a:hover, .page a:active {
color: #FFF;
background-color: #cc1b1b;
}
效果图如下：
image
5、 页码还需要设置一个点击了以后常亮的状态，所以再加一个
.active
.active {
background-color: #cc1b1b;
color: #FFF;
}
效果图如下：
image
实验总结
CSS选择器的使用对元素的样式控制非常方便实用，包括排版也是有很大帮助，比我之前单纯用<table>标签时候方便很多，需要更多练习。
