幾種樣式
- 內(nèi)聯(lián)樣式
<div style="width:100px;height:100px;background: red"></div>
- 外部樣式
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="test"></div>{創(chuàng)一個index.css 在這個文件里改樣式}
路徑
<!--
路徑:
相對路徑
絕對路徑 不要使用
-->
<!-- 同級目錄 -->
<img src="down.jpg" alt="">
<!-- 下一級目錄 -->
<img src="images/location.png" alt="">
<!-- 上一級目錄 -->
<../img src="images/location.png" alt="">
margin的一些bug
- /* 子元素作為父元素的第一個元素,給它margin-top,沒用
它的元素向下移動
*/解決的方法{父輩給.row(或者overflow: hidden;)
.row:before{
content:"";
display: table;
}
- margin重合的問題
兩個div分別top或者bottom數(shù)值相同取一致 數(shù)據(jù)不同選最大
輸入框和按鈕的區(qū)別
/* input是按鈕的形態(tài)下,給border,padding不會改變它的width,height */
表單
<h4>一個簡單的登錄表單</h4>
<form >
<div>
<label for="user">用戶名</label><input type="text" id="user">
</div>
<div>
<label for="pwd">密碼</label><input type="password" id="pwd">
</div>
<div>
<input type="submit" value="提交">
</div>
<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>
<div>
<input type="checkbox">足球
<input type="checkbox">籃球
<input type="checkbox">羽毛球
</div>
<div>
<select >
<option value="武昌區(qū)">武昌區(qū)</option>
<option value="洪山區(qū)" selected>洪山區(qū)</option>
<option value="青山區(qū)">青山區(qū)</option>
</select>
</div>
</form>
<textarea placeholder="請吐槽" cols="30" rows="10"></textarea>
<div><?></div>
小技巧1
-一個大圖片 好幾個小圖片該怎么分別對應(yīng)
————————其他方式————————
.AllIcon{overflow: hidden;margin-bottom: 30px;}
.AllIcon a{
display:block;
float:left;
width:18px;
height:18px;
background: #747474 url(images/icons_type.png) no-repeat ;
margin-left:50px;
}（border-radius: 50%;框框變圓形 30%部分變橢圓）
.AllIcon .one{background-position: -20px 0}
.AllIcon .two{background-position: -38px 0}
.AllIcon .three{background-position: -57px 0}
.AllIcon .four{background-position: -85px 0}
<div class="AllIcon">
<a href="#" class="one"></a>
<a href="#" class="two"></a>
<a href="#" class="three"></a>
<a href="#" class="four"></a>
</div>
{原理是a標(biāo)簽設(shè)置成塊標(biāo)簽可以設(shè)置寬高 而通過背景圖片位置直接移動 可以造成那結(jié)果}
小技巧2
.footer{
width:352px;margin-left:auto;margin-right:auto;
}
.footer .qita{position:relative;margin-bottom:15px;}
.qita .left,.right{position:absolute;display: block;width:125px;height:1px;background:#999;top:50%}
.right{right:0}
<div class="footer">
<p class="qita">
<span class="left"></span>
其他方式登錄
<span class="right"></span>
</p></div>
第二種做法比較方便
fieldset{border:none;}
<fieldset class="border">
<legend>其他登陸方式</legend>
</fieldset>
