分類目錄歸檔：網頁制作

常用的css命名規則

由 發表于 ┊1,756 PV

注釋的寫法:
/* Footer */
內容區
/* End Footer */

id的命名:

(1)頁面結構

容器: container

頁頭：header

內容：content/container

頁面主體：main

頁尾：footer

導航：nav

側欄：sidebar

欄目：column

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

左右中：left right center
繼續閱讀 →

分享到豆瓣/QQ/開心網/人人網/百度/Google等代碼

由 發表于 ┊11,099 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>

或者用這個

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>

轉貼到開心網

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)">開心網</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)">人人網</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://www.jssanhong.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

由 發表于 ┊1,721 PV

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

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

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

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

仿走走分類信息的DEDECMS風格

由 發表于 ┊2,538 PV

此站出售

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

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

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

效果：
essc

簡潔純CSS的TAB

由 發表于 ┊2,865 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

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

由 發表于 ┊1,620 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

網頁上JS顯示建站日期

由 發表于 ┊1,832 PV
1
2
3
4
5
6
7
8
9
<b><font color="blue">本站已運行<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兼容大全

由 發表于 ┊1,941 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 中插入一個空格。
繼續閱讀 →

網頁上JS顯示倒計時

由 發表于 ┊2,607 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">奧運會開幕還有:</font>
<font color="red"><span id="timeDate">載入天數...</span><span id="times">載入秒數...</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>