文章導航綠軟下載站軟件下載安卓資源蘋果資源專題

您當前所在位置:首頁網絡編程DIVCSS → DIV+CSS網頁布局常用的一些基礎知識整理

DIV+CSS網頁布局常用的一些基礎知識整理

時間:2020/2/4 23:28:56來源:IT貓撲網作者:網管聯盟我要評論(0)

CSS命名規范

一.文件命名規范

全局樣式:global.css;

框架布局:layout.css;

字體樣式:font.css;

鏈接樣式:link.css;

打印樣式:print.css;

二.常用類/ID命名規范

頁 眉:header

內 容:content

容 器:container

頁 腳:footer

版 權:copyright

導 航:menu

主導航:mainMenu

子導航:subMenu

標 志:logo

標 語:banner

標 題:title

側邊欄:sidebar

圖 標:Icon

注 釋:note

搜 索:search

按 鈕:btn

登 錄:login

鏈 接:link

信息框:manage

常用類的命名應盡量以常見英文單詞為準,做到通俗易懂,并在適當的地方加以注釋。對于二級類/ID命名,則采用組合書寫的模式,后一個單詞的首字母應大寫:諸如"搜索框"則應命名為"searchInput"、"搜索圖標"命名這"searchIcon"、"搜索按鈕"命名為"searchBtn"等等。

CSS書寫規范及方法

一. 常規書寫規范及方法

1. 選擇DOCTYPE:

XHTML 1.0 提供了三種DTD聲明可供選擇:

過渡的(Transitional):要求非常寬松的DTD,它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)。完整代碼如下:

XML/HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

嚴格的(Strict):要求嚴格的DTD,你不能使用任何表現層的標識和屬性,例如<br>。完整代碼如下:

XML/HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架的(Frameset):專門針對框架頁面設計使用的DTD,如果你的頁面中包含有框架,需要采用這種DTD。完整代碼如下:

XML/HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

理想情況當然是嚴格的DTD,但對于我們大多數剛接觸web標準的設計師來說,過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站,使用的也是過渡型DTD)。因為這種DTD還允許我們使用表現層的標識、元素和屬性,也比較容易通過W3C的代碼校驗。

關于DTD您可以參考:

https://www.w3school.com.cn/dtd/index.asp 

2. 指定語言及字符集:

為文檔指定語言:

XML/HTML代碼

<html xmlns="http://www.w3.org/1999/xhtml">

為了被瀏覽器正確解釋和通過W3C代碼校驗,所有的XHTML文檔都必須聲明它們所使用的編碼語言;如:

常用的語言定義:

XML/HTML代碼

<meta http-equiv="Content-Type" content="text/html; charset=utf-8&Prime; />

標準的XML文檔語言定義:

XML/HTML代碼

<?xml version="1.0&Prime; encoding=" utf-8&Prime;?>

針對老版本的瀏覽器的語言定義:

XML/HTML代碼

<meta http-equiv="Content-Language" content=" utf-8&Prime; />

為提高字符集,建議采用"utf-8"。

3. 調用樣式表:

外部樣式表調用:

頁面內嵌法:就是將樣式表直接寫在頁面代碼的head區。 如:

XML/HTML代碼

<style type="text/css"><!&ndash; body { background : white ; color : black ; } &ndash;> </style>

外部調用法:將樣式表寫在一個獨立的.css文件中,然后在頁面head區用類似以下代碼調用。

XML/HTML代碼

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

在符合web標準的設計中,推薦使用外部調用法,可以不修改頁面只修改.css文件而改變頁面的樣式。如果所有頁面都調用同一個樣式表文件,那么改一個樣式表文件,可以改變所有文件的樣式。

4、選用恰當的元素:

根據文檔的結構來選擇HTML元素,而不是根據HTML元素的樣式來選擇。例如,使用P元素來包含文字段落,而不是為了換行。如果在創建文檔時找不到適當的元素,則可以考慮使用通用的div 或者是span;

避免過渡使用div和span。少量、適當的使用div和span元素可以使文檔的結構更加清晰合理并且易于使用樣式;

盡可能少地使用標簽和結構嵌套,這樣不但可以使文檔結構清晰,同時也可以保持文件的小巧,在提高用戶下載速度的同時,也易于瀏覽器對文檔的解釋及呈視;

5、派生選擇器:

可以使用派生選擇器給一個元素里的子元素定義樣式,在簡化命名的同時也使結構更加的清晰化,如:

XML/HTML代碼

.mainMenu ul li {background:url(images/bg.gif;)}

關于選擇器,您可以參考:

https://www.w3school.com.cn/cssref/css_selectors.asp

關鍵詞標簽:Dreamweaver,網頁設計

相關閱讀 網頁設計中常用的19個Web安全字體網頁設計常用Javascript經典代碼Dreamweaver中數據庫路徑的使用網頁設計必須注意和掌握的幾個問題網頁設計中的各種分辨率下的標準尺寸5日精通CSS層疊樣式表之第二天

文章評論
發表評論

熱門文章 DIV+CSS網頁布局常用的一些基礎知識整理DIV+CSS網頁布局常用的一些基礎知識整理

相關軟件 adobe dreamweaver cc 2017簡體中文破解版 Adobe Dreamweaver CC 2017綠色精簡版 adobe dreamweaver cc 2017破解補丁 Adobe dreamweaver CC 2018漢化補丁 Adobe Dreamweaver CC 2019破解版 Adobe Dreamweaver CC 2019破解補丁 Adobe Dreamweaver cc 2020中文破解版 adobe dreamweaver cc2015破解補丁

人氣排行 DIV CSS完美兼容IE6/IE7/FF的通用方法CSS實例:list-style-type在IE與FF中奇怪的現象解析-CSS布局實例CSS實例:通過定義漸變邊框給圖片加陰影CSS常用技巧之一 禁止文字自動換行解決用CSS控制DIV居中失效的問題css div設置float后高度不能自動增加網頁頁面設計中CSS十大注意讓CSS兼容IE和Firefox的技巧集合

云南快乐10分开奖直播现场