下載本文檔
版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
【移動應(yīng)用開發(fā)技術(shù)】運用HTML5+CSS3和CSS濾鏡做的精美的登錄界面，無用到圖片的喔！
不少人為項目沒有一個簡潔和精美的登錄頁而煩惱，今天上班沒多少事情做，在51cto里看了篇關(guān)于“使用HTML5和CSS3制作登錄頁面完整步驟”的文章，我就動手做了一下，現(xiàn)在將代碼貼出來，因為個人認(rèn)為ie6在不久的將來必定被舍棄，所以這個登錄頁面的代碼沒有理會ie6里的情況。代碼如下：<!DOCTYPE
HTML>
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312">
<meta
http-equiv="description"
content="運用CSS3和CSS濾鏡做的精美的登錄界面，無用到圖片的喔！">
<meta
http-equiv="author"
content="chenjinfei">
<meta
http-equiv="date"
content="2012-2-6">
<title>登錄</title>
<link
rel="stylesheet"
href="style/common/common.css">
<style
type="text/css">
body
{
margin:0;
padding:0;
background-color:#E4E8EC;
}
.wrap
{
margin:150px
auto;
width:380px;
overflow:hidden;
}
.loginForm
{
box-shadow:
0
0
2px
rgba(0,
0,
0,
0.2),
0
1px
1px
rgba(0,
0,
0,
0.2),
0
3px
0
#fff,
0
4px
0
rgba(0,
0,
0,
0.2),
0
6px
0
#fff,
0
7px
0
rgba(0,
0,
0,
0.2);
position:absolute;
z-index:0;
background-color:#FFF;
border-radius:4px;
height:250px;
width:380px;
background:
-webkit-gradient(linear,
left
top,
left
24,
from(#EEE),
color-stop(4%,
#FFF),
to(#EEE));
background:
-moz-linear-gradient(top,
#EEE,
#FFF
1px,
#EEE
24px);
background:
-o-linear-gradient(top,
#EEEEEE,
#FFFFFF
1px,
#EEEEEE
24px);
}
.loginForm:before
{
content:'';
position:absolute;
z-index:-1;
border:1px
dashed
#CCC;
top:5px;
bottom:5px;
left:5px;
right:5px;
box-shadow:
0
0
0
1px
#FFF;
}
.loginForm
h2
{
text-shadow:
0
1px
0
rgba(255,
255,
255,
.7),
0px
2px
0
rgba(0,
0,
0,
.5);
text-transform:uppercase;
text-align:center;
color:#666;
line-height:3em;
margin:16px
0
20px
0;
letter-spacing:
4px;
font:normal
26px/1
Microsoft
YaHei,
sans-serif;
}
fieldset
{
border:none;
padding:10px
10px
0;
}
fieldset
input[type=text]
{
background:url(style/default/p_w_picpaths/user.png)
4px
5px
no-repeat;
}
fieldset
input[type=password]
{
background:url(style/default/p_w_picpaths/password.png)
4px
5px
no-repeat;
}
fieldset
input[type=text],
fieldset
input[type=password]
{
width:100%;
line-height:2em;
font-size:12px;
height:24px;
border:none;
padding:3px
4px
3px
2.2em;
width:300px;
}
fieldset
input[type=submit]
{
text-align:center;
padding:2px
20px;
line-height:2em;
border:1px
solid
#FF1500;
border-radius:3px;
background:
-webkit-gradient(linear,
left
top,
left
24,
from(#FF6900),
color-stop(0%,
#FF9800),
to(#FF6900));
background:
-moz-linear-gradient(top,
#FF6900,
#FF9800
0,
#FF6900
24px);
background:-o-linear-gradient(top,
#FF6900,
#FF9800
0,
#FF6900
24px);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9800',
endColorstr='#FF6900');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9800',
endColorstr='#FF6900')";
height:30px;
cursor:pointer;
letter-spacing:
4px;
margin-left:10px;
color:#FFF;
font-weight:bold;
}
fieldset
input[type=submit]:hover
{
background:
-webkit-gradient(linear,
left
top,
left
24,
from(#FF9800),
color-stop(0%,
#FF6900),
to(#FF9800));
background:
-moz-linear-gradient(top,
#FF9800,
#FF6900
0,
#FF9800
24px);
background:-o-linear-gradient(top,
#FF6900,
#FF6900
0,
#FF9800
24px);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6900',
endColorstr='#FF9800');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6900',
endColorstr='#FF9800')";
}
.inputWrap
{
background:
-webkit-gradient(linear,
left
top,
left
24,
from(#FFFFFF),
color-stop(4%,
#EEEEEE),
to(#FFFFFF));
background:
-moz-linear-gradient(top,
#FFFFFF,
#EEEEEE
1px,
#FFFFFF
24px);
background:
-o-linear-gradient(top,
#FFFFFF,
#EEEEEE
1px,
#FFFFFF
24px);
border-radius:3px;
border:1px
solid
#CCC;
margin:10px
10px
0;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE',
endColorstr='#FFFFFF');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE',
endColorstr='#FFFFFF')";
}
fieldset
input[type=checkbox]
{
margin-left:10px;
vertical-align:middle;
}
fieldset
a
{
color:blue;
font-size:12px;
margin:6px
0
0
10px;
text-decoration:none;
}
fieldset
a:hover
{
text-decoration:underline;
}
fieldset
span
{
font-size:12px;
}
</style>
<!--為了讓IE支持HTML5元素，做如下操作：-->
<!--[if
IE]>
<script
type="text/javascript">
document.createElement("section");
document.createElement("header");
document.createElement("footer");
</script>
<![endif]-->
</head>
<body>
<div
class="wrap">
<form
action="#"
method="post">
<section
class="loginForm">
<header>
<h2>登錄</h2>
</header>
<div
class="loginForm_content">
<fieldset>
<div
class="inputWrap">
<input
type="text"
name="userName"
placeholder="郵箱/會員帳號/手機(jī)號"
autofocus
required>
</div>
<div
class="inputWrap">
<input
type="password"
name="password"
placeholder="請輸入密碼"
required>
</div>
</fieldset>
<fieldset>
<input
type="checkbox"
checked="ch
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 網(wǎng)絡(luò)安全防護(hù)產(chǎn)品供應(yīng)與技術(shù)服務(wù)協(xié)議
- 農(nóng)村智能灌溉系統(tǒng)安裝與技術(shù)服務(wù)協(xié)議
- 會議室預(yù)訂使用協(xié)議
- 2026屆山東省濟(jì)南市匯才校中考英語押題試卷含答案
- 扁平風(fēng)風(fēng)格模板23
- 湖北省武漢市南湖區(qū)2026屆中考數(shù)學(xué)四模試卷含解析
- 2026屆湖南長沙市芙蓉區(qū)第十六中學(xué)中考三模數(shù)學(xué)試題含解析
- 2025內(nèi)蒙古呼和浩特市老牛灣黃河大峽谷景區(qū)招聘25人筆試參考題庫附帶答案詳解(10套)
- 2025甘肅張掖超越發(fā)展農(nóng)業(yè)有限公司招聘30人筆試參考題庫附帶答案詳解(10套)
- 2025年大學(xué)試題(法學(xué))-國際私法學(xué)歷年參考題庫含答案解析(5套)
- 《醫(yī)療英語口語》課件
- 糖尿病培訓(xùn)內(nèi)容
- 2025年水利工程師職稱考試試題及答案
- 2025北京高三一模地理匯編：人文地理（非選擇題）
- 不良事件分級培訓(xùn)
- 2025建筑安全員C證考試（專職安全員）題庫及答案
- 風(fēng)險管控考試題及答案
- 2025年茶藝師高級技能考核試卷：茶藝設(shè)備維護(hù)與操作試題
- Unit 1 Friendship 講義-2024年滬教牛津版英語七年級上冊
- 《食品安全問題現(xiàn)狀》課件
- 2025年全年考勤表
評論
0/150
提交評論