分类
其他

制作伸缩上下篇文章导航

上下篇导航

就像大学时说过的,上课是写日志的好时机,现在变成,上班是写日志的好时机。其实我不知道这个上下篇文章导航是不是叫这个名字,也不知道大家知不知道,随缘吧。直接撸代码了。

分类
日志

制作固定定位的导航栏

固定的边栏或者导航栏貌似现在很流行,特别是边栏的广告位,老是跟着你走。这几天大修了一下主题,把顶部缩到只剩导航栏的位置,固定不动,考虑到边栏内容太小,于是边栏一起修改了,比导航栏稍微复杂一点。

效果:导航栏和边栏固定,不随页面滚动。CSS关键代码:

#header{
     width:825px;     //宽度需要确定
     position:fixed;     //固定定位
     z-index:999;     //解决某些情况下固定定位的内容被其他内容遮盖,值越大,表示放的位置越“上”
}

#sidebar{
     width:162px;
     position:fixed;
     margin-right:-411px;     //配合下一条right:50%,使边栏定位在页面之内,值应为网页主题宽度的一半
     right:50%
}
分类
日志

去掉无用的 WordPress 样式

今天查看源码是发现头部出现一条自动添加的inline样式,“.recentcomments a{display:inline !important;padding: 0 !important;margin: 0 !important;}”,如图所示:

去掉无用的Wordpress inline样式

起初以为是插件添加的,关闭所有插件后该东西依然存在。后来查到原来是WordPress自动添加的,recentcomments,应该就是为调用最新评论的边栏插件应用的样式,由于我没有使用自带的评论调用,所以这对于我来说就是无用的,于是就设法去掉它。

分类
其他

li 标签换行对样式的影响

昨天算是做了一个在线笔试,其中一题“使用 inline-block 实现一个图片列表,要求兼容A级浏览器(差距1px内)”,然后发现IE6和其他浏览器出现以下差距:

图片坏了…

分类
其他

清除浮动的一些方法

浮动的元素不在文档流占据空间,如下图所示,里面的方框分别左右浮动,容器并没有被撑开。IE6 除外,但也有需要清除的时候。

clearfloat_1

我说 IE6 除外只是因为此框框在 IE6 表现正常,并没受浮动影响,至于真相是什么,还有待考究。

HTML结构

<div id='container'>
	<div id='left'>填充文字</div>
	<div id='right'>填充文字</div>
</div>
分类
其他

单选、复选、文本框等表单元素与文字水平居中

为了找到真理,原文基于vertical-align的表单元素垂直对齐方式研究不厌其烦地进行测试,此精神值得我们学习。

而结论也非常简单,看真相:

CSS:
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle}
body{font-family:tahoma;font-size:12px}

HTML:
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>

解决实际问题的就是 CSS。

分类
日志

WordPress 模板 CSS 默认使用的类

WordPress 默认使用的用来来对图像的对齐和块元素的类:

.aligncenter,div.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignleft{float:left}
.alignright{float:right}
.wp-caption{background-color:#f3f3f3;border:1px solid #ddd;-khtml-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:10px;padding-top:4px;text-align:center}
.wp-caption img{border:0 none;margin:0;padding:0}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}

分类
其他

CSS3 变换小折腾

为了使用大部分 CSS3 特性,我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在,大部分浏览器只支持部分 CSS3 属性。而且不幸的是,一些属性甚至到最后都可能不被 W3C 推荐,所以通过指定浏览器专有属性,将他们与标准属性区分开来是很重要的(当他们是多余的的时候使用符合标准的样式将之覆盖)。

最常见的私有属性是用于 Webkit 核心浏览器的(比如, Safari), 它们以 -webkit- 开始,以及 Gecko 核心的浏览器(比如 Firefox),以 -moz- 开始,还有 Konqueror (-khtml-)、Opera (-o-) 以及 Internet Explorer (-ms-) 都有它们自己的属性扩展(目前只有 IE8 支持 -ms- 前缀)。

被 CSS3 的动感所吸引,下午折腾了一下,成果就像你现在用 Chrome 或者 Opera 浏览本博并用鼠标经过文章标题的效果一样(FireFox下并不理想)。
使用的 CSS 如下:

h2{
	-moz-transform: translate(0px, 0px);
	-moz-transition-duration:0.3s;
	-webkit-transform: translate(0px, 0px);
	-webkit-transition-duration:0.3s;
	-o-transform:translate(0px, 0px);
	-o-transition-duration:0.3s;
}

h2:hover{
	-moz-transform: translate(10px, 0px);
	-moz-transition-duration:0.3s;
	-webkit-transform: translate(10px, 0px);
	-webkit-transition-duration:0.3s;
	-o-transform:translate(10px, 0px);
	-o-transition-duration:0.3s;
}

CSS3 吸引人的当然不只这个,折腾人的是因为它还未成为标准,还有各种不同标准的浏览器…

分类
其他

解决 li 标签在 IE6 中的自动换行问题

想把博客侧栏的目录列表 li 自动换行,但是在 IE6 中,当 li 标签会出现文本换行问题,如下图所示:

white-space

而且在 IE8 的兼容视图也有同样的问题,所以我之前使用 _weight 定宽只能把 li 在 IE6 下整齐排列,但 IE7、8就不行。其实解决方法很简单,使用 white-space:nowrap; 就可以规定段落中的文本不进行换行:)

分类
其他

50 款简化 CSS 开发的实用工具和生成器

英文原稿:50 Useful Tools and Generators for Easy CSS Development | Speckyboy
翻译整理:50 款简化 CSS 开发的实用工具和生成器 | 芒果

本文所整理的工具按照以下类别归档:网格和布局,CSS 优化,CSS 菜单工具,CSS 按钮,CSS 圆角,CSS 框架,CSS Sprites,CSS 排版以及 CSS 表单。

网格和布局

The 1KB CSS Grid
新颖的 CSS 网格工具,可用于简化内容管理系统的页面模板,轻巧易用。

Variable Grid System
基于 960px 的常规网页布局,用于快速生成基本的 CSS 网格。

Grid Designer 2
可控性强,选项丰富的网格系统,支持 CSS 在线即时输出。

Design By Grid PNG Grid Generator
生成用于网格的 PNG 图片,以方便地用作 PSD 或 HTML/CSS 设计背景,免除手工制作网格的麻烦。