<dfn id="w48us"></dfn><ul id="w48us"></ul>
  • <ul id="w48us"></ul>
  • <del id="w48us"></del>
    <ul id="w48us"></ul>
  • CSS教程之重置默認樣式與IE兼容圓角的解決方法

    時間:2024-07-18 18:23:53 CSS 我要投稿
    • 相關推薦

    CSS教程之重置默認樣式與IE兼容圓角的解決方法

      小編這里有一篇總結(jié)css reset以及IE兼容css教程3圓角的htc解決方法 ,屬于比較全面的文章,希望能對大家有所幫助。

      重置默認樣式

      最近看到一個詞叫css reset。什么叫做css reset呢?我理解為重置css,也就是重置默認樣式。我在中講到,一些標簽元素在HTML下有一個默認屬性值,我們在寫css頁面的時候,為了避免在css中重復定義它們,我們需要重置默認樣式(css reset)。每個人的用法和寫法都不一樣。找到一篇關于 可以看看國外使用css reset的比例調(diào)查。

      接下來我也查看了國內(nèi)的兩個網(wǎng)站,用Firebug按F12看看他們的css reset怎么寫的?

      淘寶():

      html {

      overflow-x:auto;

      overflow-y:scroll;

      }

      body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {

      font-weight:400;

      margin:0;

      padding:0;

      }

      h1, h2, h3, h4, h4, h5 {

      margin:0;

      padding:0;

      }

      body {

      background-color:#FFFFFF;

      color:#666666;

      font-family:Helvetica,Arial,sans-serif;

      font-size:12px;

      padding:0 10px;

      text-align:left;

      }

      select {

      font-size:12px;

      }

      table {

      border-collapse:collapse;

      }

      fieldset, img {

      border:0 none;

      }

      fieldset {

      margin:0;

      padding:0;

      }

      fieldset p {

      margin:0;

      padding:0 0 0 8px;

      }

      legend {

      display:none;

      }

      address, caption, em, strong, th, i {

      font-style:normal;

      font-weight:400;

      }

      table caption {

      margin-left:-1px;

      }

      hr {

      border-bottom:1px solid #FFFFFF;

      border-top:1px solid #E4E4E4;

      border-width:1px 0;

      clear:both;

      height:2px;

      margin:5px 0;

      overflow:hidden;

      }

      ol, ul {

      list-style-image:none;

      list-style-position:outside;

      list-style-type:none;

      }

      caption, th {

      text-align:left;

      }

      q:before, q:after, blockquote:before, blockquote:after {

      content:"";

      }

      百度有啊():(架構(gòu)基本上是模仿YUI來做的)

      body {

      font-family:arial,helvetica,sans-serif;

      font-size:13px;

      font-size-adjust:none;

      font-stretch:normal;

      font-style:normal;

      font-variant:normal;

      font-weight:normal;

      line-height:1.4;

      text-align:center;

      }

      body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {

      margin:0;

      padding:0;

      }

      h1, h2, h3, h4, h5, h6 {

      font-size:100%;

      font-weight:normal;

      }

      table {

      font-size:inherit;

      }

      input, select {

      font-family:arial,helvetica,clean,sans-serif;

      font-size:100%;

      font-size-adjust:none;

      font-stretch:normal;

      font-style:normal;

      font-variant:normal;

      font-weight:normal;

      line-height:normal;

      }

      button {

      overflow:visible;

      }

      th, em, strong, b, address, cite {

      font-style:normal;

      font-weight:normal;

      }

      li {

      list-style-image:none;

      list-style-position:outside;

      list-style-type:none;

      }

      img, fieldset {

      border:0 none;

      }

      ins {

      text-decoration:none;

      }

      在《超越css》一書中建議我們做網(wǎng)站開始重置所有默認樣式:

      /* Normalizes margin,padding */

      body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0;padding:0}

      /* Normalizes font-size for headers */

      h1,h2,h3,h4,h5,h6 { font-size:100%}

      /* Removes list-style from lists */

      ol,ul { list-style:none }

      /* Normalizes font-size and font-weight to normal */

      address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal }

      /* Removes list-style from lists */

      table { border-collapse:collapse; border-spacing:0 }

      /* Removes border from fieldset and img */

      fieldset,img { border:0 }

      /* Left-aligns text in caption and th */

      caption,th { text-align:left }

      /* Removes quotation marks from q */

      q:before,q:after { content:''}

      那我們實際寫代碼的時候該怎么來css reset呢?

      我個人推薦使用(和)的 css reset

      Eric Meyer's Reset:

      html, body, div, span, applet, object, iframe,

      h1, h2, h3, h4, h5, h6, p, blockquote, pre,

      a, abbr, acronym, address, big, cite, code,

      del, dfn, em, font, img, ins, kbd, q, s, samp,

      small, strike, strong, sub, sup, tt, var,

      b, u, i, center,

      dl, dt, dd, ol, ul, li,

      fieldset, form, label, legend,

      table, caption, tbody, tfoot, thead, tr, th, td {

      margin: 0;

      padding: 0;

      border: 0;

      outline: 0;

      font-size: 100%;

      vertical-align: baseline;

      background: transparent;

      }

      body {

      line-height: 1;

      }

      ol, ul {

      list-style: none;

      }

      blockquote, q {

      quotes: none;

      }

      blockquote:before, blockquote:after,

      q:before, q:after {

      content: '';

      content: none;

      }

      /* remember to define focus styles! */

      :focus {

      outline: 0;

      }

      /* remember to highlight inserts somehow! */

      ins {

      text-decoration: none;

      }

      del {

      text-decoration: line-through;

      }

      /* tables still need 'cellspacing="0"' in the markup */

      table {

      border-collapse: collapse;

      border-spacing: 0;

      }

      YUI:

      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;

      }

      table {

      border-collapse:collapse;

      border-spacing:0;

      }

      fieldset,img {

      border:0;

      }

      address,caption,cite,code,dfn,em,strong,th,var {

      font-style:normal;

      font-weight:normal;

      }

      ol,ul {

      list-style:none;

      }

      caption,th {

      text-align:left;

      }

      h1,h2,h3,h4,h5,h6 {

      font-size:100%;

      font-weight:normal;

      }

      q:before,q:after {

      content:'';

      }

      abbr,acronym { border:0;

      }

      結(jié)合他們的css reset寫法,再根據(jù)自己的實際情況,一定能寫出符合自己網(wǎng)站的完美的css reset。

      IE兼容css教程3圓角的htc解決方法

      現(xiàn)在css3的border-radius屬性可以很方便的實現(xiàn)圓角功能,對網(wǎng)站前臺人員無疑是一件喜事,但悲劇的是IE6/7/8并不支持,讓我們棄新技術(shù)不用,是不可能的,因此找到了一種解決的辦法--- IE利用VML矢量可標記語言作為畫筆繪出圓角:

      下載一個壓縮包ie-css3.htc,里面有一個微軟的腳本文件(11KB)和一個用來測試服務器是否有正確的Content-Type的 HTML文件,.htc 文件是IE內(nèi)核支持Web行為后用來描述此類行為的腳本文件。它們定義了一套方法和屬性,程序員幾乎可以把這些方法和屬性應用到HTML頁面上的任何元素 上去。Web 行為是非常偉大的因為它們允許程序員把自定義的功能“連接”到現(xiàn)有的元素和控件,而不是必須讓用戶下載二進制文件(例如ActiveX 控件)來完成這個功能。

      使用演示:

      1. .main{

      2. border: 2px solid #C0C0C0;

      3. -moz-border-radius: 10px;

      4. -webkit-border-radius: 10px;

      5. border-radius: 10px;

      6. position:relative;

      7. z-index:100;

      8. behavior: url(此處為ie-css3.htc文件的絕對路徑);

      9. }

      Webkit內(nèi)核的瀏覽器支持“-webkit-border-radius: 10px;”屬性(10px是圓角半徑),可以直接解析出圓角;Firefox瀏覽器支持“-moz-border-radius: 10px;”屬性,也是可以直接解析出圓角;IE系瀏覽器則需要加上“border-radius: 15px;”的屬性。注意:

      1、behavior的url里一定要填寫ie-css3.htc的絕對路徑,因為 IE瀏覽器找該文件是相對當前html文件路徑來找的,所以對于Wordpress等動態(tài)程序生成的頁面一定要填寫絕對路徑。

      2、一定要有定位屬性:position:relative;

      3、因為在IE瀏覽器下這些CSS3效果的實現(xiàn)是要借助于VML,由VML繪制圓角或是投影效果,所以還需要一個z-index屬性。z-index屬性最好設置得比較大,如2。

      4、如果在IE瀏覽器下某些模塊無法用此渲染,可以試著絕對定位相應的層,即加上“ width: 400px; height:400px;”屬性。

      5、radius屬性的10px是圓角半徑,還可以給兩個值如“border-radius: 10px 5px;”,這樣則左上角與右下角半徑為10px,右上角與左下角半徑為5px。也可以賦4個值,為“上 右 下 左”。

    【CSS教程之重置默認樣式與IE兼容圓角的解決方法】相關文章:

    CSS教程之盒模型04-01

    2017最新css樣式大全03-11

    CSS基礎教程之背景圖片04-01

    CSS-層疊樣式表基礎教程03-05

    AutoCAD版本及打印樣式不兼容怎么辦03-20

    IE瀏覽器默認HTML編輯器的設置方法03-29

    CAD中圓角及倒角的技巧03-31

    netgear默認無線密碼03-03

    CSS入門教程01-25

    主站蜘蛛池模板: 1000部精品久久久久久久久 | 99国产精品国产免费观看| 亚洲精品tv久久久久| 亚洲精品成人av在线| 精品国产第一国产综合精品| 无码人妻精品一区二区三区99不卡| 精品国产美女福利到在线不卡| 久久久精品人妻一区二区三区四| 日本精品久久久久久久久免费| 亚洲精品电影网| 久久99国产精品久久久| 国产精品免费福利久久| 日韩人妻精品一区二区三区视频| 精品亚洲成α人无码成α在线观看| 国产999精品久久久久久| 精品国产一区二区三区久久| 国语自产少妇精品视频蜜桃| 亚洲精品亚洲人成人网| 亚洲AV蜜桃永久无码精品| 国产精品无码一区二区在线| 亚洲精品一二区| 精品精品国产高清a毛片牛牛| 国产精品多p对白交换绿帽| 久久精品国产第一区二区三区 | 国产精品国产三级国产AV主播| 亚洲国产综合精品一区在线播放| 九九久久精品国产| 国内精品伊人久久久久影院对白| 国产精品igao视频| 国产精品部在线观看| 777欧美午夜精品影院| 亚洲欧美日韩精品永久在线| 国产精品亚洲午夜一区二区三区| 国产精品亲子乱子伦xxxx裸| 国精品无码一区二区三区在线| 四虎国产精品永久免费网址| 日产精品久久久久久久性色| 日韩精品国产另类专区| 久久久精品国产sm调教网站| 国内揄拍高清国内精品对白| 国产精品一区二区久久不卡|