WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › 添加简单而实用的公告栏样式

添加简单而实用的公告栏样式

PCDotFan10年前

 

添加简单而实用的公告栏样式-WP酷

 

图上的样式你绝对见过,它不论是在新浪微博,还是在各大博客、论坛中都被广泛使用。话不多说,上代码……

 

加入至 Style.css:

/* 宽度、margin、position 这些属性都是可以更改的 */
#bigfa-tipBox {margin: 5px 0 0 2em;position:relative;width:400px;height:30px}
.bigfa {background-color: #FFFCEF;border: 1px solid #FFBB76;border-radius: 2px 2px 2px 2px;box-shadow: 0 0 3px #DDDDDD;color: #DB7C22;font-family: Microsoft Yahei;font-size: 12px;left: -2px;line-height: 16px;padding: 6px 10px 5px;position: absolute;}
.bigfa a {padding: 0 5px;}
.bigfa-arrow {font-family: simsun;font-size: 12px;font-style: normal;overflow: hidden;position: absolute;text-shadow: 0 0 2px #CCCCCC;}
.bigfa-arrow em, .bigfa-arrow i {font-style: normal;left: 0;position: absolute;top: 0;}
.bigfa-arrow em {color: #FFBB76;}
.bigfa-arrow i {color: #FFFCEF;text-shadow: none;}
.bigfa-arrow-top, .bigfa-arrow-bottom {height: 6px;left: 12px;margin-left: -6px;width: 12px;}
.bigfa-arrow-left, .bigfa-arrow-right {height: 12px;margin-top: -6px;top: 12px;width: 6px;}
.bigfa-arrow-top {top: -6px;}
.bigfa-arrow-top em {top: -1px;}
.bigfa-arrow-top i {top: 0;}
.bigfa-arrow-bottom {bottom: -6px;}
.bigfa-arrow-bottom em {top: -8px;}
.bigfa-arrow-bottom i {top: -9px;}
.bigfa-arrow-left {left: -6px;}
.bigfa-arrow-left em {left: 1px;}
.bigfa-arrow-left i {left: 2px;}
.bigfa-arrow-right {right: -6px;}
.bigfa-arrow-right em {left: -6px;}
.bigfa-arrow-right i {left: -7px;}

 

 

样式一

<div id="bigfa-tipBox">
<div class="bigfa">
<span class="bigfa-arrow bigfa-arrow-top"><em>◆</em><i>◆</i></span> 测试测试测试测试</div>
</div>
◆◆测试测试测试测试

 

样式二

<div id="bigfa-tipBox">
<div class="bigfa">
<span class="bigfa-arrow bigfa-arrow-bottom"><em>◆</em><i>◆</i></span> 测试测试</div>
</div>
◆◆测试测试

 

样式三

<div id="bigfa-tipBox">
<div class="bigfa">
<span class="bigfa-arrow bigfa-arrow-left"><em>◆</em><i>◆</i></span> 测试测试~</div>
</div>
◆◆测试测试~

 

样式四

<div id="bigfa-tipBox">
<div class="bigfa">
<span class="bigfa-arrow bigfa-arrow-right"><em>◆</em><i>◆</i></span> 测试测试</div>
</div>
◆◆测试测试
#tipbox#公告栏
1
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (9)
再想想
  • 蚊哥

    这个在大前段那里看过,后来弄到了自己就主题上,发现完全没感觉……

    10年前
    • WP酷

      @蚊哥 好像比较容易被无视……

      10年前
  • 菜鸟

    wp酷博主能不能看下这个站点的右栏目每日推荐是怎么实现的,求调教www.mumuwz.com

    10年前
    • WP酷

      @菜鸟 很抱歉这个凭我是无法实现的了……

      10年前
    • WP酷

      @WP酷 http://blog.wpjam.com/m/bxslider/ 我找到了一个和此效果差不多的插件,可以去试下

      10年前
  • wordpress主题下载

    div+css搞定,简单实用,不错!!!

    10年前
  • 慧客数码

    看不到效果啊

    9年前
    • WP酷

      @慧客数码 果然不应该用本站做演示……效果加上了,可能需要等等

      9年前
    • WP酷

      @WP酷 实际上您可以直接看看上面的截图,效果一致

      9年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
WordPress 当用户更新个人资料后发送邮件
8年前
CSS3动画 彩虹炫 – 让你的标签颜色呈现彩虹般效果
10年前
WordPress第一次评论禁止全英文/屏蔽日语垃圾评论
10年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1