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

    時(shí)間:2024-07-18 18:23:53 CSS 我要投稿
    • 相關(guān)推薦

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

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

      重置默認(rèn)樣式

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

      接下來(lái)我也查看了國(guó)內(nèi)的兩個(gè)網(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來(lái)做的)

      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》一書(shū)中建議我們做網(wǎng)站開(kāi)始重置所有默認(rèn)樣式:

      /* 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:''}

      那我們實(shí)際寫代碼的時(shí)候該怎么來(lái)css reset呢?

      我個(gè)人推薦使用(和)的 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ù)自己的實(shí)際情況,一定能寫出符合自己網(wǎng)站的完美的css reset。

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

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

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

      使用演示:

      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文件的絕對(duì)路徑);

      9. }

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

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

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

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

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

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

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

    CSS教程之盒模型04-01

    2017最新css樣式大全03-11

    CSS基礎(chǔ)教程之背景圖片04-01

    CSS-層疊樣式表基礎(chǔ)教程03-05

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

    IE瀏覽器默認(rèn)HTML編輯器的設(shè)置方法03-29

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

    netgear默認(rèn)無(wú)線密碼03-03

    CSS入門教程01-25

    主站蜘蛛池模板: 久久er国产精品免费观看2| 国产成人久久久精品二区三区 | 国产成人亚洲精品| 国产亚洲精品免费视频播放| freesexvideos精品老师毛多| 久久久WWW成人免费精品| 色偷偷888欧美精品久久久| 人人妻人人澡人人爽人人精品| 精品久久久久久无码中文字幕| 国产精品成人免费福利| 无码国产精品一区二区免费模式| 精品无码三级在线观看视频| 国产99久久久国产精品~~牛| 国产精品久久久久久福利漫画| 久久精品人人做人人妻人人玩| 亚洲人精品午夜射精日韩| 久久亚洲国产精品123区| 国产精品爽爽ⅴa在线观看| 久久青草国产精品一区| 99热精品在线观看| 国产网红无码精品视频| 亚洲AV永久纯肉无码精品动漫| 少妇亚洲免费精品| 欧美ppypp精品一区二区| 精品亚洲欧美无人区乱码| 国产精品伦理久久久久久| 51国偷自产精品一区在线视频| 日本精品一区二区三区在线观看 | 国产精品夜色一区二区三区| 精品无码AV一区二区三区不卡| 亚洲精品午夜无码专区| 无码乱码观看精品久久| 日韩精品一区二区午夜成人版| 欧美成人精品欧美一级乱黄码| 久久精品国产国产精品四凭| 精品国产青草久久久久福利| 国产农村妇女毛片精品久久| 国产精品日韩深夜福利久久| 国产精品一区二区三区免费| 国产精品无码一区二区在线观一| 国产精品激情综合久久 |