一.樣式
1.1內(nèi)聯(lián)樣式和常規(guī)樣式
div{
width:100px;
height:100px;
background: red;
}*/
</style>
</head>
<body>
<div style=" width:100px; height:100px;background: red;"></div>
常規(guī)樣式的話栏饮，方便調(diào)試修改
而內(nèi)聯(lián)樣式寫法不方便修改和調(diào)試
二.輸入框和表單
1.1.input輸入框
style>
input{
width:100px;
height:40px;
border: 1px solid #333;
}
.btn{
/* padding:40px;*/
width:102px;
height:42px;
}
</style>
</head>
<body>
<input type="text"><br>
<input type="submit" class="btn" value="提交"
input是按鈕的形態(tài)下，給border padding不會改變它的width height值
input按鈕形態(tài)------------<input type="submit" class="btn" value="提交">
1.2.表單
<div>
<label for="user">用戶名</lable> <input type="text" id="user">
</div>
<div>
<label for="pwd">密碼</label> <input type="text" id="pwd">
</div>
<div>
<input type="submit" value="提交">
</div>
label和input的結(jié)合使用時茵臭，其要點是 label的for值和input的id值必須一致
<div>
<h4>性別</h4>
<label for="male">男</label><input type="radio" id="male" name="sex">
<label for="female">女</label><input type="radio" id="female" name="sex">
</div>
- 其單選框的name值相同
<div>
<input type="checkbox">足球
<input type="checkbox">足球
<input type="checkbox">足球
</div>
- 其為復(fù)合選框
<div>
<select>
<option value="武昌區(qū)">武昌區(qū)</option>
<option value="洪山區(qū)" selected>洪山區(qū)</option>
<option value="青山區(qū)">青山區(qū)</option>
</select>
</div>
- 其為下拉選框
<textarea placeholder="請吐槽" color="30" rows="10"></textarea>
- 其為文本域
三.樣式的問題
1.1.寬高的繼承
.parent{
width:100px;
height:100px;
background: red;
position:relative;
}
.child{
height: 50px;
background: green;
position:absolute;
}
- 子元素的絕對定位，不會繼承父元素的寬度和高度
1.2.margin的問題
.parent{
width:200px;
height: 200px;
background: red;
}
.child{
margin-top:50px;
width:100px;
height: 100px;
background: green;
}
- 子元素作為父元素的第一個元素鸯檬，給它margin-top 無效 伶选，它的父元素向下移動
- 解決問題 設(shè)置一個偽元素，使子元素不作為第一個元素
.row:after{
content:"";
display:table;
}
四.圖片鏈接做法
1.1
<fieldset class="footer">
<legend>
其他方式登錄
</legend>
</fieldset>
<div class="allicon">
<a href="#"><span class="qq"></span></a>
<a href="#"><span class="weibo"></span></a>
<a href="#"><span class="zhifu"></span></a>
<a href="#"><span class="weixin"></span></a>
</div>
fieldset{
border:none;
}
.allicon a{
display:inline-block;
width:30px;
height:30px;
border-radius:30px;
position:relative;
background: #333;
margin-top: 15px;
}
.allicon span{
position:absolute;
display:inline-block;
width:18px;
height:18px;
background: url("images/icons_type.png") no-repeat;
left:50%;
top:50%;
margin-left: -9px;margin-top: -9px;
}
.allicon .qq{
background-position-x:-18px;
}
.allicon .weibo{
background-position-x:-36px;
}
.allicon zhifu{
background-position-x:-57px;
margin-left:-13px;
width:26px;
}
.allicon .weixin{
background-position-x:-84px;
margin-left:-11.5px;
width:23px;
}
- 通過一張圖片來實現(xiàn)多個鏈接
向服務(wù)器發(fā)送請求僅有一次
10.PNG
