web前端 day12今日大綱

內容回顧:
 一.HTML
 語義化標籤
 目的:
 1.認識這些標籤含義
 2.根據需求來搭建網頁的結構
 img src
 <p>alex</p>
 缺點:太醜
      
 二.CSS
 做用: 網頁的樣式,美化頁面. 
 目的: 用戶體驗
 - css的引入方式
 1.行內樣式
 優先級最高
 2.內嵌樣式
 style標籤
 3.外接樣式
 link
 href屬性鏈接css文件
 開發實戰項目應用最多
 - 選擇器
 1.基本選擇器
 標籤選擇器
 div{}
 id選擇器
 #box{}
 class選擇器
 .box{}
            
 2.高級選擇器
 後代選擇器
 選中的是兒子,孫子....
 div p{}
 子代選擇器
 只選中兒子-
 div>p
 組合選擇器
 html,body,p,ul,ol,dl{
 padding: 0;
 margin: 0;
 }
 reset.css
 交集選擇器
 div.active{
 }
 屬性選擇器
 input[type=text]{
 }
 僞類選擇器
 a:hover{}
 3.繼承性和特殊性
 繼承:
 個別的屬性: color,line-height,text-xxx,font-xxx
 特殊性:
 權重
 行內樣式 > id > class > 標籤
 1000 100 10 1
               
 數當前選擇器的個數: id class 標籤
               
 誰的數值大,權重就高,優先級就高
               
 繼承來的屬性優先級接近0
 4.網頁經常使用排版樣式
 字體的設置
 字體顏色:color:單詞|rgb(0~255,0~255,0~255)| 十六進制表示法 #ff6700
 字體大小: font-size: px(像素:絕對單位),rem,em(相對單位:相對於當前盒子的字體大小),vh,vw
 字體粗細:font-weight: normal | bold | 100~900
 字體樣式: font-style:none | italic
 文本的設置
 文本修飾:text-decoration:none | underline
 文本對齊方式:text-align:left | center | right
 文本的行高:line-height
 如何讓一個盒子中的文本水平垂直居中
 text-align:center;
 line-height: 盒子模型的內容的高度
 5.盒子模型
 標準文檔流:
 一個網頁在不受任何佈局的影響下,它內部HTML標籤的默認排版樣式
               
 從左往右,從上往下,這種佈局叫流式佈局
 width: 內容的寬度
 height: 內容的高度
 padding: 內邊距
 margin: 外邊距
 border: 邊框
 1px solid red;
               
 根據方向劃分
 border-top: 1px solid red;
               
 border-color: red green blue yellow;
 border-width: 2px;
 border-style: solid;
               
 標準文檔流下margin垂直方向會出現塌陷問題
               
 浮動的盒子,margin不會出現任何問題
               
               
               
 6.浮動
 float:left|right
 浮動的盒子:
 1.脫離標準文檔流(脫標)
 2.貼邊現象
               
   
   
今日內容:
 一. 標籤分類
 默認是在標準文檔流
 display:inline|block|inline-block|none;
         
 - 標籤分類
 行內標籤
 span,a,em,i,strong,b
            
 特色: 
 1.在一行內顯示
 2.不能設置寬高,若是不設置寬 默認是字體的大小
               
 一個塊級元素轉行內 不多使用
 行內塊標籤: display:inline-block;
 input,img
                  
 塊級標籤
 div p ul ol li dl dt form table h1~h6
 特色:
 1.獨佔一行
 2.能夠設置寬高,若是不設置寬,默認是父元素100%的寬度
            
 ********一個行內轉行內塊和塊應用最多********
            
 二. 浮動佈局
 設計浮動佈局的初衷: 文字環繞
 float:left|right
 浮動的盒子:
 現象:
 1.脫離標準文檔流(脫標)
 2.貼邊現象
 3.文字環繞
 4.收縮現象(一旦給元素設置浮動,能夠任意設置寬高)
 好處:
 排版: 在一行上並排顯示
 問題:
 一旦給子元素設置浮動,父元素不設置高度,由於浮動元素脫標了,不在頁面上佔位置,撐不起父元素的高度
 清除浮動的方式:
 1.給父盒子設置固定高度
 缺點:後期不易維護
 2.內牆法(理解)
 clear:both; 清除左右兩邊浮動帶來的影響
 在最後一個浮動元素的後面加一個空的塊級元素(標準文檔流),而且設置該元素爲
 缺點: 代碼冗餘
 3.僞元素清除法
 .clearfix::after{
 content:'';
 display: block;
 clear: both;
 /*display: none;*/
 /*visibility: hidden;*/
 /*height: 0;*/
 }
 3.overflow:hidden;
            
            
         
               
 三. 定位佈局
 position:static;靜態 默認的
      
 position: relative;相對定位
 參考點:以原來的位置爲參考點
 現象:
 1.壓蓋現象(通常不用)
 2.微調元素
         
 佈局方案:
 子絕父相
      
 position: absolute; 絕對定位
 參考點:
 單獨設置絕對定位,以頁面左上角爲參考點
 有子絕父相,以最近的父輩元素的左上角爲參考點
 現象:
 1.脫標
 2.壓蓋現象(經常使用)
            
 position: fixed; 固定定位
 參考點:瀏覽器的左上角
 現象:
 0.固定在網頁上不變
 1.脫標
 2.壓蓋(通常不用)
 做用:
 固定導航欄,小廣告,回到頂部
 四.z-index
 z-index只應用在定位的元素，默認z-index:auto;
 z-index取值爲整數，數值越大，它的層級越高
 若是元素設置了定位，沒有設置z-index，那麼誰寫在最後面的，表示誰的層級越高。
 從父現象。一般佈局方案咱們採用子絕父相，比較的是父元素的z-index值，哪一個父元素的z-index值越大，表示子元素的層級越高。
      
      
 五. 背景圖
 background-color:red;
 background-image:url(地址)
   
HTML4.01 css2.1
HTML5 CSS3(瞭解)
   
   
 練習:
 moment.js
   
 jquery.js
 下午: JS
 JS基礎語法
 基本數據類型
 number string boolean null undefined
 引用數據類型
       
 ******流程控制****
 if
 switch
 while
 for
       
       
 經常使用對象:
 ********* 函數 *******
 ******* string *******
 ******* Array ********
 ****** Object *******
         
 字符串轉數值?
 parseInt()
 parseFloat()
 數值轉字符串
 小技巧: 一個數字+ ""
 toString();