設計師學習HTML CSS之路 13

2021-09-24 06:49:55 字數 1051 閱讀 9352

不了解前端的ui不是好美工，以下是慕課網html+css基礎教程學習筆記，不廢話，start!

13-1 盒子型**簡寫

1.如果top、right、bottom、left的值相同，如下**：

margin:10px 10px 10px 10px;


複製**
可縮寫為：

margin:10px;


複製**
2.如果top和bottom值相同、left和right的值相同，如下**：

margin:10px 20px 10px 20px;


複製**
可縮寫為：

margin:10px 20px;


複製**
3.如果left和right的值相同，如下面**：

margin:10px 20px 30px 20px;


複製**
可以縮寫為：

margin:10px 20px 30px;


複製**
13-2 顏色值縮寫

例1：

p


複製**
可以縮寫為：

p


複製**
例2：

p


複製**
可以縮寫為：

p


複製**
13-3 字型縮寫
body


複製**
以上**可以縮寫為：

body


複製**
注意：

1.使用這一簡寫方式至少需要指定 font-size 和 font-family 屬性，其他屬性如果不寫，則自動使用預設值。

2.縮寫時，font-size 與line-height 中間要加入"/"。

設計師學習HTML CSS之路 03

不了解前端的ui不是好美工，以下是慕課網html css基礎教程學習筆記，不廢話，start 3 1 ul無序列表標籤語法 解釋 unordered list 無序列表 3 2 ol有序列表標籤語法 列表 列表 解釋 ordered list有序列表 列表 列表 3 3 div在排版中的作用語法 標...

設計師學習HTML CSS之路 02

不了解前端的ui不是好美工，以下是慕課網html css基礎教程學習筆記，不廢話，start 2 1 語義化 語義化，讓你的網頁更好的被搜尋引擎理解。標籤的用途 我們學習網頁製作時，常常會聽到乙個詞，語義化。那麼什麼叫做語義化呢，說的通俗點就是 明白每個標籤的用途 在什麼情況下使用此標籤合理 比如，...

設計師學習HTML CSS之路 04

不了解前端的ui不是好美工，以下是慕課網html css基礎教程學習筆記，不廢話，start 4 1 使用a標籤，鏈結到另乙個頁面語法 title的目的不僅僅是劃過顯示的文字，他還有的作用是語義化 點我試試 title p2g作品集 點我試試 複製 4 2 在新建瀏覽器視窗中開啟鏈結 a標籤預設是上...