css網頁設計中實用的技巧有哪些 css網頁設計中實用的技巧有

css網頁設計中實用的技巧有哪些 css網頁設計中實用的技巧有

日期:2023-03-09 16:31:48    编辑:网络投稿    来源:互联网

CSS網頁設計中實用的技巧  網頁設計不是請客吃飯,對必備技能的扎實掌控是你走向成功必由之路。下面小編來給大家分享CSS網頁設計中實用的技巧,希望對大家有幫助!  一、將

CSS網頁設計中實用的技巧

  網頁設計不是請客吃飯,對必備技能的扎實掌控是你走向成功必由之路。下面小編來給大家分享CSS網頁設計中實用的技巧,希望對大家有幫助!

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

  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代碼:

  nav ul li { display:inline;margin-right:10px;}

  nav ul li a {color:#000;display:block;float:left;padding:5px;}

  nav ul li a:hover {background:#eee;color:black;}

  }

  如果想選中的導航能高亮顯示,可以加上一段js代碼:

  提示:為了讓js能夠獲取到菜單的id取值,所以應該給html中的nav標簽添加一個id

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

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

【CSS網頁設計中實用的技巧】相關文章:

HTML CSS網頁設計中實用的技巧10-27

網頁設計中css怎么學習10-04

網頁設計css教學11-15

關于css框架網頁設計教程11-14

網頁設計中的小技巧12-02

網頁設計中的模糊技巧11-29

網頁設計中顏色的使用技巧11-27

網頁設計中字體應用的技巧11-22

網頁設計中圖片常用的技巧09-30