15 07 27 HTML 樣式 格式與布局

2022-07-17 11:36:06 字數 879 閱讀 4084

格式與布局

流式布局:

float:left/right 向左流/向右流    

clera:both 截斷流

例如木頭放在水流上碰到牆,挨個停下,先流的先靠牆停下

元素並列

元素巢狀

定位布局:

position:fixed/absolute/relative;top right bottom left

三種定位方式的區別

②position:relative --相對位置(以元素本來應該在的位置為座標)

③position:absolute --相對位置

外圍的元素中沒有position(absolute relative)樣式--以瀏覽器邊框為左邊

如果外圍中有position(absolute relative)樣式--以外圍離它最近的那個元素座標布局

《只有設定好position後,top right bottom left (上右下左)才能用》

④z-index --分層(值越大越靠上)在z軸方向分層,可以理解為分成一摞紙,層數越高越往上

附:overflow:hidden; --超出範圍時隱藏;scroll,超出範圍時出滾動條

a:hover -- 設定滑鼠指向鏈結時的形式(a為a標籤)

opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)  --透明效果為50%,三種方法可任選其一

display:none; 隱藏;block顯示 (隱藏會直接去除這個元素)

visibility:hidden; 隱藏;visible顯示(元素位置還在,內容隱藏)

border-radius:15px;  --圓角邊框,圓角大小為15畫素

©  --版權符號

HTML 格式與布局

一 position fixed 鎖定位置 相對於瀏覽器的位置 例如有些 的右下角的彈出視窗。二 position absolute 1.外層沒有position absolute 或relative 那麼div相對於瀏覽器定位,如下圖中b 距離瀏覽器右邊框為50畫素,距離下邊框為20畫素 2.外層...

HTML標籤與css樣式

html是一種超文字標記語言,不是程式語言 超文字指頁面可以包括 鏈結 程式等非文字元素。他的結構包括頭 主體 其中head部提供關於網頁的資訊,body部分提供網頁的具體內容。標籤 標題標籤 h 即 head 的簡寫 有像這種錯誤的標籤在展示時不起作用 2 段落標籤 p 即 paragraph 的...

HTML概念與基本格式

概念 是最基礎的網頁開發語言 標記語言 快速入門 hello world hello world 標籤學習 檔案標籤 構成html最基本的標籤 文字標籤 和文字有關的標籤 段落標籤 換行標籤 展示一條水平線 字型加粗 字型斜體 字型標籤 文字居中 屬性定義 4.列表標籤 有序列表 ol li 無序列...