WEB前端學習日誌第二週 Day3

2021-10-04 10:11:16 字數 1082 閱讀 1814

1:空白空間的處理

white-space:;

pre 空白會被瀏覽器保留。其行為方式類似 html 中的 pre 標籤。

pre-wrap 保留空白符序列,但是正常地進行換行。

pre-line 合併空白符序列,但是保留換行符。

inherit 規定應該從父元素繼承 white-space 屬性的值。

nowrap 文字不會換行,文字會在在同一行上繼續,直到遇到

標籤為止。

2:溢位屬性(控制內容溢位時候的顯示方式):

overflow屬性:

auto 當內容超出的時候有滾動條,沒有超出的時候沒有滾動條

scroll 新增滾動條

hidden 溢位隱藏!

inherit 繼承!

3:text-overflow:ellipsis/clip

ellipsis 省略號顯示

clip 沒有省略號

控制單行文字,溢位 省略號顯示:

1:white-space:nowrap; 不換行

2:overflow:hidden; 溢位的內容隱藏。

3:text-overflow:ellipsis 溢位的內容省略號顯示

4:容器要有寬度!!!

繼續昨天的**,該寫網頁的案例部分和新聞板塊兒

**如下

新聞板塊兒的新聞用超連結a來寫,並通過建立無序列表來實現

新聞板塊兒的新聞用超連結a來寫,並通過建立無序列表來實現

用css進行修飾

後續鏈結部分和底部與上面的方法基本一致最終得到的效果如圖(原網頁被縮小後的展示)

WEB前端學習日誌第二週 Day4

css的顯示對標籤分類 塊狀元素 內聯元素 行內元素 爭議點 第三類 a 可變元素 b 行內塊元素 元素型別分類 塊狀元素 內聯元素 可變元素。注 把行內塊元素 歸在 內聯元素這一類裡面。預設情況下元素型別每個型別特點 塊狀元素特點 1 在頁面中以矩形區域顯示。2 自上而下排列,獨佔一行 3 可以直...

WEB前端學習日誌Day4

樣式表的權重關係 1.內聯樣式表的權重最大!2.內部和外部樣式的權重,和書寫的前後順序有關!放在後面的會把放在前面的樣式覆蓋掉,覆蓋的只是相同屬性的樣式,不同屬性的樣式會繼續執行。舉例 在學校你的班主任對你說 明天你值日。你所在小組的組長說 明天你不需要值日。在兩者之間老師的權重大,座椅要聽從老師的...

WEB前端學習日誌Day5

選擇符的權重 id class 標籤 首先通過四個數字表示權重 內聯樣式表 1000 id 100 class 10 標籤 1 偽類選擇符 10 萬用字元 0 當 現包含選擇符的多個class或是其自身的id時,權重之和越高權重越大。例 box div 100 1 101 wrap con p 10...