HTMLCSS網頁設計中技巧

時間：2025-11-11 04:37:08 網頁設計

HTMLCSS十條網頁設計中實用的技巧

　　web開發。不管是在工作還是在學習中，掌握一些實用的開發小技巧，你的效率都會大大提升哦！下面就來和小編一起看看HTMLCSS十條網頁設計中實用的技巧吧。

　　一、將填充和邊距都設置為零

　　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;}網站利弊端都各有其說法，對于*號這種，是把所有元素的內外邊距都設置為了0，可能有些會出現些小細節的問題，所以選擇你適用的方案吧

　　二、重置瀏覽器的字體大小

　　body {

　　font:12px "宋體", Arial, Helvetica, sans-serif;

　　color: #000;

　　}

　　不保證所有的用于都安裝有你設置的字體，所以通常會在后面加上幾個通用的web安全字體

　　三、元素/標簽選擇器

　　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}

　　四、站點鏈接

　　站點鏈接的樣式必須保持此順序，包括用于創建懸停效果的選擇器組在內

　　a:link{

　　color: #42413C;

　　text-decoration: none;

　　}

　　a:visited{

　　color: #6E6C64;

　　}

　　a:hover, a:active, a:focus {

　　text-decoration: underline;

　　}

　　五、設置水平居中

　　1）固定寬度大多數的網站目前都是固定寬度的代碼如下：

　　#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 寬度設置為 100%，則不需要此設置。 */

　　}

　　六、可以重復利用的規則

　　.left{float: left;}

　　.right{float: right;}

　　七、在同一元素上使用多種類

　　加粗的紅色字體，使用了兩種類

　　CSS代碼：

　　.red{color: red;}

　　.bold{font-weight: bold;}

　　Html代碼：

　　同一元素使用兩種類

　　八、隱藏水平滾動條

　　為了避免出現水平滾動條，在body里加入overflow-x:hidden

　　body{overflow-x:hidden}

　　九、解決IE6 的浮動元素的雙倍邊距問題

　　對一個div設置了float:left和 margin-left:100px 那么在IE6中，這個bug就會出現。您只需要多設置一個display即可，代碼如下：

　　div {float:left;margin:40px;display:inline;}

　　IE6下圖片也會產生3像素的空白距離，也用到display

　　img{display:block}

　　十、簡單的導航菜單

　　用html5 css3 的新語義標簽來寫一下這段導航菜單代碼

　　html代碼：

　　網站首頁

　　個人博客模板

　　慢生活

　　CSS代碼：

　　navulli{ display:inline;margin-right:10px;}

　　navulli a {color:#000;display:block;float:left;padding:5px;}

　　navullia:hover{background:#eee;color:black;}

　　}

　　如果想選中的導航能高亮顯示，可以加上一段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取值，所以應該給html中的nav標簽添加一個id

　　高亮顯示的樣式nav_current也應該在css中寫上一段代碼，比如：

　　#nav_current{background:#eee;color:red;}

【HTMLCSS網頁設計中技巧】相關文章：