CSS编程强化练习
一、前言
本篇开发环境
1、操作系统： windows 10 x64
2、编辑器：WebStorm
实验目的
熟悉层叠样式表css语法
二、实验内容
任务1. 根据所学知识，实现如下图所示的简单两列布局。
整个页面宽度为960px，背景颜色为#CFF。左侧盒子宽度为740px，背景颜色为#C9F，右侧盒子宽度为210px，背景颜色为#FCF。左侧和右侧盒子的高度均为300px。
效果图:
图1
任务
一、在下方代码的body标签中添加一个div，设置其class属性为mainBox。
二、在mainBox中添加两个div，其class属性分别为leftBox和rightBox。
三、在下方代码的之前，分别定义类选择器mainBox、leftBox、rightBox，并按照题目要求定义其CSS样式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/*在此定义相应的类选择器，并根据要求设置相关CSS属性*/
</style>
</head>
<body>
<!--在此添加相应的div标签-->
</body>
</html>
任务2. 根据所学知识，实现如下功能：
a、设计如图所示的简单无序列表，并为每个列表项添加超链接。每个列表项的宽度为50px，高度为30px，列表中的文字在水平和垂直方向上均居中显示，超链接初始状态和访问后的状态均为黑色无下划线，鼠标经过和点击时文字均为白色，无下划线，背景颜色为#BE3948。
效果图:
图2
任务
一、在下方代码的body标签中添加一个无序列表。
二、为每一个列表项设置超链接，可以设置空链接（#）。
三、在下方代码的之前，分别定义标签选择器li和a，并按照题目要求定义其CSS样式 。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3.1页面头部制作练习题</title>
<style type="text/css">
/*在此定义相关样式，控制列表的显示形式*/
</style>
</head>
<body>
<h3>课程难度</h3>
<!--在此制作一个无序列表-->
</body>
</html>
b、设计如下功能，要求当前页的页码要显示红色背景，其他页页码在鼠标经过时显示红色背景。
图2
任务
一、制作页码部分基本的HTML结构。
二、设置每一个超链接的边框线、间距和填充
三、设置超链接的四种状态
四、定义当前页码的CSS样式
三、实验步骤
任务1参考代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>2.0</title>
<style type="text/css">
.mainBox
{
width:960px;
background-color: #CFF;
height:300px;
}
.leftBox
{
width:740px;
background-color: #C9F;
height:300px;
float:left; /*float属性很重要，否则两个子div不会都在父div中*/
}
.rightBox
{
width:210px;
background-color: #FCF;
height:300px;
float:right;
}
</style>
</head>
<body>
<div class="mainBox">
<div class="leftBox">
</div>
<div class="rightBox">
</div>
</div>
</body>
</html>
任务2a参考代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>2.1a</title>
<style type="text/css">
p{
font-weight:bold;
}
ul{
list-style: none;
}
li{
width:50px;
height:30px;
text-align:center;
float:left;
}
a{
color:black;
display:block;
text-decoration:none;
}
a:visited{
color:black;
}
a:hover{
color:white;
background-color:#BE3948;
}
a:active{
color:white;
background-color:#BE3948;
}
</style>
</head>
<body>
<p>课程难度</p>
<ul>
<li><a href="#">全部</a></li>
<li><a href="#">初级</a></li>
<li><a href="#">中级</a></li>
<li><a href="#">高级</a></li>
</ul>
</body>
</html>
任务2b参考代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>2.1b</title>
<style>
div{
font-size: 0px;
padding: 20px 0px;
}
a{
border: 1px solid gainsboro;
color:black;
display: inline-block;
padding: 5px 10px;
text-decoration: none;
font-size: 16px;
text-align: center;
margin:5px;
}
a.disabled {
color:black;
background-color: #BE3948;
}
a:visited{
color:black;
}
a:hover{
color:black;
background-color:#BE3948;
}
a:active{
color:black;
background-color:#BE3948;
}
</style>
</head>
<body>
<div>
<a href="#">首页</a>
<a href="#"><</a>
<a href="#" class="disabled">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">…</a>
<a href="#">></a>
</div>
</body>
</html>
网友评论