初識HTML和CSS2

時間 2019-12-10
標籤 html css2 css 欄目 HTML 简体版
原文原文鏈接
上節做業問題：
    一、css重用
        
        <style>
            若是整個頁面的寬度 > 900px時：
            {
                .c{
                   共有 
                }
                .c1{
                    獨有
                }
            }
            
            .c2{
                獨有
            }
        </style>
        
        <div class='c c1'></div>
        <div class='c c2'></div>
    二、自適應 和 改變大小變形
        左右滾動條的出現
        寬度，百分比
        
        頁面最外層：像素的寬度 => 最外層設置絕對寬度
        
        
        自適應：media
        
    三、默認img標籤，有一個1px的邊框
        img{
            border: 0;
        }
    
    四、做業中的數量輸入框
    
上節內容回顧
    一、塊級和行內
    二、form標籤
            <form action='http://sssss' methed='GET' enctype='multi'>
                <div>asdfasdf</div>
                <input type='text' name='q' />
                <input type='text' name='b' />
                # 上傳文件
                <input type='file' name='f' />
                <input type='submit' />
            </form>
            GET: http://sssss?q=用戶輸入的值
                 http://sssss?q=用戶輸入的值&b=用戶輸入的內容
                 
            POST：
                請求頭
                請求內容
    三、display: block;inline;inline-block
    四、float：
        <div>
            <div style='float:left;'>f</div>
            <div style='clear:both;'></div>
        </div>

    五、margin: 0 auto;
    六、padding, ---> 自身發生變化
    
    
CSS補充
    position:
        a. fiexd => 固定在頁面的某個位置
        
        b. relative + absolute
        
            <div style='position:relative;'>
                <div style='position:absolute;top:0;left:0;'></div>
            </div>

    opcity: 0.5 透明度
    z-index: 層級順序   
    overflow: hidden,auto
    hover
    
    background-image:url('image/4.gif'); # 默認，div大，圖片重複訪
    background-repeat: repeat-y;
    background-position-x:
    background-position-y:
    
    示例：輸入框

JavaScript
    獨立的語言，瀏覽器具備js解釋器
    
    JavaScript代碼存在形式：
        - Head中
                <script>
                    //javascript代碼
                    alert(123);
                </script>
                
                <script type="text/javascript">
                    //javascript代碼
                    alert(123);
                </script>
        - 文件
            <script src='js文件路徑'> </script>
            
        PS: JS代碼須要放置在 <body>標籤內部的最下方
        
    註釋
        當行註釋 //
        多行註釋  /*     */
        
    變量：
        
        python：
            name = 'alex'
        JavaScript:
            name = 'alex'     # 全局變量
            var name = 'eric' # 局部變量
        
    寫Js代碼：
        - html文件中編寫
        - 臨時，瀏覽器的終端 console
        
          
    基本數據類型
        數字
            a = 18;
        字符串
            a = "alex"
            a.chartAt(索引位置)
            a.substring(起始位置，結束位置)
            a.lenght    獲取當前字符串長度
            ...
        列表(數組)
            a = [11,22,33]
            
        字典
            a = {'k1':'v1','k2':'v2'}
        布爾類型
            小寫
      
    for循環
        1. 循環時，循環的元素是索引
        
            a = [11,22,33,44]
            for(var item in a){
                console.log(item);
            }
            
            a = {'k1':'v1','k2':'v2'}
            for(var item in a){
                console.log(item);
            }
            
        2. 
            for(var i=0;i<10;i=i+1){
                
            }
            
            a = [11,22,33,44]
            for(var i=0;i<a.length;i=i+1){
                
            }
            
            不支持字典的循環
    
      
    條件語句
        if(條件){
        
        }else if(條件){
            
        }else if(條件){
            
        }else{
            
        }
        
        ==   值相等
        ===  值和類型都相等
        &&   and
        ||   or
        
    
    函數：
    
        
        function 函數名(a,b,c){
        
        }
        
        函數名(1,2,3)
    
       
    
    

Dom
    一、找到標籤
        獲取單個元素        document.getElementById('i1')
        獲取多個元素（列表）document.getElementsByTagName('div')
        獲取多個元素（列表）document.getElementsByClassName('c1')
        a. 直接找
            document.getElementById             根據ID獲取一個標籤
            document.getElementsByName          根據name屬性獲取標籤集合
            document.getElementsByClassName     根據class屬性獲取標籤集合
            document.getElementsByTagName       根據標籤名獲取標籤集合
        
        b. 間接
            tag = document.getElementById('i1')
            
            parentElement           // 父節點標籤元素
            children                // 全部子標籤
            firstElementChild       // 第一個子標籤元素
            lastElementChild        // 最後一個子標籤元素
            nextElementtSibling     // 下一個兄弟標籤元素
            previousElementSibling  // 上一個兄弟標籤元素
            
    二、操做標籤
        
        a. innerText
            
            獲取標籤中的文本內容
            標籤.innerText
            
            對標籤內部文本進行從新複製
            
            標籤.innerText = ""
            
        b. className
            tag.className =》 直接總體作操做
            tag.classList.add('樣式名')   添加指定樣式
            tag.classList.remove('樣式名')   刪除指定樣式
    
            PS：
            
                <div onclick='func();'>點我</div>
                <script>
                    function func(){
                    
                    }
                
                </script>
    
        c. checkbox  
                獲取值
                checkbox對象.checked
                設置值
                checkbox對象.checked = true
    
    
    
做業：
    一、登陸、註冊，練習：position
    二、後臺管理頁面
        - 左側菜單
        - 右邊表格，全選反向，模態框，返回頂部
    三、商城頁面
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。