分享一款带尖角浮出 公告栏 样式
这里所说的带尖角浮出公告栏就是指本站Devework.com上面logo右侧的广告栏,这个广告栏是纯用css+html打造的,没有使用图片。该代码最初来自大前端,经过简单的改造Jeff 移植到了WordPress主题中。下面先给出演示地址先(当然,本站也算是一个演示地址):
带尖角浮出公告栏样式:演示地址
做这个带尖角浮出公告栏最核心的代码就是那个小尖角,大前端的是用◆字符来制作的,制作三角形也可以用这个原理。据我所知,制作三角形的话还可以直接用css(好像border属性+margin=0),当然也可以直接用图片。其实我认为用图片也没啥问题啊,用css做个三角形的代码占用空间比个用图片的都大,如果我将图片用cssscript合并,请求数几乎不增,总体还占用更少空间。啊啊……说多了,直接上代码了(源代码来自大前端,在这里提供本站使用的这个左侧角的代码):
Html部分:
<div class="poptip"> <span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span> Hi,又一个WordPress站点上线了!目前<br>是测试状态,欢迎各位反馈主题bug!来自Devework.com </div> |
---|
css部分:
.poptip{background:#FFFCEF;color: #DB7C22;float:left;position: relative;top:8px;left:40px;height: 35px;padding: 6px 10px 5px;font-size: 12px;border: solid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;} .poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;font-size: 12px;text-shadow:0 0 2px #ccc;} .poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;} .poptip-arrow em{color:#FFBB76;} .poptip-arrow i{color: #FFFCEF;} .poptip-arrow-left{left:-6px;height: 12px;width: 6px;top: 12px;margin-top:-6px;} .poptip-arrow-left em{left:1px;} .poptip-arrow-left i{left:2px;} |
---|
希望尖角居中显示,可以在.poptip-arrow这个span上加上style="left:50%"或者style="top:50%" 这个代码兼容IE6-10、Chrome、Firefox等基本上所有主流浏览器,所以不必担心其兼容性和实用性。
还是那句,需要根据具体情况修改相关代码,直接套用是不行的。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法