回顧web網頁開發

標籤：串連   一級目錄   概念   浮動   一個   ges   new   相對路徑   16px   

相對路徑和絕對路徑 相對路徑./ 目前的目錄../上一級目錄../../上一級的上一級的目錄一般用相對路徑：用./表示和linux裡面的指令操作./表示目前的目錄基本相同，在html中也可以不用寫demo： ./images/programmer.jpg可以寫成 images/programmer.jpg../  :表示當前網頁檔案所在目錄的上一級目錄，這個不能省略，如果在上一級，可以寫成../../images/programmer.jpg 絕對路徑：會把圖片位置寫死了，如果把檔案位置靠走了，如果把整個檔案拷貝走，放到伺服器上的話，絕對路徑還是回原來的位置尋找，位置會產生錯誤，所以我們一般寫相對路徑。會發生錯誤。絕對路徑：相對與磁碟的位置去定位資源的位置，會在項目遷移時，由於目錄的蓋面到時資源定位出錯，不推薦使用，   無序列表標籤：（有語義的）一般用在新聞（） 公式： <!-- ul>li{類表文字&}*8 --> 有自身的樣式，列表一般可以用滑鼠可以點的，列表需要加上串連，也有 不需要串連的需要串連的快速鍵(大於符號展示層級關係)ul>li>a{列表文字&}*8列表文字&快速鍵建立列表標籤產生快速鍵列表串連ul(>li>a[href="]{列表文字})*產生幾行  id選取器：是給程式用的，不是給樣式用的，可以用來抓取網頁頁面的內容 id選取器，只能用於頁面 上一個標籤，不推薦使用，一個標籤只能是一個id名稱，style裡面的類名之前要加 #；組選取器：組選取器，將公用的樣式提取出來，寫在一起，簡化樣式代碼。多個選取器，如果有相同的設定的話，可以用組選取器：.box1,.box2,.box3{裡面是具有相同屬性的}如果不加，的話是層選取器？？？？hover：滑鼠移至上方，盤旋，徘徊經常在連結上加入hover，可以讓滑鼠在點擊過之後，會改變裝台，叫做偽類別選取器，偽類別選取器：表示滑鼠移動到元素上去的時候顯示的樣式，.box:hover{}是在css操作style之後，再進行下一步的操作，.box:hover{屬性：值}，之後 虛擬元素選取器：解決bug；不能被選中，必須配合content（內容）使用，關鍵字before和after；.box:before{content:"欄位"}.box:after{conten:"後一個欄位"} 樣式屬性：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="#"]{列表文字})*nn行 >重新導向 li裡麵包含a ，ul裡麵包含li列表操作：   list-style: none;        margin: 0px;        paddig:0px;建立模組div.box${這是第$個div元素}*5 偽類和虛擬元素選取器：常用的偽類別選取器有hover，表示滑鼠懸浮在元素上時的狀態虛擬元素選取器有before和after，       

回顧web網頁開發