CSS3 tooltips 浮动显示提示说明

[ 作者:笑傲江湖 发布于:2012年-5月-12日 15:24 星期六  分类:百 宝 箱 ]

  这个tooltips,一般是用在按钮、图标或者其他网页元素上,用来详细说明按钮或者图标用途什么的,或者其他什么附加内容需要给用户提示的。有了它,对浏览网页的用户来说无疑是更方便了,不过这个tips的样式是纯粹由CSS3打造,所以,IE6这样的老古董估计看起来会有所不同,同时,因为IE6不支持hover这个属性,所以还要借助jQuery来搞定。
  具体的HTML和CSS代码,请查看下面帧页面的源代码。鼠标移动到带下划线的文字上就能看见Tips了^_^


CSS3 ordered list styles 有序列表样式

[ 作者:笑傲江湖 发布于:2012年-5月-10日 13:27 星期四  分类:百 宝 箱 ]

  平常无序列表用的机会多点,也就是ul,偶然瞅见这个有序列表ol的样式,挺不错,不过是用CSS3定义的样式,IE6-8浏览的话就没那么好看了,不过也还好,就是圆角圆环什么的看不到,清一色的方块。这玩意用在排行榜还是相当不错的^_^
  具体的HTML和CSS代码我就不贴了,自己查看一下下面帧页面的源代码就一清二楚了。


jQuery plugin : jNiceIt 自定义样式 Form 及相关元素

[ 作者:笑傲江湖 发布于:2012年-5月-2日 18:19 星期三  分类:百 宝 箱 ]

  Form 相关元素有Button、Input、Checkbox、Radiobutton、FileUploadInput、Select、List、TextArea。这个jQuery的插件jNiceIt可以让你完全控制你的Form及其相关元素的样式,具体样式就看你能设计成什么样子了。所有样式都通过CSS样式表来定义和控制,同时,本插件支持Fixed和Fluid两种页面流。jNiceIt 自定义样式 Form 及相关元素

jQuery_Plugin_jNiceIt.rar
62.81KB


jQuery plugin : Selectyze 自定义样式的 Select 下拉选择框

[ 作者:笑傲江湖 发布于:2012年-4月-30日 13:23 星期一  分类:百 宝 箱 ]

Selectyze : SKIN YOUR OWN SELECT LISTS WITH JQUERY & CSS
  折腾网页的筒子们,基本都知道表单里有几个顽固分子,Select下拉选择框、Radio单选按钮、Checkbox复选框,这三个东东无法用样式表来直接定义它们的样式,比如下拉框弹出列表的高度,下拉框的皮肤,单选按钮和复选框的皮肤。现在可以通过jQuery再加上CSS来美化他们了。本文仅仅介绍的是美化Select下拉选择框,Radio和Checkbox也有相关的jQuery插件可以搞定,且听下回分解。 jQuery plugin : Selectyze 自定义样式的 Select 下拉选择框

jQuery_Selectyze_v1.1.rar
47.25KB


jQuery : Write less , Do more 初步学习

[ 作者:笑傲江湖 发布于:2012年-4月-15日 15:08 星期日  分类:百 宝 箱 ]

  jQuery 早就用到了,基本折腾网站的人应该都有所了解,很多网页上的特效都和它有关。只是之前都是用别人现成的东西,拿来自己配置换换样式而已,没有认真的去研究学习一下。前阵子做项目,个别搞不定的地方,可用jQuery搞定,于是乎又勾起了俺的好奇心,研究一下jQuery到底是个啥,能干什么。于是乎官网去瞅瞅,然后Google一些中文的资料和教程,花了几天时间从头到尾彻底的了解了个大概。本身俺是对编程写代码有恐惧的,什么变量,运算,条件,循环,事件,方法,属性,不出半小时俺就被它们弄奔溃了。所以这次是硬着头皮啃完,也仅仅是想在自己需要的时候,能知道怎么用jQuery来解决一些小问题。想一下子吃成胖子那是不现实的,只能慢慢积累了,下面就是俺啃完之后的一点小小的总结。 jQuery : Write less , Do more 初步学习


些许 CSS 样式表的问题总结

[ 作者:笑傲江湖 发布于:2012年-4月-13日 21:20 星期五  分类:百 宝 箱 ]

  前阵子做项目,忙碌了一个半月多,早十点到晚十点,最后几天还整了个通宵,岁月催人老啊,熬夜大不如前,不服不行啊。
  项目完工,小小总结一下碰到的个别问题,基本都是CSS样式表相关的。
1、div元素的 overflow:hidden 在 IE6 中失效,需要 position:relative,IE7、8没有问题。
2、form 嵌套,会导致两个 form 之间的元素重复出现,嵌套这种情况一般不会出现,主要是页面中有include包含其他文件,导致嵌套了,见下面代码:
<form>
 <!-- 其他代码 -->
  <form>
    <!-- 其他代码 -->
  </form><!-- 这个form是include进来的 -->
 <div>这个元素可能会被重复显示</div>
</form>