每天進(jìn)步一點(diǎn)预侯，其實(shí)是很了不起的事情了木羹。
點(diǎn)擊進(jìn)入：一個(gè)不得了的網(wǎng)站
廢話不多說(shuō)甲雅，直接看圖！
效果2
效果2
第一步（可以先把背景圖搞出來(lái)坑填，當(dāng)然你也可以先畫(huà)主體抛人，最后在搞背景，看自己心情嘛）
<style>
html body {margin: 0;padding: 0;}
body {
/*no-repeat 是背景圖片脐瑰，且只顯示一次*/
background: url(img/img.jpg) no-repeat;
/*背景圖片完全覆蓋背景區(qū)域*/
background-size: cover;
}
</style>
上面代碼寫(xiě)完妖枚，就會(huì)出現(xiàn)這個(gè)效果了
背景圖片
現(xiàn)在呢，畫(huà)主體蚪黑，（先畫(huà)一個(gè)框盅惜，并且在屏幕中間）
主體
視覺(jué)上的效果中剩？用到了什么技術(shù)呢忌穿？
（1）背景顏色（透明）
（2）四個(gè)角都有弧度
（3）有陰影效果（鼠標(biāo)放在這個(gè)盒子上面，出現(xiàn)陰影）
（4）居中顯示结啼，
那么好掠剑，知道了這些，開(kāi)始寫(xiě)代碼
//頁(yè)面
<body>
<div class="head">
</div>
</body>
//css部分
<style>
.head {
margin: 50px auto;/*高度50px,居中*/
width: 400px;/*盒子長(zhǎng)*/
height: 350px;/*盒子寬*/
border: 1px solid #999999;/*顏色為灰色的1px寬度的實(shí)線邊框（顯示盒子）*/
background-color: #333333;/*盒子的背景顏色*/
opacity: 0.5;/*透明度0為完全透明郊愧，1是不透明朴译，*/
border-radius: 10%;/*設(shè)置圓形(4個(gè)角的弧度)*/
}
/*hover 鼠標(biāo)移動(dòng)到div上時(shí)*/
div:hover {
-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
/*鼠標(biāo)移動(dòng)是過(guò)渡*/
box-shadow: 0px 0px 100px #FFFFFF/*四邊出現(xiàn)陰影，效果發(fā)光*/
}
//強(qiáng)制轉(zhuǎn)換字體顏色
::-webkit-input-placeholder {
color: #fff;
}
:-moz-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
</style>
然后呢属铁！里面有3個(gè)輸入框和一個(gè)按鈕
//頁(yè)面
<body>
<div class="head">
//required必須填寫(xiě)的字段眠寿，placeholder 默認(rèn)提示信息
<input placeholder="請(qǐng)輸入你的用戶(hù)名" required/>
<input placeholder="請(qǐng)輸入你的密碼呦" required/>
<input placeholder="請(qǐng)輸入你的手機(jī)號(hào)" required/>
<button>登錄</button>
</div>
</body>
效果
上面的問(wèn)題
（1）不是一個(gè)標(biāo)簽占一行
（2）主要問(wèn)題不美觀（賊難看）
（3）怎么讓它變的美觀一些呢，看下面代碼
<style>
input {
width: 300px;
display: block;/*設(shè)置成塊級(jí)元素焦蘑，獨(dú)占一行*/
margin: 30px auto;/*外邊距30px盯拱，輸入框居中*/
padding: 10px;/*設(shè)置內(nèi)邊距*/
text-align: center;/*文字居中*/
border: 1px solid #EBEBEB;/*把輸入框包起來(lái)，變成長(zhǎng)方形*/
border-radius: 10px;/*讓長(zhǎng)方形的4個(gè)小彎一點(diǎn)例嘱，*/
font-family: 'Source Sans Pro', sans-serif;/*字體類(lèi)型*/
font-size: 18px;/*字體大小*/
//你點(diǎn)擊輸入框狡逢，會(huì)出現(xiàn)一個(gè)邊框，下面代碼是去掉原來(lái)邊框
outline: none;
background-color: #5E5E5E;/*輸入框的背景顏色*/
}
button {
width: 100px;/*設(shè)置按鈕的長(zhǎng)度*/
margin: 10px;/*外邊距*/
padding: 10px;/*內(nèi)邊距*/
border-radius: 10px;/*設(shè)置圓形*/
text-align: center;/*文字居中*/
font-family: 'Source Sans Pro', sans-serif;/*字體類(lèi)型*/
font-size: 18px;/*字體大小*/
float: right;/*向右浮動(dòng)*/
border: 1px solid #269ABC;/*把輸入框包起來(lái)拼卵，變成長(zhǎng)方形*/
outline: none;/*和上面一樣*/
color: #fff;/*字體的顏色*/
background-color: #269ABC;/*背景顏色*/
}
</style>
效果
下面還是寫(xiě)特效的代碼
hover 鼠標(biāo)移動(dòng)到目標(biāo)上觸發(fā)
focus 鼠標(biāo)點(diǎn)擊奢浑，獲取焦點(diǎn)時(shí)觸發(fā)
input:focus {
border: 2px solid #269ABC;/*4邊更換顏色*/
box-shadow: 0px 0px 10px #ADADAD;/*4邊出現(xiàn)陰影*/
background-color: #333333;/*更換背景顏色，看出效果*/
}
button:hover{
border-left: 20px solid #E8E8E8 ;/*目標(biāo)左側(cè)變寬*/
border-right: 20px solid #E8E8E8 ;/*目標(biāo)右側(cè)變寬腋腮，*/
background-color: #5E5E5E;/*更換顏色*/
}
完畢
