标签归档：CSS

常用的css命名规则

由 发表于 ┊1,720 PV

注释的写法:
/* Footer */
内容区
/* End Footer */

id的命名:

(1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center
继续阅读 →

修正IE6不支持position:fixed的bug

由 发表于 ┊1,685 PV

众所周知IE6不支持position:fixed，这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己的博客模板的时候，遇到了这个问题。当时就简单的无视了IE6——尽管有几个使用IE6的朋友，一起BS我……但是对于大项目或商业网站，如果有用到这个属性的时候，是不可能直接无视的。

你是如何让position:fixed在IE6中工作的？

本文所使用的技巧是用了一条Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式，因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval包裹你的语句。
如何解决“振动”的问题？

显然IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重画页面，这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“跳动”。
继续阅读 →

rin-wendy.com情侣模板的制作思路(一)

由 发表于 ┊4,297 PV

这个网站的布局很特别，首页是三栏，左右不同的颜色，文章页根据不同的作者显示不同的颜色，页面又是一种风格。

1. 首先区分页面，首页，作者A和作者B。

1
2
3
4
5
6
7
8
9
10
11
12
<?php if (is_page())  {
    $style_item = 'page';
} elseif (is_single()) {
    if ($post->post_author == '1') {
        $style_item = 'left';
    }
    elseif ($post->post_author == '2') {
        $style_item = 'right';
    }
} else {
    $style_item = 'normal';
} ?>

把定义的$style_item加在DIV框架内，以方便用CSS控制显示。

1
< div id="page" class="wrap-<?php echo($style_item); ?>">

继续阅读 →

简洁纯CSS的TAB

由 发表于 ┊2,857 PV

前几天为做江阴印刷网的侧边TAB，找到了下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style TYPE="text/css">
<!--
body,div,ul,li{
margin:0 auto;
padding:0;
}
body{
font:12px "宋体";
text-align:center;
}
a:link{
color:#00F;
text-decoration:none;
}
a:visited {
color: #00F;
text-decoration:none;
}
a:hover {
color: #c00;
text-decoration:underline;
}
ul{
list-style:none;
}
.main{
clear:both;
padding:8px;
text-align:center;
}
/*第一种形式*/
#tabs0 {
height: 200px;
width: 400px;
border: 1px solid #cbcbcb;
background-color: #f2f6fb;
}
.menu0{
width: 400px;
}
.menu0 li{
display:block;
float: left;
padding: 4px 0;
width:100px;
text-align: center;
cursor:POINTER;
background: #FFFFff;
}
.menu0 li.hover{
background: #f2f6fb;
}
#main0 ul{
display: none;
}
#main0 ul.block{
display: block;
}
/*第二种形式*/
#tabs1{
text-align:left;
width:400px;
}
.menu1box{
position:relative;
overflow:hidden;
height:22px;
width:400px;
text-align:left;
}
#menu1{
position:absolute;
top:0;
left:0;
z-index:1;
}
#menu1 li{
float:left;
display:block;
cursor:POINTER;
width:72px;
text-align:center;
line-height:21px;
height:21px;
}
#menu1 li.hover{
background:#fff;
border-left:1px solid #333;
border-top:1px solid #333;
border-right:1px solid #333;
}
.main1box{
clear:both;
margin-top:-1px;
border:1px solid #333;
height:181px;
width:400px;
}
#main1 ul{
display: none;
}
#main1 ul.block{
display: block;
}
/*第三种形式*/
.menu2box{
position:relative;
overflow:hidden;
height:22px;
width:400px;
text-align:left;
background: #FFFFff;
}
#tabs2 {
height: 200px;
width: 400px;
border: 1px solid #cbcbcb;
background-color: #f2f6fb;
}
#tip2{
position:absolute;
top:0;
left:0;
height:22px;
line-height:22px;
z-index:0;
width:100px;
background: #f2f6fb;
}
#menu2{
position:absolute;
top:0;
left:0;
z-index:1;
}
#menu2 li{
display:block;
float: left;
padding: 4px 0;
width:100px;
text-align: center;
cursor:POINTER;
}
-->
</style>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
FUNCTION setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
FOR(i=0;i<tli.length;i++){
   tli[i].className=i==n?"hover":"";
   mli[i].style.display=i==n?"block":"none";
}
}
/*第三种形式 利用一个背景层定位*/
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
FUNCTION nowtab(m,n){
IF(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
document.getElementById("tip"+m).style.left=n*100+'px';
document.getElementById("main2").innerHTML=m3[n];
}
//-->
</script>
</head>
<body>
<br />
<br />
<!--第一种形式-->
<div ID="tabs0">
<ul class="menu0" ID="menu0">
   <li onclick="setTab(0,0)" class="hover">新闻</li>
   <li onclick="setTab(0,1)">评论</li>
   <li onclick="setTab(0,2)">技术</li>
   <li onclick="setTab(0,3)">点评</li>
</ul>
<div class="main" ID="main0">
   <ul class="block"><li>新闻列表</li></ul>
   <ul><li>评论列表</li></ul>
   <ul><li>技术列表</li></ul>
   <ul><li>点评列表</li></ul>
</div>
</div>
<br />
<br />
<!--第二种形式-->
<div ID="tabs1">
<div class="menu1box">
   <ul ID="menu1">
    <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
    <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
    <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
    <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>
   </ul>
</div>
<div class="main1box">
   <div class="main" ID="main1">
    <ul class="block"><li>新闻列表</li></ul>
    <ul><li>评论列表</li></ul>
    <ul><li>技术列表</li></ul>
    <ul><li>点评列表</li></ul>
   </div>
</div>
</div>
<br />
<br />
<!--第三种形式-->
<div ID="tabs2">
<div class="menu2box">
   <div ID="tip2"></div>
   <ul ID="menu2">
    <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
    <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
    <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
    <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
   </ul>
</div>
   <div class="main" ID="main2">
新闻内容
</div>
</div>
</body>
</html>

收藏自：http://kudrong.cn/article.asp?id=141

制作CMS型主题的实用代码

由 发表于 ┊4,388 PV

最近为了制作江阴印刷网的风格，找到了wordpress的一些实用的代码，分享下吧。

先看截图和演示：

首页是网站的favicon图标，用下面一句话，可以把favicon在风格里实现。

1
<link rel="shortcut icon" type="image/ico" href="<?php bloginfo('stylesheet_directory'); ?/>/images/favicon.ico" />

无插件调用最新文章的例表(20代表要调用的文章数)

1
<?php wp_get_archives('type=postbypost&limit=20'); ?>

继续阅读 →

关于IE6/IE7/Firefox的CSS的兼容性

由 发表于 ┊1,588 PV

三种浏览器的识别问题：

1
2
3
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

首先火狐不识别任何特殊符号，但是识别!important;而IE6识别*和_，而IE7则识别*也识别!important;但是不识别_

所以在出现IE7之前我们可以用!important;*来调整页面，但是IE7的出现却打乱了我们的方法！！

在大部分情况下，调整好火狐和IE7后，IE7不会出现太大的差距，一般情况下出现的问题就是

浮动ie产生的双倍距离

举一个网上大侠的例子：

1
2
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略}

这句display:inline很重要！！

这里牵扯到一个问题，因为IE存在CSS向后继承，而Firefox不支持，因此如果我们不对每个标签定义使用浮动float属性的话，在Firefox中就会出现DIV溢出。使排版混乱．

另外的问题就是margin属性的像素差问题.

举个例子来解决：

margin-left:30px!important;margin-left:28px;

由于!important;只有IE7和Firefox识别，因此会默认执行margin-left:30px，而IE6不识别!important;因此会执行margin-left:28px;这样，用相同的方法，我们就可以清除2px像素的差来达到无缝衔接．由于在使用margin 或padding 时，我们会发现padding所出现的差值问题要比margin少的多的多！因此我强烈建议大家能用padding的时候尽量不要使用margin，这样会减少很多麻烦．

收藏自：http://blog.edotpower.com/article.asp?id=35

IE与Firefox的CSS兼容大全

由 发表于 ┊1,909 PV

CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。

常见兼容问题：

1、DOCTYPE 影响 CSS 处理

2、FF：div 设置 margin-left， margin-right 为 auto 时已经居中，IE 不行

3、FF: body 设置 text-align 时， div 需要设置 margin: auto(主要是 margin-left，margin-right) 方可居中

4、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width

5、FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别设置样式

6、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

7、cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

8、FF: 链接加边框和背景色，需设置 display: block， 同时设置 float: left 保证不换行。参照 menubar， 给 a 和 menubar 设置高度是为了避免底边显示错位， 若不设 height， 可以在 menubar 中插入一个空格。
继续阅读 →