- 相關(guān)推薦
HTMLCSS十條網(wǎng)頁設(shè)計(jì)中實(shí)用的技巧
web開發(fā)。不管是在工作還是在學(xué)習(xí)中，掌握一些實(shí)用的開發(fā)小技巧，你的效率都會(huì)大大提升哦！下面就來和小編一起看看HTMLCSS十條網(wǎng)頁設(shè)計(jì)中實(shí)用的技巧吧。
一、將填充和邊距都設(shè)置為零
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
也有使用通配符*{padding:0;margin:0;}網(wǎng)站利弊端都各有其說法，對(duì)于*號(hào)這種，是把所有元素的內(nèi)外邊距都設(shè)置為了0，可能有些會(huì)出現(xiàn)些小細(xì)節(jié)的問題，所以選擇你適用的方案吧
二、重置瀏覽器的字體大小
body {
font:12px "宋體", Arial, Helvetica, sans-serif;
color: #000;
}
不保證所有的用于都安裝有你設(shè)置的字體，所以通常會(huì)在后面加上幾個(gè)通用的web安全字體
三、元素/標(biāo)簽選擇器
h1,h2,h3,h4,h5,h6 { font-size:100%;font-weight:normal;}
table{border-collapse:collapse; border-spacing:0;}
img{ border:0;}
ol,ul{list-style:none; }
p{word-wrap:break-word}
四、站點(diǎn)鏈接
站點(diǎn)鏈接的樣式必須保持此順序，包括用于創(chuàng)建懸停效果的選擇器組在內(nèi)
a:link{
color: #42413C;
text-decoration: none;
}
a:visited{
color: #6E6C64;
}
a:hover, a:active, a:focus {
text-decoration: underline;
}
五、設(shè)置水平居中
1）固定寬度 大多數(shù)的網(wǎng)站目前都是固定寬度的代碼如下：
#container{ width:1000px;margin: 0 auto;}
2）如果是用百分百來定義寬度的話，可以這樣使用：
#container {
width: 80%;
max-width: 1260px; /* 最大寬度，IE6 不遵循max-width、min-width 此聲明。 */
min-width: 780px; /* 最小寬度 */
margin: 0 auto; /* 如果將 #container 寬度設(shè)置為 100%，則不需要此設(shè)置。 */
}
六、可以重復(fù)利用的規(guī)則
.left{float: left;}
.right{float: right;}
七、在同一元素上使用多種類
加粗的紅色字體，使用了兩種類
CSS代碼：
.red{color: red;}
.bold{font-weight: bold;}
Html代碼：
同一元素使用兩種類
八、隱藏水平滾動(dòng)條
為了避免出現(xiàn)水平滾動(dòng)條，在body里加入overflow-x:hidden
body{overflow-x:hidden}
九、解決IE6 的浮動(dòng)元素的雙倍邊距問題
對(duì)一個(gè)div設(shè)置了float:left和 margin-left:100px 那么在IE6中，這個(gè)bug就會(huì)出現(xiàn)。您只需要多設(shè)置一個(gè)display即可，代碼如下：
div {float:left;margin:40px;display:inline;}
IE6下圖片也會(huì)產(chǎn)生3像素的空白距離，也用到display
img{display:block}
十、簡(jiǎn)單的導(dǎo)航菜單
用html5 css3 的新語義標(biāo)簽來寫一下這段導(dǎo)航菜單代碼
html代碼：
網(wǎng)站首頁
個(gè)人博客模板
慢生活
CSS代碼：
navulli{ display:inline;margin-right:10px;}
navulli a {color:#000;display:block;float:left;padding:5px;}
navullia:hover{background:#eee;color:black;}
}
如果想選中的導(dǎo)航能高亮顯示，可以加上一段js代碼：
varobj=null;
varAs=document.getElementById('nav').getElementsByTagName('a');
obj=As[0];
for(i=1;i=0)
obj=As[i];}
obj.id='nav_current'
提示：為了讓js能夠獲取到菜單的id取值，所以應(yīng)該給html中的nav標(biāo)簽添加一個(gè)id
高亮顯示的樣式nav_current也應(yīng)該在css中寫上一段代碼，比如：
#nav_current{background:#eee;color:red;}
【HTMLCSS網(wǎng)頁設(shè)計(jì)中技巧】相關(guān)文章：
網(wǎng)頁設(shè)計(jì)中的模糊技巧10-13
網(wǎng)頁設(shè)計(jì)中圖片的使用技巧10-08
網(wǎng)頁設(shè)計(jì)中的圖片使用技巧08-28
網(wǎng)頁設(shè)計(jì)中圖片常用的技巧08-17
網(wǎng)頁設(shè)計(jì)中的常見模糊技巧08-24
CSS網(wǎng)頁設(shè)計(jì)中實(shí)用的技巧07-01