<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                >### A.今天學什么? #### 1.`css`幾種引入方式 - ##### 1.1內聯樣式 - 直接在標簽中style="" ``` // html <!-- 內聯樣式 權重1000,最好不要這樣寫,權重太大不容易調試 --> <div style="width: 100px;height: 100px;background-color: red"> hello world </div> ``` - ##### 1.2內部樣式表 - 在`html`文件`head`標簽最后使用`style`標簽,在標簽中寫樣式 ``` // html <!-- 內部樣式表 --> <div class="inner"> 內部樣式表 </div> // css <style> /* 內部樣式表 */ .inner{ width: 150px; height: 150px; background-color: pink; } </style> ``` - ##### 1.3外部樣式表 - 在`html`同級目錄創建一個`css`文件夾,在文件夾里面創建專屬于該html的`css`文件,在其中寫樣式,然后在`html`文件中`head`標簽后面使用link標簽,引入`css`文件。 ``` // html <!-- 外部樣式表,請使用該種方法,達成html和css and js的解耦 --> <div class="external"> 外部樣式表 </div> // css文件 .external{ width: 200px; height: 200px; background-color: aqua; } // link引入 <!-- 外部樣式表 --> <link rel="stylesheet" href="css/01css.css"> ``` #### 2.定位的寬度繼承 - ##### 2.1如果不設置子元素的寬,那么會自動繼承父元素的寬 - ##### 2.2如果設置子元素絕對定位,那么將不會繼承父元素的寬 ``` // html <div class="parent"> <div class="child"></div> </div> // css .parent{ width: 300px; height: 300px; background-color: red; position: relative; } /* 如果不設置子元素的寬,那么子元素會繼承父類的寬,也就是默認寬100% */ /* 如果設置子元素絕對定位,那么將不再繼承父元素的寬 */ .child{ position: absolute; height: 50px; background-color: pink; } ``` #### 3.margin-top塌陷 - ##### 3.1margin-top出現場景 - 如果給父元素的第一個子元素設置margin-top,則看上去,它的父元素也會有相同的margin值,而子元素相對于父元素則沒有margin了,但實際上盒子模型顯示無誤。這種現象稱之為margin塌陷 - ##### 3.2解決方法 - overflow: hidden; 有時候會出現問題,不推薦 - 偽元素 父元素:before{content: "";display: table;} 推薦 ``` // html <div class="parent"> <div class="child"></div> </div> // css /* 如果給父元素的第一個子元素設置margin-top,則看上去,它的父元素也會有相同的margin值, 而子元素相對于父元素則沒有margin了,但實際上盒子模型顯示無誤。這種現象稱之為margin塌陷 */ .parent{ width: 300px; height: 300px; background-color: red; } /* 這種margin-top塌陷只有父元素的第一個元素設置margin-top才會出現,所以建議使用偽元素 來給父元素創建第一個子元素,這樣其余的元素設置margin-top不會造成塌陷現象 */ .parent:before{ content: ""; display: table; } .child{ margin-top: 100px; width: 100px; height: 100px; background-color: green; } ``` #### 4.margin合并 - ##### 4.1margin合并出現場景 - 當兄弟子元素,第一個margin-bottom和第二個的margin-top值相同時,會發生margin合并,兩者的間距并不會是margin-bottom+margin-top,而是單純的margin-top值(這里因為兩者設置值相同,所以哪個都無所謂 - ##### 4.2解決方法 - css的一種特色,如果不想合并,那么可以將兩者margin值設置不相同。 ``` // html <div class="parent"> <div class="first"></div> <div class="second"></div> </div> // css .parent{ width: 400px; height: 400px; background-color: red; } /* 當兄弟子元素,第一個margin-bottom和第二個的margin-top值相同時, 會發生margin合并,兩者的間距并不會是margin-bottom+margin-top, 而是單純的margin-top值(這里因為兩者設置值相同,所以哪個都無所謂 css的一種特色,想要避開就將兩者的margin值設置不相同 */ .first{ width: 100px; height: 100px; background-color: green; margin-bottom: 100px; } .second{ margin-top: 100px; width: 100px; height: 100px; background-color: #3388ff; } ``` #### 5.form表單 - ##### 5.1`form`表單的幾種屬性-1 - `name`將你輸入的值和name屬性匹配成一個鍵值對一樣的格式,提交到form表單的action頁面,瀏覽器網址上看到的是user=11&pwd=22&sex=male - `label`的`for`屬性,可以達到效果,點擊label框,然后轉到id為user的input框 - `input`如何變成單選框,兩個`input`框的`name`必須相同,不然form表單會認為這不是同一類別的選項。`type`的屬性為`radio`,表示使用單選框 - `input`有很多種功能,依靠`type`的種類可以實現不同的效果 ``` // html <form action="http://www.baidu.com"> <!-- label的for屬性,可以達到效果,點擊label框,然后轉到id為user的input框 --> <!-- input的name屬性,將你輸入的值和name屬性匹配成一個鍵值對一樣的格式,提交到form表單的action頁面 --> <div> <label for="user">用戶名</label> <input type="text" name="user" id="user" /> </div> <div> <label for="pwd">密碼</label> <input type="text" name="pwd" id="pwd" /> </div> <div>性別 <!-- 單選框,name必須相同,不然form表單會認為這不是同一類別的選項 radio,表示使用單選框 --> <label for="male">男生</label> <input type="radio" id="male" name="sex" value="male"> <label for="female">女生</label> <input type="radio" id="female" name="sex" value="female"> </div> <div><input type="submit">登錄</div> </form> // css 無 ``` - ##### 5.2`form`表單的幾種屬性-2 - 復選框,將`input`的`type`屬性改為`checkbox`,`name`也要相同 - 下拉框,`select`標簽中的`option`標簽,如果想默認選擇一個`option`標簽,則在`option`標簽中加上`selected` - 文本框,`textarea` ``` // html <!-- 復合選框 --> <div> <label>愛好</label> <input type="checkbox" name="like" />籃球 <input type="checkbox" name="like" />足球 <input type="checkbox" name="like" />乒乓球 </div> <!-- 下拉框 --> <div> <select name="address" id=""> <option value="武漢">武漢</option> <option value="宜昌">宜昌</option> <option value="上海">上海</option> </select> </div> <!-- 文本域 --> <textarea></textarea> ``` - ##### 5.3 - `input`框使用`submit`屬性時會發生的問題,邊框不會增加input的寬高,所以需要手動增加寬高的值 ``` // html <div> <input class="one" type="text" /> </div> <!-- submit的input框的邊框,不會增加其寬高,所以需要另設 --> <div> <input class="btn" type="submit" /> </div> // css *{margin: 0;padding: 0;} .one{ width: 100px; height: 30px; border: 1px solid #333; } .btn{ width: 102px; height: 32px; } ``` #### 6.display和visibility的區別 - ##### 6.1`display`會讓元素在頁面上真的消失,不占據文檔流 - ##### 6.2`visibility`讓元素在頁面上不顯示,但是占據文檔流 ``` // html <div>hello world</div> // css div{ /* visibility只是隱藏,元素還是存在頁面上,會占據一行 */ visibility: hidden; /* 元素不存在于頁面上,不會占據文檔流 */ /*display: none;*/ } ``` #### 7.`iframe`的使用 - ##### 7.1`iframe`可以在當前頁面載入其他頁面 - 需要`iframe`的`name`屬性與a標簽的`target`屬性相同 ``` // html <!-- 要點:iframe的name屬性要與a標簽的target一樣 --> <iframe src="" frameborder="0" name="frame"></iframe> <a href="https://www.baidu.com" target="frame">百度</a> <a href="https://www.taobao.com" target="frame">淘寶</a> // css iframe{ width: 1900px; height: 1000px; border: 1px solid #333; } ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看