pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|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)
主站蜘蛛池模板: 杭州火蝠电商_京东代运营_拼多多全托管代运营【天猫代运营】 | 震动筛选机|震动分筛机|筛粉机|振筛机|振荡筛-振动筛分设备专业生产厂家高服机械 | 香蕉筛|直线|等厚|弧形|振动筛|香蕉筛厂家-洛阳隆中重工 | 信阳市建筑勘察设计研究院有限公司 | 水性绝缘漆_凡立水_绝缘漆树脂_环保绝缘漆-深圳维特利环保材料有限公司 | 全自动固相萃取仪_高通量真空平行浓缩仪-勤业永为 | 专注氟塑料泵_衬氟泵_磁力泵_卧龙泵阀_化工泵专业品牌 - 梭川泵阀 | 挨踢网-大家的导航!| 车牌识别道闸_停车场收费系统_人脸识别考勤机_速通门闸机_充电桩厂家_中全清茂官网 | 实验室装修_实验室设计_实验室规划设计- 上海广建净化工程公司 | 钛合金标准件-钛合金螺丝-钛管件-钛合金棒-钛合金板-钛合金锻件-宝鸡远航钛业有限公司 | 亿诺千企网-企业核心产品贸易 | 学校用栓剂模,玻璃瓶轧盖钳,小型安瓿熔封机,实验室安瓿熔封机-长沙中亚制药设备有限公司 | 翰香原枣子坊加盟费多少钱-正宗枣核糕配方培训利润高飘香 | 换链神器官网-友情链接交换、购买交易于一体的站长平台 | 精密模具-双色注塑模具加工-深圳铭洋宇通 | 长春网站建设,五合一网站设计制作,免费优化推广-长春网站建设 | 山东PE给水管厂家,山东双壁波纹管,山东钢带增强波纹管,山东PE穿线管,山东PE农田灌溉管,山东MPP电力保护套管-山东德诺塑业有限公司 | 扫地车厂家-山西洗地机-太原电动扫地车「大同朔州吕梁晋中忻州长治晋城洗地机」山西锦力环保科技有限公司 | 挤出机_橡胶挤出机_塑料挤出机_胶片冷却机-河北伟源橡塑设备有限公司 | 成都竞价托管_抖音代运营_网站建设_成都SEM外包-成都智网创联网络科技有限公司 | 上海小程序开发-上海小程序制作公司-上海网站建设-公众号开发运营-软件外包公司-咏熠科技 | 北京网站建设首页,做网站选【优站网】,专注北京网站建设,北京网站推广,天津网站建设,天津网站推广,小程序,手机APP的开发。 | 超声波破碎仪-均质乳化机(供应杭州,上海,北京,广州,深圳,成都等地)-上海沪析实业有限公司 | 超声波分散机-均质机-萃取仪-超声波涂料分散设备-杭州精浩 | 泰安塞纳春天装饰公司【网站】 | 医养体检包_公卫随访箱_慢病随访包_家签随访包_随访一体机-济南易享医疗科技有限公司 | 流程管理|流程管理软件|企业流程管理|微宏科技-AlphaFlow_流程管理系统软件服务商 | MES系统工业智能终端_生产管理看板/安灯/ESOP/静电监控_讯鹏科技 | 西安文都考研官网_西安考研辅导班_考研培训机构_西安在职考研培训 | 爆炸冲击传感器-无线遥测传感器-航天星百科 | 冻干机(冷冻干燥机)_小型|实验型|食品真空冷冻干燥机-松源 | 无刷电机_直流无刷电机_行星减速机-佛山市藤尺机电设备有限公司 无菌检查集菌仪,微生物限度仪器-苏州长留仪器百科 | 江苏南京多语种翻译-专业翻译公司报价-正规商务翻译机构-南京华彦翻译服务有限公司 | 实验室pH计|电导率仪|溶解氧测定仪|离子浓度计|多参数水质分析仪|pH电极-上海般特仪器有限公司 | 机器视觉检测系统-视觉检测系统-机器视觉系统-ccd检测系统-视觉控制器-视控一体机 -海克易邦 | 篮球架_乒乓球台_足球门_校园_竞技体育器材_厂家_价格-沧州浩然体育器材有限公司 | 吸污车_吸粪车_抽粪车_电动三轮吸粪车_真空吸污车_高压清洗吸污车-远大汽车制造有限公司 | 芝麻黑-芝麻黑石材厂家-永峰石业 | 坏男孩影院-提供最新电影_动漫_综艺_电视剧_迅雷免费电影最新观看 | 长江船运_国内海运_内贸船运_大件海运|运输_船舶运输价格_钢材船运_内河运输_风电甲板船_游艇运输_航运货代电话_上海交航船运 |