login.html部分:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <!--引入字體圖標(biāo)庫(kù)--> <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/login.css"> </head> <body> <div class="wrap"> <h1>易購(gòu)商城后臺(tái)管理系統(tǒng)</h1> <form action=""> <div class="input-group"> //輸入框左邊的類似圖標(biāo)的東西是一種字體 //可在網(wǎng)上下載文件font-awesome-4.7.0后直接粘貼在項(xiàng)目目錄下使用 <i class="icon-user fa fa-user"></i> <input type="text" name="" class="form-control" placeholder="請(qǐng)輸入用戶名"> </div> <div class="input-group"> <i class="icon-user fa fa-lock"></i> <input type="password" name="" class="form-control" placeholder="請(qǐng)輸入密碼"> </div> <div class="input-group btn-group"> <button>登錄</button> </div> </form> <p>©xx集團(tuán) 版權(quán)所有</p> </div> </body> </html>
reset.css部分(重置部分)
*{ margin:0; padding:0; } a{ font-size: 12px; text-decoration: 0; color:#222; } a, input, button{ outline: none; } ul,ol,li{ list-style: none; } h1,h2,h3,h4,h5,h6{ font-weight: 100; } img{ display: block; border: 0; }
關(guān)于重置樣式文件:
因?yàn)椴煌臑g覽器對(duì)html標(biāo)簽的渲染有各自不同,即使開(kāi)發(fā)者不對(duì)html頁(yè)面寫一行css代碼,打開(kāi)的頁(yè)面也總會(huì)存在樣式,但不同的瀏覽器的默認(rèn)樣式略有不同,這在一定程度上給開(kāi)發(fā)者創(chuàng)造了麻煩,所以一般在開(kāi)始寫css代碼的之前總是會(huì)先重置樣式表,使得所有瀏覽器中html元素的樣式統(tǒng)一,前端工程師通過(guò)自定義樣式文件進(jìn)行樣式的統(tǒng)一,從而提高了前端界面的兼容性。
login.css部分
y{ background: rgba(0,0,0,0.8); } body{ //為網(wǎng)頁(yè)設(shè)置背景圖片 background-image: url(../img/xx.jpg); } .wrap{ //使界面主體在瀏覽器居中 position: absolute;//絕對(duì)定位 left: 50%; top: 50%; margin: -175px 0 0 -250px; padding: 20px; width: 500px; height: 350px; background: #333333; box-shadow:0 0 10px rgba(255,255,255,0.5); box-sizing: border-box;//padding和border被包含在定義的width和height之內(nèi) } h1{ height: 50px; font-size: 1.6em; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.5); } .input-group{ margin: 20px auto; height: 40px; width: 300px; border: 1px solid rgba(0,0,0,0.2); } i{ float: left;//左浮 width: 40px; height: 40px; text-align: center; line-height: 40px !important; background: rgb(22,160,93); color: #fff; font-size: 22px !important; } .form-control{ float: left; padding: 0 10px; height: 40px; border: 0; width: 260px; font-size: 18px; box-sizing: border-box; } .btn-group{ border: 0; margin-top: 40px; } button{ display: block; width: 100%; height: 40px; font-size: 1.2em; letter-spacing: 10px; border: 1px solid rgb(22,160,93); color: rgb(22,160,93); background: #fff; cursor: pointer; } button:hover{ //為按鈕元素設(shè)置鼠標(biāo)懸浮的動(dòng)態(tài)效果 color: #fff; background: rgb(22,160,93); } p{ font-size: 12px; text-align: center; color: #888; }
設(shè)計(jì)結(jié)果在瀏覽器上的效果:
到此這篇關(guān)于使用css樣式設(shè)計(jì)一個(gè)簡(jiǎn)單的html登陸界面的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)css html登陸界面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
標(biāo)簽:保定 大同 泰州 萍鄉(xiāng) 林芝 延邊 赤峰
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《使用css樣式設(shè)計(jì)一個(gè)簡(jiǎn)單的html登陸界面的實(shí)現(xiàn)》,本文關(guān)鍵詞 ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。