CSS层叠样式单的应用

最新推荐文章于 2022-06-12 23:18:00 发布

Sasura_321

最新推荐文章于 2022-06-12 23:18:00 发布

阅读量648

点赞数 2

分类专栏： Web前端文章标签： web html css

本文链接：https://blog.csdn.net/qq_40933663/article/details/90301703

版权

１．使用各类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="#">电视</a<

最低0.47元/天解锁文章

Sasura_321

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS层叠样式单的应用

１．使用各类CSS选择器，按照要求实现如下的页面美化效果第一步：用div-ul-li组织结构对下图进行布局，按要求使用各类CSS选择器对无序列表进行如下样式设计，如下图所示：第二步：使用常用的文本属性、背景属性、列表属性对第一步完成的页面进行进一步的设计，具体要求和实现的页面效果如下图所示：第三步：为所有li列表项定义超链接样式，链接默认状态下无下划线（text-decoration）；...
复制链接

扫一扫