CSS 描述網頁的布局和效果

2021-09-29 06:25:06 字數 1089 閱讀 4589

選擇器

舉例及性質

樣式類名選擇器

.***x 具有普遍性、通用性

id選擇器

#***x 具有唯一性,前提是標籤得有指定id

標籤選擇器

div a input…

組合選擇器

.***x #***x /.***x input

偽類選擇器

略復合選擇器

注:選擇器可以根據層級關係進行設定,也可以只作用於某一層級

響應式設計

性質核心

@media

前提適配移動端,增加乙個標籤+屬性即可實現

舉例@media mediatype and not only(media feature)

分類適用物件

screen

用於電腦、手機、平板的螢幕

print

印表機和列印預覽

speech

螢幕閱讀器

all用於所有的裝置

舉例height/width

max-height/max-width

min-height/min-width

device-height/device-width

color/max-color/min-color

max-device-height/max-device-width

min-device-height/min-device-width

常見布局細化h

分欄式 1:1 1:2:1

工頭 內容 版權i略

i略t下拉無底

口無序列布局,自適應 100%

國登入介面 水平、垂直居中布局

框左右布局

注:布局心法:做布局時只考慮布局,做內容時只考慮內容

box-shadow

a b c d e f

a水平方向陰影 右+ 左-

b垂直方向陰影 下+ 上-

c模糊半徑 >0

d陰影的距離 >0

e陰影的顏色 rgba、rgb、#

f內陰影 inset /**影 ourset(預設)

CSS 網頁布局

一些布局 行布局 多列布局 聖杯布局 雙飛翼布局 會使用到 html和css基礎 會使用div css進行排版 熟悉 float屬性 position屬性。1 經典的行布局 基礎的行布局 行布局自適應 行布局自適應限制最大寬 行布局垂直水平居中 container 水平與垂直居中 container...

CSS 網頁布局

頭部區域位於整個網頁的頂部,一般用於設定網頁的標題或者網頁的 logo 鏈結鏈結 鏈結 重置瀏覽器大小檢視效果。鏈結鏈結 鏈結學的不僅是技術,更學的不僅是技術,更是夢想!學的不僅是技術,更是夢想!學的不僅是技術,更是夢想!學的不僅是技術,更是學的不僅是技術,更是夢想 學的不僅是技術,更是夢想!學的不...

CSS網頁布局

本文作為個人筆記,內容大多從網上查閱 提到布局就不得不提一提標準文件流了 文件流指的是元素排版布局過程中,元素會自動從左往右,從上往下的流式排列。並最終窗體自上而下分成一行行,並在每行中從左至右的順序排放元素。標準流的微觀現像 1.空白摺疊現象 多個空格會被合併成乙個空格顯示到瀏覽器頁面中。img標...