简明现代魔法 -> CSS层叠样式表 -> 用p标签网页区域分隔

用p标签网页区域分隔

2009-11-13

效果演示







实现这个效果,不算div层,在html代码上只需要一行p标签代码。

<div id="rightPan">
  	<p class="more"><a href="#">分隔线</a></p>
</div>

css上的实现为:

#rightPan{
	width:511px; 
	float:left; 
	border-left:1px solid #C8E8E2; 
	margin:28px 0 0; 
	padding:0 30px;
	}
#rightPan p{
	padding:0 0 10px 0;
	}
#rightPan p.more{
	width:502px; 
	height:25px; 
	float:left; 
	background:url(images/sky-color-bg.gif) 0 10px repeat-x; 
	padding:0 0 20px 0;
	}
#rightPan p.more a{
	width:92px; 
	height:21px; 
	display:block; 
	background:url(images/icon2.jpg) 0 0 no-repeat #fff; 
	color:#958201; 
	line-height:21px; 
	text-transform:uppercase; 
	text-decoration:none; 
	margin:0 0 0 328px; 
	padding:4px 0 0 50px;
	}
#rightPan p.more a:hover{
	background:url(images/icon2.jpg) 0 0 no-repeat #fff; 
	color:#645804; 
	text-decoration:none;
	}

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们