• Register
热门标签
↑ 收起导航

CSS文字左右两横线效果

代码效果请直接看演示吧:Demo演示

效果一代码

<style type="text/css" media="screen">
#login_frame .with-line {
	width:300px;font-size: 16px;
	color: #999;
	margin: 0 auto;
	position: relative;
	text-align: center
}

#login_frame .with-line:before {
	content: "";
	border-top: 1px solid #ededed;
	display: block;
	position: absolute;
	width: 60px;
	top: 10px;
	left: 0
}

#login_frame .with-line:after {
	content: "";
	border-top: 1px solid #ededed;
	display: block;
	position: absolute;
	width: 60px;
	top: 10px;
	right: 0
}
</style>

<div id="login_frame">
	<div class="with-line">这里是中间的文字部分</div>
</div>

效果二代码

<style type="text/css">
ul{ margin:0; padding:0; list-style-type:none;} 
#nav{font-size:12px;padding-bottom:15px;}
#nav li{width:100%; height:30px;}
#nav .item1{width:100%; border-bottom:1px solid #6c6;margin-bottom:-15px;}
#nav li a{width:100%; display:block;color:#666;text-decoration:none;padding:6px 5px;text-align:center;}
#nav li span{background:#FBFBFB; border:1px solid #eeeeee;padding:6px 5px;}
</style>
<ul id="nav">
	<li class="item1"></li>
	<li class=""><a href=""><span>标题1</span></a></li>
</ul>
版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/1024.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

发表评论 



我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册