首页-代码 2014-05-13 01:16:04 -0400

★CSS简单美观的黑白配色栏目条(黑白字底/栏目标题)★


请勿抄袭本页面

代码说明

可用于栏目标题,灵感来自地理学业水平训练书,CSS实现比较简单,若有需要可以加点背景渐变更有凹凸感。本代码由@笑忘书 编写

使用方法及注意事项使用前请先阅读本内容
把栏目标题字数平分,放到对应位置,建议在四字左右

html代码


代码演示

关于本站

笑忘书网页代码收藏馆(35230.wodemo.com),搜集精品实用网页代码,分享各类建站安卓图文等福利资源,每周不定时更新,欢迎关注



[代码仅供参考,转载请注明出处]

----Comments(6)----
、'Nice__ (@mlw) | @ at 2015-03-07 14:49:
<style type="text/css">
*
{ margin:0; padding:0; }

.lan
{ border-bottom:1px solid #333; text-align:left; padding:8px 0px 14px 3px; margin:6px auto; }

.lan_one,.lan_two
{ padding:8px 10px; margin:0; position:relative; -webkit-transition:0.6s; }

.lan_one
{ color:#000; background:#eee; border:1px solid #000; border-right:none; }

.lan>.lan_one:hover
{ background:black; color:#eee; }

.lan>.lan_one>.one_demo
{ display:none;margin:0;padding:8px 0px;background:#eee;color:black;border:1px solid #000; border-left:none; }

.lan>.lan_one:hover>.one_demo
{ display:block; position:absolute; top:-1px; left:52px; width:52px; text-align:center; z-index:3; }

.lan_two
{ color:#eee; background:#000; border:1px solid #000; border-left:none; }

.lan>.lan_two:hover
{ background:#eee; color:black; }

.lan>.lan_two>.two_demo { display:none; margin:0 0 0 0px; padding:8px 0px; background:black; color:#eee; border:1px solid #000; border-right:none; }

.lan>.lan_two:hover>.two_demo
{ display:block; position:absolute; top:-1px; right:52px; width:52px; text-align:center; z-index:3; }
</style>
<div class="lan">
<span class="lan_one">关于<span class="one_demo">本站</span></span><span class="lan_two">本站<span class="two_demo">关于</span></span>
</div>

请问忘书大神逐渐变色是这样子么?

新手弄的不好。
感觉缺陷一大堆。

望笑忘书大神指点一下。

或有没有更好的方法。

给我这个菜鸟参考一下。
谢谢。^_^

ps:忘书大神的这灵感不错学习了。^o^

@35230
wicked_m (@wickedman) | @ at 2014-09-16 02:20:
不错。。。。。
没有温度 (@rjxz) | @ at 2014-05-28 11:46:
学业水平测试....我们6月也要学考了,你也高二啊
冒泡网:http (@mrppj) | @ at 2014-05-24 20:28:
还不错!
水木易安 at 2014-05-22 06:15:
这个是扁平风的,加了渐变刘不伦不类了
BuBu (@pan123) | @ at 2014-05-16 09:06:
沙发
Comment:
Name:


Subscribe | Register | Login | 中文 | N