標簽歸檔：CSS

常用的css命名規(guī)則

由 發(fā)表于 ┊1,756 PV

注釋的寫法:
/* Footer */
內(nèi)容區(qū)
/* End Footer */

id的命名:

(1)頁面結(jié)構(gòu)

容器: container

頁頭：header

內(nèi)容：content/container

頁面主體：main

頁尾：footer

導航：nav

側(cè)欄：sidebar

欄目：column

頁面外圍控制整體布局寬度：wrapper

左右中：left right center
繼續(xù)閱讀 →

修正IE6不支持position:fixed的bug

由 發(fā)表于 ┊1,721 PV

眾所周知IE6不支持position:fixed，這個bug與IE6的雙倍margin和不支持PNG透明等bug一樣臭名昭著。前些天我做自己的博客模板的時候，遇到了這個問題。當時就簡單的無視了IE6——盡管有幾個使用IE6的朋友，一起B(yǎng)S我……但是對于大項目或商業(yè)網(wǎng)站，如果有用到這個屬性的時候，是不可能直接無視的。

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

本文所使用的技巧是用了一條Internet Explorer的CSS表達式(expression)。你不可以直接使用該表達式，因為它可能會因為緩存而不更新。解決這一點的最簡單的方式是使用eval包裹你的語句。
如何解決“振動”的問題？

顯然IE有一個多步的渲染進程。當你滾動或調(diào)整你的瀏覽器大小的時候，它將重置所有內(nèi)容并重畫頁面，這個時候它就會重新處理css表達式。這會引起一個丑陋的“振動”bug，在此處固定位置的元素需要調(diào)整以跟上你的(頁面的)滾動，于是就會“跳動”。
繼續(xù)閱讀 →

rin-wendy.com情侶模板的制作思路(二)

由 發(fā)表于 ┊7,351 PV

上一篇分析的是情侶模板的基本布局，接下來就是評論部分。主要是判斷非作者、作者A和作者B，還有奇偶的問題。

1. 修改comments.php，在wp_list_comments代碼那加上&callback=my_comment。

1
<?php wp_list_comments('type=comment&callback=my_comment'); ?>

繼續(xù)閱讀 →

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

由 發(fā)表于 ┊4,340 PV

這個網(wǎng)站的布局很特別，首頁是三欄，左右不同的顏色，文章頁根據(jù)不同的作者顯示不同的顏色，頁面又是一種風格。

1. 首先區(qū)分頁面，首頁，作者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框架內(nèi)，以方便用CSS控制顯示。

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

繼續(xù)閱讀 →

簡潔純CSS的TAB

由 發(fā)表于 ┊2,865 PV

前幾天為做江陰印刷網(wǎng)的側(cè)邊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:"評論內(nèi)容",2:"技術(shù)內(nèi)容",3:"點評內(nèi)容"}
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)">技術(shù)</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>技術(shù)列表</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="#">技術(shù)</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>技術(shù)列表</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="#">技術(shù)</a></li>
    <li onmouseover="nowtab(2,3)"><a href="#">點評</a></li>
   </ul>
</div>
   <div class="main" ID="main2">
新聞內(nèi)容
</div>
</div>
</body>
</html>

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

制作CMS型主題的實用代碼

由 發(fā)表于 ┊4,431 PV

最近為了制作江陰印刷網(wǎng)的風格，找到了wordpress的一些實用的代碼，分享下吧。

先看截圖和演示：

首頁是網(wǎng)站的favicon圖標，用下面一句話，可以把favicon在風格里實現(xiàn)。

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

無插件調(diào)用最新文章的例表(20代表要調(diào)用的文章數(shù))

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

繼續(xù)閱讀 →

關(guān)于IE6/IE7/Firefox的CSS的兼容性

由 發(fā)表于 ┊1,620 PV

三種瀏覽器的識別問題：

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

首先火狐不識別任何特殊符號，但是識別!important;而IE6識別*和_，而IE7則識別*也識別!important;但是不識別_

所以在出現(xiàn)IE7之前我們可以用!important;*來調(diào)整頁面，但是IE7的出現(xiàn)卻打亂了我們的方法！！

在大部分情況下，調(diào)整好火狐和IE7后，IE7不會出現(xiàn)太大的差距，一般情況下出現(xiàn)的問題就是

浮動ie產(chǎn)生的雙倍距離

舉一個網(wǎng)上大俠的例子：

1
2
#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會產(chǎn)生200px的距離
display:inline; //使浮動忽略}

這句display:inline很重要！！

這里牽扯到一個問題，因為IE存在CSS向后繼承，而Firefox不支持，因此如果我們不對每個標簽定義使用浮動float屬性的話，在Firefox中就會出現(xiàn)DIV溢出。使排版混亂．

另外的問題就是margin屬性的像素差問題.

舉個例子來解決：

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

由于!important;只有IE7和Firefox識別，因此會默認執(zhí)行margin-left:30px，而IE6不識別!important;因此會執(zhí)行margin-left:28px;這樣，用相同的方法，我們就可以清除2px像素的差來達到無縫銜接．由于在使用margin 或padding 時，我們會發(fā)現(xiàn)padding所出現(xiàn)的差值問題要比margin少的多的多！因此我強烈建議大家能用padding的時候盡量不要使用margin，這樣會減少很多麻煩．

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

IE與Firefox的CSS兼容大全

由 發(fā)表于 ┊1,941 PV

CSS對瀏覽器器的兼容性具有很高的價值，通常情況下IE和Firefox存在很大的解析差異，這里介紹一下兼容要點。

常見兼容問題：

1、DOCTYPE 影響 CSS 處理

2、FF：div 設(shè)置 margin-left， margin-right 為 auto 時已經(jīng)居中，IE 不行

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

4、FF: 設(shè)置 padding 后， div 會增加 height 和 width， 但 IE 不會， 故需要用 !important 多設(shè)一個 height 和 width

5、FF: 支持 !important， IE 則忽略， 可用 !important 為 FF 特別設(shè)置樣式

6、div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內(nèi)容不要換行

7、cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以

8、FF: 鏈接加邊框和背景色，需設(shè)置 display: block， 同時設(shè)置 float: left 保證不換行。參照 menubar， 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯位， 若不設(shè) height， 可以在 menubar 中插入一個空格。
繼續(xù)閱讀 →