運用HTML5+CSS3做的登入頁面

本文轉載自：http://chenjinfei.blog.51cto.com/2965201/774865

本人小菜一枚，之前也學過一些html/CSS/JavaScript，那時候只是粗略一學，沒有吃透，現在想重拾舊河山，不多說了，步入正題吧

程式碼如下：

<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312">
<metahttp-equiv="description"content="運用CSS3和CSS濾鏡做的精美的登入介面，無用到圖片的喔！"

>
<metahttp-equiv="author"content="chenjinfei">
<metahttp-equiv="date"content="2012-2-6">
<title>登入</title>
<linkrel="stylesheet"href="style/common/common.css">
<styletype="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 h1 {
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/images/user.png) 4px 5px no-repeat;
}
fieldset input[type=password] {
background:url(style/default/images/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>
<!--[if IE]>
<scripttype="text/javascript">
document.createElement("section");
document.createElement("header");
document.createElement("footer");
</script>
<![endif]-->
</head>
<body>
<divclass="wrap">
<formaction="#"method="post">
<sectionclass="loginForm">
<header>
<h1>登入</h1>
</header>
<divclass="loginForm_content">
<fieldset>
<divclass="inputWrap">
<inputtype="text"name="userName"placeholder="郵箱/會員帳號/手機號" autofocus required>
</div>
<divclass="inputWrap">
<inputtype="password"name="password"placeholder="請輸入密碼" required>
</div>
</fieldset>
<fieldset>
<inputtype="checkbox"checked="checked">
<span>下次自動登入</span>
</fieldset>
<fieldset>
<inputtype="submit"value="登入">
<ahref="#">忘記密碼？</a><ahref="#">註冊</a>
</fieldset>
</div>
</section>
</form>
</div>
</body>
</html>

當然啦，有圖會直觀不少：

運用HTML5+CSS3做的登入頁面

本文轉載自：http://chenjinfei.blog.51cto.com/2965201/774865 本人小菜一枚，之前也學過一些html/CSS/JavaScript，那時候只是粗略一學，沒有吃透，現在想重拾舊河山，不多說了，步入正題吧程式碼如下： <!

用Html5/CSS3做Winform，一步一步教你搭建CefSharp開發環境（附JavaScript異步調用C#例子，及全部源代碼）上

轉載界面設計右鍵異步一個由於編寫 scrip 調用本文為雞毛巾原創，原文地址：http://www.cnblogs.com/jimaojin/p/7077131.html，轉載請註明 CefSharp說白了就是Chromium瀏覽器的嵌入式核心，我們用此開發W

運用html5 canvas做飛機大戰遊戲（1）

1、首先，寫出canvas前提，定義所需要的變數，如寬高、分數、生命值等。 <div style="text-align: center;"> <canvas id="canvas" width="480px" height="640px"&g

html5/css3響應式頁面開發總結

一，自適應和響應式的區別自適應是一套模板適應所有終端，但每種裝置上看到的版式是一樣的，俗稱寬度自適應。響應式一套模板適應所有終端，但每種裝置看到的版式可以是不一樣的。雖然響應式/自適應網頁設計會帶來相容各種裝置工作量大、程式碼累贅、載入時間長的缺點，但它們跨平臺和終端，能“一次設計，普遍

使用HTML 5和CSS3製作登入頁面完整步驟

本文詳細介紹使用HTML 5 和CSS3 製作一個登入頁面的完整過程。 login.html <formid="login"><h1>Log In</h1><fieldsetid="inputs"><in

使用bootstrap做登入頁面-新手實踐

這是我學習bootstrap的練習過程，記錄下來。當前版本 v4.0.0-beta.2 新增路由處理修改語言編寫css 理解佈局調整位置，字型，新增效果瀏覽器預設html字

用HTML5+CSS3做一個好看的介面

效果圖:滑鼠經過影象的時候會觸發hover 1s內轉一圈=-=程式碼:<!DOCTYPE html><html lang="zh-cn"> <head> <title>MyHtml.html</title>

HTML5+CSS3靜態頁面項目-PayPaul的總結

content 修改一點 cal 微軟 eight 最好的頁面沒有　　學習前端有一段時間了，一直在看書上的理論知識，而實戰項目卻很少。師兄常說，想要知道自己的實力有多少，知識掌握了多少，最好的方法就是去實踐了，實踐出真知嘛。於是決定在這個假期裏，主要是通過項目的實

java 攔截器做session過期跳轉登入頁面時無法重定向問題

這個問題好坑，也沒人寫個標題出來提醒大家不要再入坑，以前只是用，沒具體自己寫寫，這次專案用到了，自己寫寫還真遇到問題，這次記錄下來防止再次入坑。 1.起初懷疑攔截器配置有問題，經過驗證，攔截器沒有問題，訪問攔截到了，response也重定向了，就是頁面無法跳轉。

HTML5+CSS3基礎響應式頁面佈局

隨著網際網路時代的發展，我們對網頁佈局有了新的要求，大氣，美觀，能夠在不同的裝置上呈現令人煥然一新的效果。此時，一個全新的概念—響應式佈局應運而生。它的誕生為我們的移動端佈局帶來了很大的便利。因此學習響應式頁面佈局勢在必行！一、響應式頁面佈局的概念響應式佈局是Et

利用css3+jquery寫具有動畫效果的登入頁面

以下是執行截圖：利用css3屬性@keyframe定義兩個動畫，分別實現車子輪子旋轉、以及車身移動的動畫roll和move！具體程式碼如下： @keyframes roll { 0% { transform:rotate(72deg);

HTML5+CSS3頁面佈局

HTML5的語義化標籤以及屬性，可以讓開發者非常方便地實現清晰的web頁面佈局，加上CSS3的效果渲染，快速建立豐富靈活的web頁面顯得非常簡單。本次學習HTML5的新標籤元素有： <header>定義頁面或區段的頭部； <footer>定義頁面或

HTML5寫的簡單登入頁面

整體效果圖：主要程式碼： <!DOCTYPE html> <html lang="en" class="no-js"> <head> <

H5+css3+js搭建帶驗證碼的登入頁面

7款HTML5/CSS3應用新鮮出爐

點擊 tick tro letter itl ces pro 這樣的投影這段時間我們已經陸續向大家分享了很多絢麗實用的HTML5/CSS3應用插件，今天，我從資料庫中精選了7款最新出爐的HTML5/CSS3應用分享給大家，希望大家喜歡。 1、HTML5/CSS3發光文字

精選10款超酷的HTML5/CSS3菜單

read .html 目錄 -m sdn 簡潔讓我會有利用今天向大家精選了10款超酷的HTML5/CSS3菜單，給你的網頁添加不一樣的精彩，一起來圍觀一下吧。 1、CSS3手風琴菜單下拉展開帶彈性動畫利用CSS3技術可以實現各種各樣的網頁菜單，我們之前也在CSS

HTML5----CSS3圖片濾鏡(filter)特效

拖動 ner hot war str term min jquer onchange 支持Chrome: 暫不支持瀏覽器：FF,IE... 希望後者努力效果圖： CSS: <style type="text/css"> @-webkit-key

HTML5+CSS3。。。。。。。。蒙古人

highlight 學生成績 eight spf title 不顯示 enter 古人 pst 1.html5的基本結構 <!DOCTYPE html> //聲明HTML5結構，表示是否符合W3C的標準 <html>

html5+css3+javascript 自定義彈出窗口

eight padding pro mage char round 技術分享 function 窗口效果圖：源碼：　　1.demo.jsp 1 <%@ page contentType="text/html;charset=UTF-8" language=

HTML5 CSS3 誘人的實例： 3D立方體旋轉動畫

nim tom gravity order img fin 多說 line html 轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/34120047創意來自：http://www.html5trick

運用HTML5+CSS3做的登入頁面

相關推薦