首頁 web前端 H5教程 html/css应用的方法

html/css应用的方法

May 17, 2016 am 09:08 AM

  

  html/css应用的方法

  1、制作透明效果

  opacity:0.7;

  filter:alpha(opacity=70);


  2、清除浮层的另外方法

  .clearfix:after {

  content:".";

  display:block;

  height:0;

  clear:both;

  visibility:hidden;

  }

  .clearfix{

  display:inline-block;

  }

  * html .clearfix {height:1%;}

  .clearfix {display:block;}


  3、div 块级元素分隔符

  span 行内元素分的区域隔符

  当页面内标签无法满足设计需要时,才会适当添加div和span等无语义标签来 辅助实现。


  4、标签语义化:

  搜索引擎看不到视觉效果,看到的只是代码,只能通过标签来判断内容的语义。


  5、语义化标签应注意的一些问题:

  • 尽可能少用无语义标签div和span;
  • 不要使用纯样式标签,例如b、font和u等,改用css设置。语义上需要强调的文本可以在strong或em标签里

  DTD:文档类型定义(标准模式和怪异模式)

  标准模式:浏览器根据规范表现页面。

  怪异模式:通常模拟老式浏览器的行为以防止老站点无法工作。(width包含padding和border的宽度,margin:auto;无法正常工作)

  如果漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中(包含IE6\IE7\IE8)就会触发怪异模式。


  6、CSS reset:通过重新定义标签的样式,“覆盖”掉浏览器提供的默认样式


  7、模块化CSS

  模块与模块之间尽量不要包含相同的部分,如果有相同部分,应将它们提取出来,拆分成一个独立的模块。

  模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性。


  8、CSS命名

  驼峰命名法用于区分不同单词,划线用于表明从属。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何將音頻添加到我的HTML5網站上? 如何將音頻添加到我的HTML5網站上? Mar 10, 2025 pm 03:01 PM

如何將音頻添加到我的HTML5網站上?

如何使用視口元標記來控制移動設備上的頁面縮放? 如何使用視口元標記來控制移動設備上的頁面縮放? Mar 13, 2025 pm 08:00 PM

如何使用視口元標記來控制移動設備上的頁面縮放?

如何使用HTML5頁面可見性API檢測頁面何時可見? 如何使用HTML5頁面可見性API檢測頁面何時可見? Mar 13, 2025 pm 07:51 PM

如何使用HTML5頁面可見性API檢測頁面何時可見?

如何使用地理位置API處理用戶位置隱私和權限? 如何使用地理位置API處理用戶位置隱私和權限? Mar 18, 2025 pm 02:16 PM

如何使用地理位置API處理用戶位置隱私和權限?

如何將HTML5表單用於用戶輸入? 如何將HTML5表單用於用戶輸入? Mar 10, 2025 pm 02:59 PM

如何將HTML5表單用於用戶輸入?

如何使用HTML5和JavaScript創建互動遊戲? 如何使用HTML5和JavaScript創建互動遊戲? Mar 10, 2025 pm 06:34 PM

如何使用HTML5和JavaScript創建互動遊戲?

如何使用HTML5通知API顯示桌面通知? 如何使用HTML5通知API顯示桌面通知? Mar 13, 2025 pm 07:57 PM

如何使用HTML5通知API顯示桌面通知?

如何使用HTML5 Websockets API進行客戶端和服務器之間的雙向通信? 如何使用HTML5 Websockets API進行客戶端和服務器之間的雙向通信? Mar 12, 2025 pm 03:20 PM

如何使用HTML5 Websockets API進行客戶端和服務器之間的雙向通信?

See all articles