# 2019/0122/網路層\&CSS父子容器切版

表現層 編碼 轉譯 解譯 加密 壓縮 如big-5

http/html ftp telnet

會議層 連線 單工 simplex 半雙工 Half-duplex 雙工 duplex 維護品質

123 => 數字 123 +1 =124

"123" => 字串 "123"&"1"=1231

"http\://..."& 變數 & => &變數&".html" = xxxx.html

關聯性 可化成 山峰圖

比較性 可化成 長條圖

## CSS

selector 操作  標籤/物件

head 定義事務 先執行完 才會執行 body 

### table

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LWo9Fn7GmKjkpztdrOC%2F-LWo9I0AXoHYqEGAYDsd%2Fimage.png?alt=media\&token=309dc583-0e17-494a-9a82-35869eb303da)

 td:first-child 冒號 延伸寫法 精確值高於tag 所以不會被覆蓋

table > tbody > tr:first-child > td:first-child    > 下一代

table > tbody > tr:first-child > td:first-child+td  + 同一代下一個

\#tb td , #tb td 所有子子孫孫叫td的跟td的

先寫大的在寫小的 ， 狀態優於常態 。

### container 容器

CSS style中

id用#指定

用 . 指定 class 

直接打tag指定tag

a超鏈結 

a:link

a:active

a:visited

a:hover

## CSS Position

### HTML5切版

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LWoYO1IYBQEa4saQe3c%2F-LWoYPYr0Ui5DJBhdWCN%2Fimage.png?alt=media\&token=3a59ee6c-1618-4e58-98fc-275fff4cde2a)

以前都用 table 與 div 然後取標籤去切版

現在html5則用右邊沒有元屬性之排版標籤效果跟div一樣

沒CSS設定時版型如下

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LWoYb03iTceGIm4BnBM%2F-LWoZEiPwsdAJfqJ9uuw%2Fimage.png?alt=media\&token=4ddb9e48-78d1-4bc0-b5aa-675a29577ec2)

原則盡量不要有橫的卷軸

width 1200-1120-1100

div 誰先寫先排誰

利用浮起來

![](https://1902678905-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LVJQfuBXyvHwCd1Nadk%2F-LWoYb03iTceGIm4BnBM%2F-LWoeXiKHe94Ysbc3Dxu%2Fimage.png?alt=media\&token=b2fd659a-902b-4bf1-b309-b9ffdd44c6b2)