简明现代魔法 -> 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;
	}