CSS Category
左侧固定宽度，右侧自适应宽度的CSS布局
By: zerty on: Aug 20,2008 In: CSS一边固定宽度，另一边根据浏览器窗口大小自动缩放宽度是这种很常用的布局。特别是在BS项目的界面设计中，几乎都会用到。BI上有高手专门讨论了这种布局方法，但他用了较多的hack，还回避了IE6的dtd。我在实际使用中，发现回避掉IE6的dtd定义后，会导致ajax模态框无法居中（VS的一个控件，自动生成的代码，很难修改）。 于是自己写了个简单的左右两列的布局，没用到什么hack，很简单，只是练手用用。
css代码：left和right都贴住左侧。设置left在right上面(z-index)；在right内加个放内容的层(content)；设置content距离right的左侧为200px，即刚巧等于left的宽度。
* {margin:0; padding:0; list-style:none; }
.wrapper {width: 100%; }
.left {width:200px;background:#fcc; position:absolute; left:0 ;z-index:1 }
.right {width:100%;background:#ccc; position:absolute;left:0}
.content {margin-left:200px;background:#ffc; }
完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {margin:0; padding:0; list-style:none; }
.wrapper {width: 100%; }
.left {width:200px; background:#fcc; position:absolute; left:0 ;z-index:1 }
.right {width:100%; background:#ccc; position:absolute; left:0}
.content {margin-left:200px; background:#ffc; }
</style>
</head>
<body>
<div class="wrapper">
<div class="left">左侧固定宽度200px</div>
<div class="right">
[...]
- 2 Comments
- Tags: CSS
BS项目中的CSS架构
By: zerty on: Aug 7,2008 In: CSS先说下这套架构的优点：
1.可以方便的把繁重的CSS编写工作分配出去，而不会相互造成影响。
2.结构清晰，利于维护和修改。
3.每一张网页都仅加载自己需要的CSS。
总结下来就是：提高开发效率，提高维护效率，提高网页加载效率。
下面我解释一下上面这张CSS结构图：
图中间的5个黑色的图示表示网页，其中上面单独的一张是母版页，下面四张是子页。使用VS的人都知道母版页的作用，相当于asp中的include，把共通的部分作成母版，单独的部分作成子页，提高开发效率。
图上方绿色框内的是全局CSS部分，它们存放在styles文件夹中，由母版调用并作用到所有子页。
图上方蓝色虚线框是单一CSS部分，其中每一张子页都有对应的文件夹用来存放自己独有的CSS文件。它们存放在styles/x文件夹中。 由各自对应的C#文件控制：打开不同的子页时，母版加载当前页的CSS。
图左下角的红色框是主题部分，用来存放全局的样式和图片。作用和绿色框一样，只不过它是由子页加载的，并不是母版统一加载的。 这部分和绿色框合并也无大碍。
接下来我介绍一下那么多CSS文件都有什么用？
—Adm/styles
——Basic.css 全局基础样式
——Layout.css 全局布局样式 （尺寸，定位等）
——General.css 全局美观样式 （颜色，图片等）
—Adm/styles/GroupManager 文件夹（例子）
——Group_Layout.css group页特有的布局样式
——Group_General.css group页特有的美观样式
调用这么多CSS会带来较多的服务器请求，下面附上解决办法。
- 0 Comments
- Tags: CSS
针对Firefox区分所有IE的hack
By: zerty on: Jul 14,2008 In: CSS*:lang(ja) .a {color:red !important;} //just for firefox
Firefox hack
*是通配符, 冒号后面跟的是lang伪类，IE（包括IE7）都不支持这个伪类。 注意要在html后面定义好语言，我这里定义的是ja（日文），中文的话是zh。
- 2 Comments
- Tags: CSS, hack
通过CSS捕捉页面中的所有单选框
By: zerty on: Jun 2,2008 In: CSS今天需要对一堆已经完成的页面进行表单部分CSS精简。 在精简过程中发现在firefox中单选框和复选框与label的位置始终无法同时垂直对齐。
类似的页面很多，手工对radio和checkbox分配不同的class进行设置显然很不明知。隐约记得CSS3中支持一种可以根据设置属性值来寻找元素的方法，于是就查了下资料。
这句可以捕捉到所有type=”radio”的元素。
input[type^="radio"] {margin-bottom:-3px}
类似的方法还有：
a[href$=".pdf"] {border：1px solid red} 捕捉所有pdf后缀的链接。
- 0 Comments
- Tags: CSS
About this blog
这个blog是用来记录我在工作学习中的一些经验和例子。主要是关于Javascript和CSS，希望能和大家多做交流~
yingjunjiu@126.com