分享一个WordPress博客侧边栏CSS效果图

2016-6-16 春哥姓梅 学习笔记

这个其实可以用于博客网站的内容导航导向

这个也是在别人博客上面看到了所以转载过来、想着以后可能用的上

闲话不多说、直接上代码(没调试、没演示、观众都没说好~~~)

 

  1. <ul class="colorbar">
  2. <li><a href="#" target="_blank" style="background-color:#FF3030;"> >>描文本<< </a>
  3. <li><a href="#" target="_blank" style="background-color:#428BCA;">#^_^# 描文本</a>
  4. <li><a href="#" target="_blank" style="background-color:#e84266;">描文本</a>
  5. <li><a href="#" target="_blank" style="background-color:#FF3030;"> >>描文本<< </a>
  6. </ul>
  7. <style type="text/css">
  8. .colorbar li {
  9.     width: 100% !important;
  10. }
  11. .colorbar li a {
  12.     color#fff;
  13.     line-height38px;
  14.     displayblock;
  15.     width: 100%;
  16.     text-aligncenter;
  17. }
  18. .colorbar li a:hover {
  19.     opacity: 0.8;
  20. }
  21. </style>

 

上述代码可以直接用一个小文本复制上去、然后看效果展示图(前提说好、我自己没做)

代码说明:

1、href="#"    里面填自己想链接到的页面(站内、站外均可);

2、style="background-color:#FF3030;" 控制文字下面背景的颜色;

3、文字的颜色的话可以看到14行处有一个 color#fff;

4、15行的line-height38px是控制文字背景的高度;

5、16行displayblock是控制外框;

6、17行和18行

width: 100%;

text-aligncenter;

是控制整个CSS的占宽百分比和文字的位置;

标签: WordPress侧边栏

评论:

跨境电商之家
2018-02-08 20:33
好文章不顶实在说不过去。。。
小白苗博客
2016-07-04 16:10
能看到效果是最好的,不过还是感谢分享
小编春熙:
2016-07-04 18:29
@小白苗博客:欢迎常来
懿古
2016-06-18 21:03
如果有一个具体的效果或效果图看可能会更好
小编春熙:
2016-06-18 23:12
@懿古:效果图 明月登楼的博客上面有
小C博客
2016-06-17 23:25
不错的分享!
小编春熙:
2016-06-18 14:27
@小C博客:感谢来访
怎样网
2016-06-17 21:38
应该是有阴影效果的吧~~
小编春熙:
2016-06-18 14:28
@怎样网:嗯嗯、很多wp博客都有用到
Koolight
2016-06-16 23:57
怎么没弄个预览图片啊?
小编春熙:
2016-06-17 11:56
@Koolight:代码直接复制粘贴就可以看到了
www.cy91.win
2016-06-16 21:43
不懂代码的表示就只能用插件和小工具
小编春熙:
2016-06-16 22:53
@www.cy91.win:小工具也是可以的

发表评论:


wmzz.png

Copyright © 2015

豫ICP备15008704号/广告合作/百度统计/sitemap/家人/春熙路正常运行

赞助:攀升兄弟旗舰店|伊芙丽官方旗舰店|袋鼠妈妈旗舰店|金丝玉帛旗舰店|颜域旗舰店|sf999发布网