CSS網(wǎng)站布局實錄筆記-Part1

1. 偽類

:link ? ? ? ?a鏈接未被訪問的樣式

:hover ? ? 鼠標(biāo)移上的樣式

:active ? ? 被用戶點擊及被點擊釋放之間的樣式

:visited ? ? a鏈接對象被訪問后的樣式

:focus ? ? ? 對象成為輸入焦點時的樣式

:first-child ?第一個子對象樣式

:first ? ? ? ? ? 對于頁面的第一頁使用的樣式

2. 偽對象

:after ? ? ? ? ?設(shè)置某個對象之后的內(nèi)容

:first-letter ? 對象內(nèi)的第一個字符的樣式設(shè)置

:first-line ? ? ?對象內(nèi)第一行的樣式設(shè)置

:before ? ? ? ? 設(shè)置某個對象之前的內(nèi)容

3. !important語法

可以提升某一句樣式的重要性,使其優(yōu)先執(zhí)行這句語句

4. 一列固定寬度:給定具體寬度高度多少 px

一列寬度自適應(yīng):將寬度改為百分比值形式

一列固定寬度居中:使用margin:0 auto;

二列固定寬度:固定width,height, #left和#right都使用 float: left;

二列寬度自適應(yīng):width使用百分比,#left和#right都使用 float: left;

二列左欄固定寬度,右欄自適應(yīng):將左欄寬度設(shè)定為固定值和float: left, 右欄不設(shè)定任何寬度值,并且右欄不浮動即可。

二列固定寬度居中:設(shè)置外層div固定寬度為left+right和margin:0 auto ??jsfiddle.net/u020xbpa/

三列浮動中間列寬度自適應(yīng):左欄固定寬度居左,右欄固定寬度靠右,中間欄根據(jù)左右欄間距自動適應(yīng)

left和right使用絕對定位,left居左居上為0和right居右居上為0,center則只需要設(shè)定margin-left和margin-right

jsfiddle.net/u020xbpa/3/

高度自適應(yīng):一個對象的高度是否可以使用百分比顯示,取決于對象的父級對象。給html, body, left都設(shè)置height:100%;jsfiddle.net/u020xbpa/4/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,207評論 1 92
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,540評論 1 41
  • 本文為閱讀《Head First HTML 與 CSS》的css部分的讀書筆記,方便回顧書上的知識,另一篇為Hea...
    兼續(xù)閱讀 1,939評論 0 17
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進階之旅閱讀 16,923評論 32 459
  • 選擇qi:是表達式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,460評論 0 11

友情鏈接更多精彩內(nèi)容