下載本文檔
版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
【移動應用開發技術】運用HTML5+CSS3和CSS濾鏡做的精美的登錄界面，無用到圖片的喔！
不少人為項目沒有一個簡潔和精美的登錄頁而煩惱，今天上班沒多少事情做，在51cto里看了篇關于“使用HTML5和CSS3制作登錄頁面完整步驟”的文章，我就動手做了一下，現在將代碼貼出來，因為個人認為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="郵箱/會員帳號/手機號"
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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 七年級語文下冊 第二單元 比較 探究《游園不值》教學設計 北師大版
- 2024-2025學年高中物理 第二章 固體、液體和氣體 第8節 氣體實驗定律（Ⅱ）教學設計 粵教版選修3-3
- 七年級地理下冊 8.3 俄羅斯教學設計 （新版）湘教版
- 九年級化學下冊 8.2 金屬的化學性質教學設計 新人教版
- 七年級歷史下冊 第二單元 遼宋夏金元時期：民族關系發展和社會變化 第12課 宋元時期的都市和文化教學設計 新人教版
- 5《鋪滿金色巴掌的水泥道》教學設計-2024-2025學年語文三年級上冊統編版
- 1《學習伴我成長》 第2課時 （教學設計）-2024-2025學年道德與法治三年級上冊統編版
- Module 2（教學設計）-2023-2024學年外研版（一起）英語三年級下冊
- 2 樹之歌（教學設計）-2024-2025學年統編版語文二年級上冊
- 2024-2025學年高中語文 第2單元 單元導讀教學設計 新人教版必修1
- 襄陽四中五中自主招生考試物理試題
- 防護服穿脫流程培訓課件
- 六年級下冊美術教案-第9課 紙塑丨浙美版
- 山東大學電動力學課件25習題課
- 最新云南省地圖含市縣地圖矢量分層可編輯地圖PPT模板
- 國家開放大學《社會心理適應》形考任務1-7參考答案
- 創維公司逃稅案分析
- 《淹溺急救》PPT課件（2022版）
- EPC項目管理之安全文明施工責任制度
- 第二節模糊綜合評價法
- 《雷鋒叔叔_你在哪里》說課稿55481
評論
0/150
提交評論