1.使用各类CSS选择器,按照要求实现如下的页面美化效果
第一步:用div-ul-li组织结构对下图进行布局,按要求使用各类CSS选择器对无序列表进行如下样式设计,如下图所示:
第二步:使用常用的文本属性、背景属性、列表属性对第一步完成的页面进行进一步的设计,具体要求和实现的页面效果如下图所示:
第三步:为所有li列表项定义超链接样式,链接默认状态下无下划线(text-decoration);鼠标悬停时,字体变为红色、字体变大且有下划线。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>贵美商城</title>
<style>
.font
{
font-size:14px;
font:bold;
color:#ff7300;
margin-left:10px;
text-align:left;
}
a
{
text-decoration:none;
font-size:12px;
color:#000;
width:50px;
float:left;
height:28px;
}
div{
background-image:url(imgs/bg.gif);
background-repeat:no-repeat;
font-size:12px;
width:200px;
}
ul
{
list-style:none;
}
</style>
</head>
<body>
<p><u><font style="letter-spacing:5px;">你好,欢迎访问贵美商城!</font></u></p>
<br/>
<div>
<ul></ul>
<h3 class="font"> 家用电器</h3>
<ul style="height:40px;">
<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="#">DVD</a></li>
<li><a href="#">相机</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">DVD</a></li>
</ul>
<ul></ul>
<h3 class="font">日用百货</h3>
<ul style="height:40px;">
<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>
<li><a href="#">相机</a></li>
<li><a href="#"><