回顧web網頁開發
阿新 • • 發佈：2017-08-23
表連接 mar 元素選擇器 也有 快捷 尋找 資源 指令 space 相對路徑和絕對路徑
相對路徑
./ 當前目錄
../上一級目錄
../../上一級的上一級的目錄
一般用相對路徑：用./表示和linux裏面的指令操作./表示當前目錄基本相同，在html中也可以不用寫
demo： ./images/programmer.jpg可以寫成 images/programmer.jpg
../ :表示當前網頁文件所在目錄的上一級目錄，這個不能省略，如果在上一級，可以寫成
../../images/programmer.jpg
絕對路徑：會把圖片位置寫死了，如果把文件位置靠走了，如果把整個文件拷貝走，放到服務器上的話，絕對路徑還是回原來的位置尋找，位置會產生錯誤，所以我們一般寫相對路徑。
id選擇器： 是給程序用的，不是給樣式用的，可以用來抓取網頁頁面的內容
經常在鏈接上加入hover，可以讓鼠標在點擊過之後，會改變裝臺，叫做偽類選擇器， 偽類選擇器：表示鼠標移動到元素上去的時候顯示的樣式，.box:hover{} 是在css操作style之後，再進行下一步的操作， .box:hover{屬性：值}，之後
樣式屬性：text-align ：設置文字水平 text-indent：首行縮進 text-style：nomarl 文字不傾斜，italic傾斜； 綜合屬性順序：font：是否加粗，字號/行高 字體 demo：normal 12px/36px "楷體“ 網頁裏面的：如果不寫的話段落字體默認大小是十六 font-weight , font-size/ling-height ,font-family:順序不能顛倒，否則失效 設置ul的時候一般設置3個， list-style的設置：去掉默認的小圓點，清除默認的外邊距、內邊距 .list{ list-style: none; margin:0px; padding:0px; }
.con>.box （div的嵌套） 屬性：設置子元素超出部分的處理方法，（設置在父集上） overflow：visible（顯示超出的部分） overflow:hidden(隱藏)隱藏：將超出的部分吟唱，相當於切掉超出的部分 overflow：scroll（卷軸）顯示滾動條框，可以把子元素顯示完（不管有麽有超 出都有滾動條框，上下左右都有） overflow：auto（）如果子元素超出就顯示滾動條框，不超出就不顯示滾動條框 應用場景：如果一個文檔太多，顯示不玩，可以設置一個滾動條
重點：盒子模型： 概念，padding和 元素，標簽，盒子 都是指的一個東西 盒子包含的內容，如果有一個杯子，content和 border 邊框線：solid 實線 dashed 虛線 dotted（點線） padding：（上右下左）按照12點順時針轉 上下左右邊分別設置內邊距（4個） 3個值的話 padding：（上 （左右）下）寫三個的話左右為一個值， 2個值的話： padding：（（上下），（左右））寫兩個值的話分別設置上下，左右的值 1個值的 話： padding：（（設置四個邊都是一個值））
margin外邊距的方法和padding的設置方法相同， 盒子的真是尺寸： 盒子的width和height值固定的，如果盒子增加border和padding，盒子整體的尺寸會變大，所以，盒子的真是尺寸為： 盒子的寬度：widthpadding 左右+border左右 盒子的高低 heigth=padding上下+border上下
盒子一般不用padding 因為他會改變盒子的大小，可以在盒子裏面再設置一個盒子，用裏面的盒子的 margin來設置裏面盒子的位置 margin：0px auto; 左右的margin值設置auto可以讓樣式自己計算左右 的margin值，讓盒子水平居中 margin使用負值可以讓兩個盒子疊加，（合並邊框）
垂直外邊距合並；（bug）（有意這麽做的） 解決辦法： 1.使用這種特性 2.設置一邊的外邊距，一般設置margin-top（） 3.將元素浮動 當不浮動的元素的上下margin相遇的時候，會取兩個margin值中的較大的值作為他的最終的margin值；
終極總結： 列表標簽： 快捷方式： ul >li{列表文字$}*n 可以生成n行 $代表第幾行 列表標簽一般用於鏈接所以得與<a href="www.baidu.com">百度</a>嵌套使用 快捷生成方式： ul(>li>a[href="#"]{列表文字})*n n行 >重定向 li裏面包含a ，ul裏面包含li 列表操作： list-style: none; margin: 0px; paddig:0px; 新建模塊div .box${這是第$個div元素}*5 偽類和偽元素選擇器： 常用的偽類選擇器有hover，表示鼠標懸浮在元素上時的狀態 偽元素選擇器有before和after，
id選擇器： 是給程序用的，不是給樣式用的，可以用來抓取網頁頁面的內容
經常在鏈接上加入hover，可以讓鼠標在點擊過之後，會改變裝臺，叫做偽類選擇器， 偽類選擇器：表示鼠標移動到元素上去的時候顯示的樣式，.box:hover{} 是在css操作style之後，再進行下一步的操作， .box:hover{屬性：值}，之後
樣式屬性：text-align ：設置文字水平 text-indent：首行縮進 text-style：nomarl 文字不傾斜，italic傾斜； 綜合屬性順序：font：是否加粗，字號/行高 字體 demo：normal 12px/36px "楷體“ 網頁裏面的：如果不寫的話段落字體默認大小是十六 font-weight , font-size/ling-height ,font-family:順序不能顛倒，否則失效 設置ul的時候一般設置3個， list-style的設置：去掉默認的小圓點，清除默認的外邊距、內邊距 .list{ list-style: none; margin:0px; padding:0px; }
.con>.box （div的嵌套） 屬性：設置子元素超出部分的處理方法，（設置在父集上） overflow：visible（顯示超出的部分） overflow:hidden(隱藏)隱藏：將超出的部分吟唱，相當於切掉超出的部分 overflow：scroll（卷軸）顯示滾動條框，可以把子元素顯示完（不管有麽有超 出都有滾動條框，上下左右都有） overflow：auto（）如果子元素超出就顯示滾動條框，不超出就不顯示滾動條框 應用場景：如果一個文檔太多，顯示不玩，可以設置一個滾動條
重點：盒子模型： 概念，padding和 元素，標簽，盒子 都是指的一個東西 盒子包含的內容，如果有一個杯子，content和 border 邊框線：solid 實線 dashed 虛線 dotted（點線） padding：（上右下左）按照12點順時針轉 上下左右邊分別設置內邊距（4個） 3個值的話 padding：（上 （左右）下）寫三個的話左右為一個值， 2個值的話： padding：（（上下），（左右））寫兩個值的話分別設置上下，左右的值 1個值的 話： padding：（（設置四個邊都是一個值））
margin外邊距的方法和padding的設置方法相同， 盒子的真是尺寸： 盒子的width和height值固定的，如果盒子增加border和padding，盒子整體的尺寸會變大，所以，盒子的真是尺寸為： 盒子的寬度：widthpadding 左右+border左右 盒子的高低 heigth=padding上下+border上下
盒子一般不用padding 因為他會改變盒子的大小，可以在盒子裏面再設置一個盒子，用裏面的盒子的 margin來設置裏面盒子的位置 margin：0px auto; 左右的margin值設置auto可以讓樣式自己計算左右 的margin值，讓盒子水平居中 margin使用負值可以讓兩個盒子疊加，（合並邊框）
垂直外邊距合並；（bug）（有意這麽做的） 解決辦法： 1.使用這種特性 2.設置一邊的外邊距，一般設置margin-top（） 3.將元素浮動 當不浮動的元素的上下margin相遇的時候，會取兩個margin值中的較大的值作為他的最終的margin值；
終極總結： 列表標簽： 快捷方式： ul >li{列表文字$}*n 可以生成n行 $代表第幾行 列表標簽一般用於鏈接所以得與<a href="www.baidu.com">百度</a>嵌套使用 快捷生成方式： ul(>li>a[href="#"]{列表文字})*n n行 >重定向 li裏面包含a ，ul裏面包含li 列表操作： list-style: none; margin: 0px; paddig:0px; 新建模塊div .box${這是第$個div元素}*5 偽類和偽元素選擇器： 常用的偽類選擇器有hover，表示鼠標懸浮在元素上時的狀態 偽元素選擇器有before和after，
回顧web網頁開發