分类
其他

制作伸缩上下篇文章导航

上下篇导航

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

分类
日志

制作固定定位的导航栏

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

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

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

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

li 标签换行对样式的影响

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

图片坏了…

分类
其他

清除浮动的一些方法

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

clearfloat_1

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

HTML结构

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

模拟 input type=file 实现文件域在不同浏览器下的统一外观

原文地址:http://www.css88.com/archives/2256

表单中的 input type=”file” 在前端开发中经常会用到,但是很悲剧的是 input type=”file” 在各个浏览器下表现不统一,样式很难起作用。

input_type_file

通常我的设计师是非常爱美的,如果真的要还原设计稿,只能通过文本框和按钮去模拟一个 input type=”file”