分類目錄歸檔：網(wǎng)頁制作

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

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

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

id的命名:

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

容器: container

頁頭：header

內(nèi)容：content/container

頁面主體：main

頁尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

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

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

分享到豆瓣/QQ/開心網(wǎng)/人人網(wǎng)/百度/Google等代碼

由 發(fā)表于 ┊11,173 PV

推薦到豆瓣

1
<a rel="nofollow" class="fav_douban" href="javascript:void(function(){var%20d=document,e=encodeURIComponent,s1=window.getSelection,s2=d.getSelection,s3=d.selection,s=s1?s1():s2?s2():s3?s3.createRange().text:'',r='http://www.douban.com/recommend/?url='+e(d.location.href)+'&title='+e(d.title)+'&sel='+e(s)+'&v=1',x=function(){if(!window.open(r,'douban','toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330'))location.href=r+'&r=1'};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})()"></a>

或者用這個(gè)

1
<a rel="nofollow" class="fav_douban" href="javascript:window.open('http://www.douban.com/recommend/?url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title));void(0)">豆瓣</a>

收藏到QQ書簽

1
<a rel="nofollow" class="fav_qq" href="javascript:window.open('http://shuqian.qq.com/post?from=3&title='+encodeURIComponent(document.title)+'&uri='+encodeURIComponent(document.location.href)+'&jumpback=2&noui=1','favit','width=930,height=470,left=50,top=50,toolbar=no,menubar=no,location=no,scrollbars=yes,status=yes,resizable=yes');void(0)">QQ書簽</a>

轉(zhuǎn)貼到開心網(wǎng)

1
<a rel="nofollow" class="fav_kaixin" href="javascript:window.open('http://www.kaixin001.com/repaste/share.php?rtitle='+encodeURIComponent(document.title)+'&rurl='+encodeURIComponent(document.location.href)+'&rcontent=');void(0)">開心網(wǎng)</a>

分享到人人

1
<a rel="nofollow" class="fav_renren" href="javascript:window.open('http://share.renren.com/share/buttonshare.do?link='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title));void(0)">人人網(wǎng)</a>

添加到百度搜藏

1
<a rel="nofollow" class="fav_baidu" href="javascript:window.open('http://cang.baidu.com/do/add?it='+encodeURIComponent(document.title.substring(0,76))+'&iu='+encodeURIComponent(location.href)+'&fr=ien#nw=1','scrollbars=no,width=600,height=450,left=75,top=20,status=no,resizable=yes'); void 0">百度搜藏</a>

GOOGLE書簽

1
<a rel="nofollow" class="fav_google" href="javascript:window.open('http://www.google.com/bookmarks/mark?op=add&bkmk='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title));void(0)">Google</a>

GOOGLE Buzz

1
<a rel="nofollow" class="fav_buzz" href="javascript:window.open('http://www.google.com/reader/link?url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title)+'&srcURL=http://m.shyxfs.com');void(0)">Google Buzz</a>

分享到 Twitter

1
<a rel="nofollow" class="fav_twitter" href="javascript:window.open('http://twitter.com/home?status='+encodeURIComponent(document.location.href)+'&nbsp;'+encodeURIComponent(document.title));void(0)">Twitter</a>

分享到 Facebook

1
<a rel="nofollow" class="fav_facebook" href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(document.location.href)+'&t='+encodeURIComponent(document.title));void(0)">Facebook</a>

Delicious書簽

1
<a rel="nofollow" class="fav_delicious" href="javascript:window.open('http://del.icio.us/post?url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title)+'&notes=');void(0)">Delicious</a>

修正IE6不支持position:fixed的bug

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

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

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

本文所使用的技巧是用了一條Internet Explorer的CSS表達(dá)式(expression)。你不可以直接使用該表達(dá)式，因?yàn)樗赡軙?huì)因?yàn)榫彺娑桓隆＝鉀Q這一點(diǎn)的最簡單的方式是使用eval包裹你的語句。
如何解決“振動(dòng)”的問題？

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

仿走走分類信息的DEDECMS風(fēng)格

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

此站出售

1. 如果內(nèi)容頁要顯示游客，還要改include目錄下taglib目錄下的memberinfos.lib.php的文件：
在$revalue = ”;下加

1
2
3
if($mid == 0){
$revalue="游客";
}else{

2. 顯示正文摘要的話，要在分類信息模型中，添加body,另外為了適應(yīng)二手市場網(wǎng)，還加入了自定義字段，價(jià)格(price)

效果：
essc

簡潔純CSS的TAB

由 發(fā)表于 ┊2,884 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";
}
}
/*第三種形式 利用一個(gè)背景層定位*/
var m3={0:"",1:"評(píng)論內(nèi)容",2:"技術(shù)內(nèi)容",3:"點(diǎn)評(píng)內(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)">評(píng)論</li>
   <li onclick="setTab(0,2)">技術(shù)</li>
   <li onclick="setTab(0,3)">點(diǎn)評(píng)</li>
</ul>
<div class="main" ID="main0">
   <ul class="block"><li>新聞列表</li></ul>
   <ul><li>評(píng)論列表</li></ul>
   <ul><li>技術(shù)列表</li></ul>
   <ul><li>點(diǎn)評(píng)列表</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="#">評(píng)論</a></li>
    <li onmouseover="setTab(1,2)"><a href="#">技術(shù)</a></li>
    <li onmouseover="setTab(1,3)"><a href="#">點(diǎn)評(píng)</a></li>
   </ul>
</div>
<div class="main1box">
   <div class="main" ID="main1">
    <ul class="block"><li>新聞列表</li></ul>
    <ul><li>評(píng)論列表</li></ul>
    <ul><li>技術(shù)列表</li></ul>
    <ul><li>點(diǎn)評(píng)列表</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="#">評(píng)論</a></li>
    <li onmouseover="nowtab(2,2)"><a href="#">技術(shù)</a></li>
    <li onmouseover="nowtab(2,3)"><a href="#">點(diǎn)評(píng)</a></li>
   </ul>
</div>
   <div class="main" ID="main2">
新聞內(nèi)容
</div>
</div>
</body>
</html>

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

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

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

三種瀏覽器的識(shí)別問題：

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

首先火狐不識(shí)別任何特殊符號(hào)，但是識(shí)別!important;而IE6識(shí)別*和_，而IE7則識(shí)別*也識(shí)別!important;但是不識(shí)別_

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

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

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

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

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

這句display:inline很重要！！

這里牽扯到一個(gè)問題，因?yàn)镮E存在CSS向后繼承，而Firefox不支持，因此如果我們不對(duì)每個(gè)標(biāo)簽定義使用浮動(dòng)float屬性的話，在Firefox中就會(huì)出現(xiàn)DIV溢出。使排版混亂．

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

舉個(gè)例子來解決：

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

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

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

網(wǎng)頁上JS顯示建站日期

由 發(fā)表于 ┊1,845 PV
1
2
3
4
5
6
7
8
9
<b><font color="blue">本站已運(yùn)行<font color="red">
<script language=JavaScript>
var urodz= new Date("02/01/2008");
var now = new Date();
var ile = now.getTime() - urodz.getTime();
var dni = Math.floor(ile / (1000 * 60 * 60 * 24));
document.write(+dni)
</script>
</font>天</font></b>

IE與Firefox的CSS兼容大全

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

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

常見兼容問題：

1、DOCTYPE 影響 CSS 處理

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

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

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

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

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

7、cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以

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

網(wǎng)頁上JS顯示倒計(jì)時(shí)

由 發(fā)表于 ┊2,694 PV
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
<b><font color="blue">奧運(yùn)會(huì)開幕還有:</font>
<font color="red"><span id="timeDate">載入天數(shù)...</span><span id="times">載入秒數(shù)...</span>
<script type="text/javascript"><!--
var now = new Date();
function createtime(){

var grt= new Date("8/08/2008 20:00:00");

now.setTime(now.getTime()+250);
days = (grt - now) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
hours = (grt - now) / 1000 / 60 / 60 - (24 * dnum);
hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;}
minutes = (grt - now) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes);
if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (grt - now) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds);
if(String(snum).length ==1 ){snum = "0" + snum;}

document.getElementById("timeDate").innerHTML = dnum+"天";
document.getElementById("times").innerHTML = hnum + ":" + mnum + ":" + snum;
}

setInterval("createtime()",250);
// --></script>
</font></b>