A.我今天學(xué)到了什么
一.margin的一點小問題
1.給子元素margin-top:父元素移動,子元素不移動
解決方案如下
1.給父元素overflow:hidden;
2.給父元素設(shè)置偽元素parent:before{content:'‘”;display:table}
2.都是同級的情況下，上面的元素的margin-bottom和下面元素的margin-top會重合
二.絕對路徑和相對路徑
1.絕對路徑：從盤符開始的路徑
<img src="D:/images/down.jpg" alt=""/>
2.相對路徑：相對當前文件所在的路徑
同級目錄 src='down.jpg'
下一級目錄 src='images/down.jpg'
上一級目錄 src='../down.jpg'
三.HTML表單相關(guān)元素
1一個登陸頁面
<form >
<p><label for="text">文本</label><input id="text" type="text"/></p>
<p><label for="password">密碼</label><input id="password" type="password"/></p>
<p><input type="submit" value="登錄"/></p>
</form>
定義和用法
<label> 標簽為 input 元素定義標注（標記）。
label 元素不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內(nèi)點擊文本，就會觸發(fā)此控件。
<label> 標簽的 for 屬性應(yīng)當與相關(guān)元素的 id 屬性相同。
2.單選框
<!--單選框需給一樣的name名-->
<p>
<label for="male">男</label><input id="male" type="radio" name="sex" value="男">
<label for="female">女</label>
<input id="female" type="radio" name="sex" value="女">
</p>
3.復(fù)合選框
<!--復(fù)合選框-->
<p>
<label>愛好</label>
<input type="checkbox" name="愛好" value="游泳">游泳
<input type="checkbox" name="愛好" value="開車">開車
</p>
4.下拉選框
<select>
<option>洪山區(qū)</option>
<option>青山區(qū)</option>
<option>漢陽區(qū)</option>
</select>
5預(yù)選的下拉選框
//在想要的option上加selected這個屬性
<form action="">
<select>
<option>洪山區(qū)</option>
<option selected>青山區(qū)</option>
<option>漢陽區(qū)</option>
</select>
</form>
6文本域
<textarea placeholder="看點槽點，不吐不快！別憋著，馬上大聲說出來吧！"></textarea>
7特殊字符
  :空格 <:< >:>
8input輸入框input type=”text” 與 type=”submit”之間的區(qū)別
type="text"
設(shè)置margin和padding會改變原有的寬度
type="submit"
設(shè)置margin和padding不會改變原有的寬度
8標簽之間的相互轉(zhuǎn)換
display:inline|block|inline-block
9display和visibility的區(qū)別
display:none;
//顯示為沒有
visibility:hidden/visible
//可見度
visibility：hidden
//事物存在，但是隱藏了
visibility：visible
//事物可以看見
9講解登錄框下面的幾個icon
雪碧圖：
列子：
span {
width: 19px;
height: 19px;
display: inline-block;
background: #ccc url("images/icons_type.png");
background-position: -19px 0;
}
10.有關(guān)《其他登入方式》的表單制作
//HTML
<div class="box">
<fieldset class="item">
<legend align="center">其他登入方式</legend>
</fieldset>
//CSS
*{
margin: 0;
padding: 0;
}
.box{
margin:50px auto;
width: 400px;
height: 500px;
border: 1px solid saddlebrown;
box-sizing: border-box;
padding: 10px;
}
fieldset{
border: 0;
}
.item{
border-top: 1px solid #e0e0e0;
margin-top: 20px;
}
11.1input輸入框和button按鈕的區(qū)別
input有默認的padding=1px；border=2px,高度默認增加了6px;
button有默認的box-posotion=border-box,高度不會改變
B 我今天掌握了什么
一.margin的一點小問題
1.給子元素margin-top:父元素移動,子元素不移動
解決方案如下
1.給父元素overflow:hidden;
2.給父元素設(shè)置偽元素parent:before{content:'‘”;display:table}
2.都是同級的情況下，上面的元素的margin-bottom和下面元素的margin-top會重合
二.絕對路徑和相對路徑
1.絕對路徑：從盤符開始的路徑
<img src="D:/images/down.jpg" alt=""/>
2.相對路徑：相對當前文件所在的路徑
同級目錄 src='down.jpg'
下一級目錄 src='images/down.jpg'
上一級目錄 src='../down.jpg'
三.HTML表單相關(guān)元素
1一個登陸頁面
<form >
<p><label for="text">文本</label><input id="text" type="text"/></p>
<p><label for="password">密碼</label><input id="password" type="password"/></p>
<p><input type="submit" value="登錄"/></p>
</form>
定義和用法
<label> 標簽為 input 元素定義標注（標記）。
label 元素不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內(nèi)點擊文本，就會觸發(fā)此控件。
<label> 標簽的 for 屬性應(yīng)當與相關(guān)元素的 id 屬性相同。
2.單選框
<!--單選框需給一樣的name名-->
<p>
<label for="male">男</label><input id="male" type="radio" name="sex" value="男">
<label for="female">女</label>
<input id="female" type="radio" name="sex" value="女">
</p>
3.復(fù)合選框
<!--復(fù)合選框-->
<p>
<label>愛好</label>
<input type="checkbox" name="愛好" value="游泳">游泳
<input type="checkbox" name="愛好" value="開車">開車
</p>
4.下拉選框
<select>
<option>洪山區(qū)</option>
<option>青山區(qū)</option>
<option>漢陽區(qū)</option>
</select>
5預(yù)選的下拉選框
//在想要的option上加selected這個屬性
<form action="">
<select>
<option>洪山區(qū)</option>
<option selected>青山區(qū)</option>
<option>漢陽區(qū)</option>
</select>
</form>
6文本域
<textarea placeholder="看點槽點，不吐不快！別憋著，馬上大聲說出來吧！"></textarea>
7特殊字符
  :空格 <:< >:>
8input輸入框input type=”text” 與 type=”submit”之間的區(qū)別
type="text"
設(shè)置margin和padding會改變原有的寬度
type="submit"
設(shè)置margin和padding不會改變原有的寬度
8標簽之間的相互轉(zhuǎn)換
display:inline|block|inline-block
9display和visibility的區(qū)別
display:none;
//顯示為沒有
visibility:hidden/visible
//可見度
visibility：hidden
//事物存在，但是隱藏了
visibility：visible
//事物可以看見
9講解登錄框下面的幾個icon
雪碧圖：
列子：
span {
width: 19px;
height: 19px;
display: inline-block;
background: #ccc url("images/icons_type.png");
background-position: -19px 0;
}
10.有關(guān)《其他登入方式》的表單制作
//HTML
<div class="box">
<fieldset class="item">
<legend align="center">其他登入方式</legend>
</fieldset>
//CSS
*{
margin: 0;
padding: 0;
}
.box{
margin:50px auto;
width: 400px;
height: 500px;
border: 1px solid saddlebrown;
box-sizing: border-box;
padding: 10px;
}
fieldset{
border: 0;
}
.item{
border-top: 1px solid #e0e0e0;
margin-top: 20px;
}
11.1input輸入框和button按鈕的區(qū)別
input有默認的padding=1px；border=2px,高度默認增加了6px;
button有默認的box-posotion=border-box,高度不會改變
C今天沒有掌握的
沒有，只是要多多練習(xí)
