pbootcms网站模板|织梦模板|网站源码|jquery建站特效-html5模板网

HTML5實(shí)戰(zhàn)教程———開發(fā)一個(gè)簡(jiǎn)單漂亮的登錄頁面

最近看過幾個(gè)基于HTML5開發(fā)的移動(dòng)一樣,已經(jīng)越來越流暢了,相信隨著職能手機(jī)的配置越來越高性能越來越好,HTML5技術(shù)的使用在移動(dòng)端應(yīng)用的會(huì)越來越普及,應(yīng)用越來越廣泛,因此作為

最近看過幾個(gè)基于HTML5開發(fā)的移動(dòng)一樣,已經(jīng)越來越流暢了,相信隨著職能手機(jī)的配置越來越高性能越來越好,HTML5技術(shù)的使用在移動(dòng)端應(yīng)用的會(huì)越來越普及,應(yīng)用越來越廣泛,因此作為移動(dòng)開發(fā)者,掌握這門技術(shù)自然有著強(qiáng)烈的緊迫感。今天就寫一個(gè)小小的登錄頁面的demo,鞏固最近的學(xué)習(xí),也給有興趣的朋友學(xué)習(xí)HTML5技術(shù)做個(gè)參考。 

在這里您可以下載到我最后實(shí)現(xiàn)的登錄頁面的demo源碼,

地址: http://pan.baidu.com/s/1kU1I50b

準(zhǔn)備工作

1.webStorm或者其他網(wǎng)頁開發(fā)工具。因?yàn)槲沂怯脀ebStorm比較多,因此我只能在這里提供一下webStorm(破解版)的下載地址: windows版本Mac版本

2.會(huì)webSorm工具的基本使用。比如創(chuàng)建項(xiàng)目,創(chuàng)建css文件,創(chuàng)建HTML文件。

登錄頁面效果圖

樣圖分析

1.這個(gè)是一個(gè)簡(jiǎn)單的登錄頁面,從頁面效果圖上看,我們可以通過圖片來做按鈕效果,也可以完全通過代碼來實(shí)現(xiàn)。本文將通過純?cè)创a的形式來實(shí)現(xiàn)。

2.前端開發(fā)通常要將UI設(shè)計(jì)的效果圖進(jìn)行切割,將他們分成不同的模塊,本例只是一個(gè)簡(jiǎn)單的頁面,但是這種切割思路同樣適合其他大型網(wǎng)頁,別看像進(jìn)洞,淘寶頁面內(nèi)容繁多,但是當(dāng)您靜下心來,將他們切割,分塊之后,您會(huì)發(fā)現(xiàn)其實(shí)用到的技術(shù)都差不多。下圖是我對(duì)這個(gè)登錄頁面的切割思路:

這個(gè)頁面可以有很多的切塊方式,但是為了擴(kuò)展性,分不同功能進(jìn)行盡可能小的模塊切割是我個(gè)人認(rèn)為比較合適的方式。切割完之后,我們就可以編寫我們的HTML5頁面了。

操作步驟

1.在項(xiàng)目目錄下創(chuàng)建login.html文件,在項(xiàng)目目錄下創(chuàng)建CSS目錄,并在CSS目錄下創(chuàng)建login.css樣式文件。如圖所示結(jié)構(gòu):

2.然后按照我們剛才的設(shè)計(jì),在index.html中實(shí)現(xiàn)我們的想法,加入如下代碼:

3.完成HTML頁面元素設(shè)計(jì)之后,我們就需要使用剛才創(chuàng)建的login.css樣式文件控制頁面顯示樣式了。不過先在頁面中添加樣式文件關(guān)聯(lián)鏈接。

4.然后就可以打開login.css設(shè)計(jì)我們的顯示樣式了,這里就不一步一步帶您操作了,直接貼代碼,我會(huì)把每個(gè)步驟注釋清楚。

[代碼]php代碼:

/*按照樣圖要求,添加一個(gè)淺灰色背景*/
body{
    background-color: #F2F2F2;
}

/*設(shè)置內(nèi)容模塊距離頂部一個(gè)有一段距離150px*/
.content {
    margin-top: 150px;
}

/*登錄和注冊(cè)按鈕的整體樣式*/
.content button {
    height: 30px;/*登錄和注冊(cè)按鈕的高度*/
    color:  white;/*登錄和注冊(cè)按鈕字體顏色為白色*/
    font-size: 18px;/*登錄和注冊(cè)按鈕的字體大小*/
    border: 0px;/*無邊框*/
    padding: 0px;/*無內(nèi)邊距*/
    cursor: pointer;/*登錄和注冊(cè)按鈕的選擇時(shí)為手形狀*/
}


/*登錄面板*/
.content .panel {
    background-color: white;/*登錄面板背景顏色為白色*/
    width: 302px;/*寬度為302px*/
    text-align: center;/*子內(nèi)容居中*/
    margin: 0px auto;/*自身居中*/
    padding-top: 20px;/*頂部的內(nèi)邊距為20px*/
    padding-bottom: 20px;/*底部的內(nèi)邊距為20px*/
    border: 1px solid #ddd;/*邊框顏色為灰色*/
    border-radius: 5px;/*邊框邊角有5px的弧度*/

}

/*登錄和密碼組*/
.content .panel .group {
    text-align: left;/*子內(nèi)容居中*/
    width: 262px;/*寬度為262px*/
    margin: 0px auto 20px;/*自身居中,并距離底部有20px的間距*/
}
.content .panel .group label {
    line-height: 30px;/*高度為30px*/
    font-size: 18px;/*字體大小為18px*/
}
.content .panel .group input {
    display: block;/*設(shè)置為塊,是為了讓輸入框獨(dú)占一行*/
    width: 250px;/*寬度為250px*/
    height: 30px;/*高度為30px*/
    border: 1px solid #ddd;/*輸入框的邊框*/
    padding: 0px 0px 0px 10px;/*左邊內(nèi)邊距為10px,顯得美觀*/
    font-size: 16px;/*字體大小*/
}
.content .panel .group input:focus{

    border-left: 1px solid #CC865E;/*當(dāng)輸入框成為焦點(diǎn)時(shí),左邊框顏色編程褐色*/
}
.content .panel .login button {
    background-color: #CC865E;/*按鈕的背景顏色*/
    width: 260px;/*按鈕的寬度*/
}
.content .panel .login button:hover {
    background-color: white;/*按鈕選中后背景顏色為白色*/
    color:  #CC865E;/*按鈕選中后字體顏色為褐色*/
    border: 1px solid #CC865E;/*按鈕選中后邊框顏色為褐色*/
}


/*注冊(cè)按鈕*/
.content .register {
    text-align: center;/*子內(nèi)容居中*/
    margin-top: 20px;/*頂部的內(nèi)邊距為20px*/
}
.content .register button {
    background-color: #466BAF;/*按鈕的背景顏色為藍(lán)色*/
    width: 180px;/*按鈕的寬度*/
}

.content .register button:hover {
    background-color: white;/*按鈕選中后背景顏色為白色*/
    color: #466BAF;/*按鈕選中后字體顏色為藍(lán)色*/
    border: 1px solid #466BAF;/*按鈕選中后邊框顏色為藍(lán)色*/
}


5.所用工作完成,最后運(yùn)行一下看看最終效果吧。

如果您看到這里,那我想謝謝你的閱讀。期待您和我一起進(jìn)步成長(zhǎng)。

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測(cè)試外,其他素材未做測(cè)試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

由于實(shí)際運(yùn)行環(huán)境是在瀏覽器中,因此性能還取決于JavaScript解釋器的效率,指定的FPS幀速在低性能解釋器中可能不會(huì)達(dá)到,所以這部分不是開發(fā)者能夠決定的,開發(fā)者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個(gè)自定義的視頻播放器,需要用到HTML5提供的video標(biāo)簽、以及HTML5提供的對(duì)JavascriptAPI的擴(kuò)展。,HTML5中國,中國最大的HTML5中文門戶。
隨著 Hybrid 應(yīng)用的豐富,HTML5 工程師們已經(jīng)不滿足于把桌面端體驗(yàn)簡(jiǎn)單移植到移動(dòng)端,他們覬覦移動(dòng)原生應(yīng)用人性化的操作體驗(yàn),特別是原生應(yīng)用與生俱來的豐富的手勢(shì)系統(tǒng)。HTML5 沒有提
你想要在自己網(wǎng)站上分享一個(gè)產(chǎn)品,或者是一個(gè)作品集,又或者僅僅只是一個(gè)靈感。在你發(fā)布到網(wǎng)上之前,你想讓它看起來有吸引力,專業(yè),或者至少得看起來像那么回事。那么你接下
H5廣告,包括H5廣告的設(shè)計(jì)流程,究竟有什么講究,和階段。為了能幫助更多的人了解H5廣告,我專門做了一個(gè)講義。同時(shí),也讓我意外的收到了非常好反饋和認(rèn)!這是對(duì)我的極大鼓勵(lì)!我的
本文主要內(nèi)容有:框架與組件、構(gòu)建生態(tài)、開發(fā)技巧與調(diào)試、html、css與重構(gòu)、native/hybrid/桌面開發(fā)、前端/H5優(yōu)化、全棧/全端開發(fā)、研究實(shí)驗(yàn)、數(shù)據(jù)分析與監(jiān)控、其它軟技能、前端技術(shù)網(wǎng)
主站蜘蛛池模板: 上海软件开发-上海软件公司-软件外包-企业软件定制开发公司-咏熠科技 | 沧州友城管业有限公司-内外涂塑钢管-大口径螺旋钢管-涂塑螺旋管-保温钢管生产厂家 | 成都治疗尖锐湿疣比较好的医院-成都治疗尖锐湿疣那家医院好-成都西南皮肤病医院 | 玉米深加工机械,玉米加工设备,玉米加工机械等玉米深加工设备制造商-河南成立粮油机械有限公司 | 氧化锆陶瓷_氧化锆陶瓷加工_氧化锆陶瓷生产厂家-康柏工业陶瓷有限公司 | 缠膜机|缠绕包装机|无纺布包装机-济南达伦特机械设备有限公司 | (中山|佛山|江门)环氧地坪漆,停车场地板漆,车库地板漆,聚氨酯地板漆-中山永旺地坪漆厂家 | 车辆定位管理系统_汽车GPS系统_车载北斗系统 - 朗致物联 | 成都租车_成都租车公司_成都租车网_众行宝 | 搅拌磨|搅拌球磨机|循环磨|循环球磨机-无锡市少宏粉体科技有限公司 | 变位机,焊接变位机,焊接变位器,小型变位机,小型焊接变位机-济南上弘机电设备有限公司 | 权威废金属|废塑料|废纸|废铜|废钢价格|再生资源回收行情报价中心-中废网 | 塑钢件_塑钢门窗配件_塑钢配件厂家-文安县启泰金属制品有限公司 深圳南财多媒体有限公司介绍 | 宝元数控系统|对刀仪厂家|东莞机器人控制系统|东莞安川伺服-【鑫天驰智能科技】 | CE认证_FCC认证_CCC认证_MFI认证_UN38.3认证-微测检测 CNAS实验室 | 苏州西朗门业-欧盟CE|莱茵UL双认证的快速卷帘门品牌厂家 | 直线模组_滚珠丝杆滑台_模组滑台厂家_万里疆科技 | 防弹玻璃厂家_防爆炸玻璃_电磁屏蔽玻璃-四川大硅特玻科技有限公司 | 长江船运_国内海运_内贸船运_大件海运|运输_船舶运输价格_钢材船运_内河运输_风电甲板船_游艇运输_航运货代电话_上海交航船运 | 杭州货架订做_组合货架公司_货位式货架_贯通式_重型仓储_工厂货架_货架销售厂家_杭州永诚货架有限公司 | 多功能干燥机,过滤洗涤干燥三合一设备-无锡市张华医药设备有限公司 | 电动高尔夫球车|电动观光车|电动巡逻车|电动越野车厂家-绿友机械集团股份有限公司 | 安德建奇火花机-阿奇夏米尔慢走丝|高维|发那科-北京杰森柏汇 | 逗网红-抖音网红-快手网红-各大平台网红物品导航 | 微信聊天记录恢复_手机短信删除怎么恢复_通讯录恢复软件下载-快易数据恢复 | 活性炭-蜂窝-椰壳-柱状-粉状活性炭-河南唐达净水材料有限公司 | 工业硝酸钠,硝酸钠厂家-淄博「文海工贸」 | SOUNDWELL 编码器|电位器|旋转编码器|可调电位器|编码开关厂家-广东升威电子制品有限公司 | 翰香原枣子坊加盟费多少钱-正宗枣核糕配方培训利润高飘香 | 偏心半球阀-电动偏心半球阀-调流调压阀-旋球阀-上欧阀门有限公司 | 120kv/2mA直流高压发生器-60kv/2mA-30kva/50kv工频耐压试验装置-旭明电工 | 武汉天安盾电子设备有限公司 - 安盾安检,武汉安检门,武汉安检机,武汉金属探测器,武汉测温安检门,武汉X光行李安检机,武汉防爆罐,武汉车底安全检查,武汉液体探测仪,武汉安检防爆设备 | 泥浆在线密度计厂家-防爆数字压力表-膜盒-远传压力表厂家-江苏大亚自控设备有限公司 | 广东燎了网络科技有限公司官网-网站建设-珠海网络推广-高端营销型外贸网站建设-珠海专业h5建站公司「了了网」 | 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 2-羟基泽兰内酯-乙酰蒲公英萜醇-甘草查尔酮A-上海纯优生物科技有限公司 | 电镀标牌_电铸标牌_金属标贴_不锈钢标牌厂家_深圳市宝利丰精密科技有限公司 | 滚塑PE壳体-PE塑料浮球-警示PE浮筒-宁波君益塑业有限公司 | 河南空气能热水器-洛阳空气能采暖-洛阳太阳能热水工程-洛阳润达高科空气能商行 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库 | 手板_手板模型制作_cnc手板加工厂-东莞天泓 |