2. 程式人生 > >仿qq email介面 登陸

仿qq email介面 登陸

阿新 • • 發佈：2019-01-12 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>login</title>


</head>
<style>
*{
		margin: 0;
		padding: 0;
		list-style:none;
		text-decoration: none;
		position: relative;
}
.head_logo{
	height: 35px;
	width: 182px;
	
	background:url(https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/logo/qqmail/qqmail_logo_default_35h206ff1.png) no-repeat;
	background-size: 182px 35px;
	background-position: left center;
	margin-top:14px;
	margin-left: 40px;
	}
.container{
	
	width: 1349px;
	height: 621px;
}

.header{
	width: 100%;
	height: 63px;
	background-color: #eff4fa;
	overflow: hidden;
	display: flex;

}
.headlink{
	width: 1050px;
	height: 30px;
	text-align: right;
	padding-top: 21px;
	padding-right: 70px;
	overflow: hidden;
}
.middle{
	width: 100%;
	height: 621px;

}
.center{
	width: 915px;
	height: 429px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) ;
	display: flex;



}
.picture{
	width: 520px;
	height: 400px;
	background-image: url(https://rescdn.qqmail.com/zh_CN/htmledition/images/tg-mail20f1b0.gif);
	background-size: 520px 400px;
	background-position: -12px -50px;


}
.login{
	height: 400px;
	width: 334px;
	border: 1px solid #96a5b4;
}	
.title{
	text-align: center;
	line-height: 26px;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: normal;
    color: #6f95c8;
}
.titl1{

	padding-left: 40px;
	line-height: 34px;
	font-size: 14px;
    font-weight: normal;
    color: #6f94c1;
    overflow: hidden;

  

}
.titl2{
	padding-left: 60px;
	line-height: 34px;
	font-size: 14px;
    font-weight: normal;
    color: #6f94c1;
    overflow: hidden;

}

.titl3{
	padding-left: 80px;
	line-height: 34px;
	font-size: 14px;
    font-weight: normal;
    color: #6f94c1;
    overflow: hidden;

}

.titl4{
	padding-left: 100px;
	line-height: 34px;
	font-size: 14px;
    font-weight: normal;
    color: #6f94c1;
    overflow: hidden;
}
.first{
	width: 334px;
	height:51px;
	background-color: #f9fbfe;
	border-bottom: 1px solid #c0cdd9;
}
.login_index{
	width: 220px;
	height: 46px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) ;
	display: flex;
}
.left{
	width: 64px;
	height: 45px;
	line-height: 45px;
	color: #333;
	display: inline-block;
	cursor: pointer;
	margin-right: 60px;
}
.right{
	width: 96px;
	height: 45px;
	line-height: 45px;
	color: #333;
	display: inline-block;
	cursor: pointer;
	
}
.second{
	width:334px; 
	height:32px;
	border: 0px;
	

}
.three{
	width: 284px;
	height: 300px;
	left:62%;
	transform: translate(-61%,0) ;
	
}
.text{
    border-radius: 3px;
    width: 284px;
    height:50px;
    
}
.password{
    border-radius: 3px;
    width: 284px;
    height:50px;
   

}
.text > input{
	top: 0px;
    padding: 10px 40px 10px 10px;
    left: 0px;
    border-radius: 3px;
    width: 232px;
    border: 1px solid #96a5b4;

}
.text > input:focus{
	
}
.password > input{
	top: 0px;
    padding: 10px 40px 10px 10px;
    left: 0px;
    border-radius: 3px;
    width: 232px;
    border: 1px solid #96a5b4;
}
.password > input:focus{
}
.low_login{
	width: 100px;
	height: 20px;
	margin-top:20px;
	display: block;
	font-weight: normal;
	
	

}
.uncheck{
	background: url(https://mail.qq.com//zh_CN/htmledition/images/icon_ptloginpage1e9c5d.png) no-repeat;
	cursor: pointer;
	display: inline-block;
	height: 16px;
    width: 16px;
    border: 1px solid #96a5b4;
    position: absolute;
    top:1px ;
    left:1px ;
    background-position: 0 ;
    

}
.low_login_wording{
	height: 18px;
    line-height: 18px;
    font-size: 12px;
    width: 72px;
    height: 15px;
    display: block;
    margin-left: 21px;
   

}
/*.uncheck:hover{
	
   background-position: -61px -16px;
}*/

.submit{
	margin-top: 13px;
    height: 177px;
    font-size: 12px;


}
.login_button{
	right: 0px;
    top: 8px;
    width: 284px;
    height: 40px;
    
    
    display: block;

}
.btn{
	height: 40px;
    line-height: 39px;
    width: 100%;
    font-weight: normal;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    border-width: 0px;
    background-color: #5a98de;
    border-radius: 3px;
}
.bottom{
	position: absolute;
	top: 279px;
	left:123px;
	
	

}
.link{
	    font-size: 12px;
	    cursor: pointer;
	    color: #225592;
}
.big{
	width: 334px;
	height: 300px;
}
.footer > a{
    cursor: pointer;
    color: #1d5494;
    line-height: 36px;
    text-align: center;
    font-size: 12px;
}
.footer{
	background-color: #eff4fa;
	border-top: 1px solid #d6dfea;
	text-align: center;
}
.gray{
	    color: #868686;
}
.headlink{
	color: #1d5494;
	font-size: 12px;
}

</style>
<body>
<div class="container">
	<div class="header">
		<div class="head_logo"></div>
		<div class="headlink">
			<a href="http://w.mail.qq.com/cgi-bin/loginpage?f=xhtml">基本版</a>
			&nbsp;|&nbsp;
			<a href="http://en.mail.qq.com">English</a>
			&nbsp;|&nbsp;
			<a href="http://app.mail.qq.com/" target="_blank">手機版</a>
			&nbsp;|&nbsp;
			<a href="http://exmail.qq.com?referrer=index_top" target="_blank">企業郵箱</a>

		</div>
	</div>
	<div class="middle" id="top">
		<div class="center">
			<div class="picture">
			    <p class="title">QQ郵箱，常聯絡！</p>
				<p class="titl1">你對自由的嚮往</p>
				<p class="titl2">天馬行空的生涯</p>
				<p class="titl3">你的心了無牽掛</p>
				<p class="titl4">摘自《藍蓮花》</p>
			</div>
			<div class="login">
				<div class="first">
					<div class="login_index">
						<div class="left">快速登陸</div>
						<div class="right">賬號密碼登陸</div>
					</div>
					</div>
				<div class="second"></div>
				<div class="big">
				    <div class="three">
						<form action="#" method="post" >
						      <div class="text"><input type="text" class="phone" name="name" tabindex="1" placeholder="支援QQ號/郵箱/手機號登陸"></div>
						      <div class="password"><input class="phone1" type="password" tabindex="2" name="paasword"  placeholder="QQ密碼">
	                          </div>
	                          <div  class="low_login" >
	                          <a class="uncheck" href="javascript:void(0)" onclick="my()" id="aaa"   tabindex="3">
	                         </a>
	                           <label class="low_login_wording">下次自動登入</label>
	                         </div>
	                         <div class="submit">
	                         <a class="login_button" hidefocus="true">
	                         <input type="submit" tabindex="4" value="登 錄" class="btn" ></a> 
	                         </div>
	                    </form>
					</div>
					<div class="bottom">
			         <a href="#" class="link"  target="_blank">忘了密碼？</a>
			         <span class="dotted">|</span>
			         <a href="#" class="link" target="_blank">註冊新帳號</a><span class="dotted">|</span> 
			         <a class="link"  href="#" target="_blank">意見反饋</a>
			        </div>
		        </div><!-- big -->
		     </div><!-- login -->
	     </div><!-- center -->
	  </div><!-- middle -->
	<div class="footer">
		<div class="footer">
		<a href="#" target="_blank">關於騰訊</a>&nbsp;|&nbsp;
		<a href="#" target="_blank">服務條款</a>&nbsp;|&nbsp;
		<a href="#" target="_blank">隱私政策</a>&nbsp;|&nbsp;
		<a href="#" target="_blank">客服中心</a>&nbsp;|&nbsp;
		<a href="#" target="_blank">聯絡我們</a>&nbsp;|&nbsp;
		<a href="#" target="_blank">幫助中心</a>&nbsp;|&nbsp;
		<span class="gray">©1119 - 2018 mcfeng. All Rights Reserved.</span></div>
	</div>
</div>
<script>
	function my(){
		var a=document.getElementById("aaa").name;
		if(a=="image"||a=="")
          {document.getElementById("aaa").style.backgroundPosition="-61px -16px";
           document.getElementById("aaa").name="imag";
       }
       else{
       	  document.getElementById("aaa").style.backgroundPosition="0";
       	document.getElementById("aaa").name="image";

       }
		//document.getElementById("aaa").style.background="url(https://mail.qq.com//zh_CN/htmledition/images/icon_ptloginpage1e9c5d.png) no-repeat;";
	  //	document.getElementById("aaa").style.background-position="-61px -16px";

	} 
</script>
</body>
</html>

相關推薦

仿qq email介面 登陸

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> </he

Android學習之仿QQ聊天介面的實現

前言： 好幾天沒動手了，感覺有點手懶了，幹我們這行真的一點不能懈怠啊！ 回來寫了個仿扣扣聊天介面的實現，動態新增聊天內容等！ 分析： 主體：RecylerView+LinearLayout 效果： 簡單的模仿一下扣扣。 下面介紹一下怎麼實現的

仿QQ聊天介面基本的Fragment用法。

先寫好佈局，上面用一個FrameLayout佈局。 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.and

自定義仿QQ主介面選項卡

自定義QQ主介面選項卡 QQ Android版本的效果先貼上來 可以看到這個可愛的選項卡,其實使用xml佈局可以很容易的弄出來,但是博主就帶大家封裝成一個自定義控制元件! 博主實現的效果 這速度。。。抱歉哈,博主也不知道為啥這麼快。。。。

如何使用MFC編寫自定義UI介面【附高仿QQ 2014登陸介面範例程式】

地址： http://blog.csdn.net/hujkay作者：Jekkay Hu([email protected])關鍵詞：MFC, 編寫異行窗體，自定義UI控制元件，VC++，異形控制元件,高仿QQ登陸介面, 擷取QQ密碼，QQ釣魚時間： 2014/4

《java---高仿QQ登陸介面》---完全手寫

package com.fenghuo.view; import java.awt.BorderLayout; import java.awt.Color; import java.awt.Cursor; import java.awt.Dimension; import

android實現仿QQ登陸介面的多賬號儲存

android應用程式中有些使用到使用者賬號登入，例如QQ登入，登入介面需要使用者輸入賬號，為了提高使用者體驗，應該儘量減少使用者的輸入操作，因此需要將使用者登入過的賬號儲存下來，以供下次使用。儲存登入賬號是一個小量資料，使用Sharedpreferences或普通檔案均可實現。以下程式程式碼儲存使用者使

Android 安卓 fragment+viewpager 仿qq介面 實現點選選單切換介面+滑動切換viewpager切換介面

原始碼地址 http://download.csdn.net/detail/zhangjm_123/7902245 最近寫了一個fragment+viewpager仿qq的app，先上圖                   如圖，介面底部有四個textview，分別

android仿qq實現自定義拍照介面CameraView

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">最近在做一個專案，發現呼叫系統相機的時候，在某些配置低的機型上面會獲取

循序漸進實現仿QQ介面（六）：異型選單與內建滾動條自繪

本篇演示實現仿QQ介面的異型選單與滾動條自繪。 先講解一下如何實現QQ的圓角選單，這個要用到HOOK了，因為選單是一種特殊的視窗，無法用FindWindow或通過HMENU來獲取到視窗控制代碼，也就無法子類化。必須下鉤子，這裡下的是WH_CALLWNDPROC的鉤子： B

JAVA仿QQ聊天系統4.0（擴充套件韓順平的程式的功能及介面）附原始碼

 下載連結  http://download.csdn.net/detail/qq245034548/8391381連結：https://pan.baidu.com/s/1btDApLQuHvLk44EtWKQygw 密碼：3ezf4 詳細設計4.1 系統程式流程如下    

DrawerLayout實現側滑仿QQ介面

簡介 可以說drawerLayout是因為第三方控制元件如MenuDrawer等的出現之後，google借鑑而出現的產物。 drawerLayout分為側邊選單和主內容區兩部分，側邊選單可以根據手勢展開與隱藏（drawerLayout自身特性）， 主內容區

仿QQ個人資訊詳情介面中背景圖的下拉擴充套件放大功能

    一般一些專案中都少不了一些頭部背景圖，但是如果背景圖靜態的現實並不能呈現出與使用者操作的互動感，所以要想辦法讓背景圖動起來，qq的一些互動感我很喜歡，比如他的個人詳情介面的背景圖就是可以下拉擴充套件，並在擴充套件到一定程度中可以放大圖片。其設計原理就是先隱藏頭部和底

C#\WPF高仿QQ音樂V12.8介面篇《2》

動態效果圖 獲取原始碼 通過關注個人公眾號：BigBearIT，如下 通過後臺回覆關鍵詞：WPF高仿QQ音樂原始碼 即可獲得原始碼下載地址。 後續版本更新後會在公眾號通知 /*******

循序漸進實現仿QQ介面（四）：圓形按鈕與工具欄自繪

這一篇本來應該演示如何實現仿QQ介面的中間客戶區與底部工具欄，不過在實現底部工具欄的時候發現圓形按鈕與工具欄自繪有不少取巧的方法，因此加插這麼一篇，講解一下如何實現圓形按鈕和工具欄自繪。 前面幾篇都是在講解如何實現QQ頂部的標題欄，是用視窗貼圖實現，也講到底部區域會用不同的

循序漸進實現仿QQ介面（一）：園角矩形與雙緩衝貼圖視窗

印象裡仿QQ介面的程式應該有很多，搜了一下，雖然出來一大堆，排除了重複的，卻只有兩三個，沒我想象的好。經常看到CSDN上有人問，QQ這個功能怎麼實現，那個介面怎麼實現，歸納了一下，決定寫這麼一個仿QQ介面程式，實用功能一律不實現，僅仿介面： 異型視窗貼圖介面介面可調色，換底

C#\WPF高仿QQ音樂V12.8介面篇《1》

背景 沒有背景，純粹就是為了總結備份一下原始碼，同時也是為了推推自己的公眾號，介面執行效果如下 ********************************************************       效果圖一      ***************

【SkinUI例項】仿QQ介面設計第三一課

這節說一下QQ的聊天面板 由於這兩天事情比較多，聊天面板也只是搭建完了介面，明天把內容充實一下，程式碼也將於明天公佈，敬請期待！ 先說一下修改的內容： 1：目前發現，當拖動視窗時，程式會出現卡頓的情況，同時cpu會顯著提升，經測試，此問題的根源在於GDI+的DrawI

仿qq會話列表滑動效果

滑動事件 style 執行 位移 記錄 htm kit lis rem 一、功能分析 qq會話列表可以向左滑動，然後出現刪除按鈕 二、知識點 touch事件，css3的transform屬性 三、實現思路 為每個列表項綁定touch事件，計算touch移動的距離，在touc

動手分析安卓仿QQ聯系人列表TreeView控件

code children cas tail pri bstr abstract viewgroup teset 因項目需要需要用到仿QQ聯系人列表的控件樣式，於是網上找到一個輪子（https://github.com/TealerProg/TreeView）