CSS练习一(模仿163邮箱登陆)

// ');
code = code.replace(/&/g, '&');
return code;
};
var runCode = function (code) {
if (code != "") {
var newwin = window.open('', "_blank", '');
newwin.document.open('text/html', 'replace');
newwin.opener = null;
newwin.document.write(code);
newwin.document.close();
}
};
var evalCode = function (code) {
var head = document.getElementsByTagName("head")[0];
var js = document.createElement("script");
js.type = "text/javascript";
js.charset = "utf-8";
js.text = code;
head.insertBefore(js, head.firstChild);
head.removeChild(js);
};

$(function () {
$("#RunBtn").click(function () {
var code = $("#CodeText").text();
code = normalizeCode(code);
runCode(code);
});
});
// ]]>

<div> <code id="CodeText" class="code_input" ><!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body, h1, h2, h3, ul, li, form, p, img { border: 0 none; margin: 0; padding: 0; } body { margin: 0px; padding: 0px; font-size: 12px; font-family: verdana; padding-top: 50px; } img { border: none; margin: 0px; padding: 0px; } a { text-decoration: none; color: #848585; } a:hover { color: #000; } select, input, button, button img, label { vertical-align: middle; } /*-----------------头-------------------*/ .header { width: 800px; height: 64px; border: none; margin-left: auto; margin-right: auto; position: relative; } .headLogo { top: 17px; left: 0px; position: absolute; } .headerIntro { position: absolute; top: 17px; left: 144px; background-image: url(http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_bg_v5.png); width: 144px; height: 28px; display: block; background-position: 0px -64px; } .headerNav { position: absolute; top: 21px; right: 0px; text-align: right; } .headerNav a { margin-left: 13px; } /*-------------------内容-------------------*/ .content { width: 100%; height: 440px; background-image: url(http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_border_bg.jpg); background-repeat: repeat-x; } .content_main { width: 900px; position: relative; margin-left: auto; margin-right: auto; height: 440px; background-image: url(http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_body_bg.jpg); } .login { width: 338px; height: 388px; background-color: #FFFFFF; float: right; border: solid 1px #b7c2c9; margin-top: 24px; position: relative; margin-right: 90px; } .loginTap { width: 338px; height: 49px; background-image: url(http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_bg_v5.png); } .loginForm { margin-top: 20px; } .inputLine { border-color: #BAC5D4 #D5DBE2 #D5DBE2 #BAC5D4; border-style: solid; border-width: 1px; clear: both; height: 33px; line-height: 33px; margin-left: 42px; margin-top: 0; position: relative; width: 253px; cursor: text; } .inputLine_hover { border-color: #a6b4c9; border-bottom-color: #bac5d4; border-right-color: #bac5d4; } .inputLine_fouce { border-color: #60a4e8; border-bottom-color: #84b4fc; border-right-color: #84b4fc; } .inputLine_fouce .loginInput_placeholder { color: #b4c0d2; } .loginInput { background-color: #EEF3F8; border: medium none; color: #333; font-family: verdana; font-size: 16px; font-weight: 700; height: 20px; left: 0; line-height: 17px; padding: 7px 8px 6px; top: 0; width: 237px; position: absolute; } .loginInput_placeholder { background: none repeat scroll 0 0 transparent; color: #92a4bf; font-size: 14px; left: 0; position: absolute; text-indent: 10px; top: 0; } /*自动登录*/ .auto_login_div { color: #555555; height: 14px; line-height: 14px; margin-left: 42px; margin-top: 19px; position: relative; width: 255px; z-index: 1; } .auto_cheack { height: 14px; } .auto_cheack_input { height: 13px; margin: 0; overflow: hidden; padding: 0; width: 13px; } .auto_cheack_label { font-family: simsun; cursor: pointer; } .auto_cheack_tip { background-color: #FFFCD1; border: 1px solid #F1D47C; color: #DE6907; display: none; height: 36px; left: 0; line-height: 18px; padding: 5px; text-align: left; top: 16px; width: 180px; z-index: 9; } /*登录*/ .login_div { border: medium none; height: 35px; margin-top: 19px; width: 255px; clear: both; line-height: 33px; margin-left: 42px; position: relative; } .btn_login { background-image: url("http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_bg_v5.png"); border: 0 none; cursor: pointer; display: inline-block; float: right; font-size: 14px; font-weight: 700; height: 35px; line-height: 35px; outline: 0 none; padding: 0; text-align: center; vertical-align: baseline; background-position: 0 -208px; color: #FFFFFF; width: 102px; } .btn_login_hover { background-position: 0 -256px; } .btn_login_active { background-position: 0 -304px; } /*-------------------底部-------------------*/ .footer { width: 100%; height: 65px; border-top: 1px solid #FFFFFF; margin: 0 auto; } .footer_inner { background: none repeat scroll 0 0 #F7F7F7; color: #848585; height: 63px; margin: 0 auto; overflow: visible; position: relative; width: 900px; } .footer_logo { left: 35px; top: 11px; position: absolute; width: 122px; } .right_div { left: 157px; top: 25px; position: absolute; width: 636px; text-align: center; } .copyright { } .kexing { position: absolute; right: 50px; top: 24px; width: 57px; } </style> <script src="http://files.cnblogs.com/cainiaoguoshi/jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/javascript"> //方法集合 var PrivateMethod = { //初始化样式 InitCss: function () { //用户名------------------ $("#useName").blur(function () { $("#useNameLine").removeClass("inputLine_fouce"); }); $("#useName").focusin(function () { $("#useNameLine").addClass("inputLine_fouce"); }); $("#useNameLine").mouseover(function () { $("#useNameLine").addClass("inputLine_hover"); }); $("#useNameLine").mouseout(function () { $("#useNameLine").removeClass("inputLine_hover"); }); $("#useName").keyup(function () { var useNameV = $("#useName").val(); if (useNameV !== "") { //$("#userNameHolder").css("visibility", "hidden"); $("#userNameHolder").hide(0); } else { //$("#userNameHolder").css("visibility", "show"); $("#userNameHolder").show(0); } }); //密码-------------------- $("#passWord").blur(function () { $("#passWordLine").removeClass("inputLine_fouce"); }); $("#passWord").focusin(function () { $("#passWordLine").addClass("inputLine_fouce"); }); $("#passWordLine").mouseover(function () { $("#passWordLine").addClass("inputLine_hover"); }); $("#passWordLine").mouseout(function () { $("#passWordLine").removeClass("inputLine_hover"); }); $("#passWord").keyup(function () { var useNameV = $("#passWord").val(); if (useNameV !== "") { $("#pwdHolder").hide(0); } else { $("#pwdHolder").show(0); } }); //提醒自动登录 $("#autoLoginLabel").mousemove(function () { $("#autoTip").show(); }); $("#autoLoginLabel").mouseout(function () { $("#autoTip").hide(); }); //登录 $("#loginBtn").mousemove(function () { $("#loginBtn").addClass("btn_login_hover"); }); $("#loginBtn").mouseout(function () { $("#loginBtn").removeClass("btn_login_hover"); }); $("#loginBtn").mousedown(function () { $("#loginBtn").addClass("btn_login_active"); }); $("#loginBtn").mouseup(function () { $("#loginBtn").removeClass("btn_login_active"); }); }, //设置padding SetPadding: function () { var winHeight = $(window).height(); if (winHeight > 570) { var difHeight = winHeight - 570; var topHeight = difHeight / 2; $("body").css("paddingTop", topHeight + "px"); } } }; $(function () { PrivateMethod.InitCss(); PrivateMethod.SetPadding(); $(window).resize(function () { PrivateMethod.SetPadding(); }); }); </script> <div class="header"> <h1 class="headLogo"> <a href="http://www.baidu.com/" target="_blank"> <img alt="163" src="http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_163logo.gif" /></a> </h1> <a class="headerIntro"></a> <div class="headerNav"> <a href="#">邮箱</a> <a href="#">帮助</a> </div> </div> <div class="content"> <div class="content_main"> <div class="login" id="loginBlock"> <div class="loginTap"> </div> <div class="loginForm"> <form action="Index.cshtml"> <div class="inputLine" id="useNameLine"> <input type="text" name="useName" id="useName" class="loginInput" /> <label id="userNameHolder" class="loginInput_placeholder" for="useName"> 用户名</label> </div> <div class="inputLine" id="passWordLine" style="margin-top: 10px;"> <input type="password" name="passWord" id="passWord" class="loginInput" /> <label id="pwdHolder" class="loginInput_placeholder" for="passWord"> 密码</label> </div> <div id="autoLogin" class="auto_login_div"> <div class="auto_cheack"> <input title="自动登录" class="auto_cheack_input" type="checkbox" id="autoLoginCheack" /> <label id="autoLoginLabel" class="auto_cheack_label" for="autoLoginCheack">  自动登录 </label> <div class="auto_cheack_tip" id="autoTip"> 为了您的信息安全，请不要在网吧或公用电脑上使用此功能！ </div> </div> </div> <div class="login_div"> <input type="button" class="btn_login" id="loginBtn" value="登 录" /> </div> </form> </div> </div> </div> </div> <div class="footer"> <div class="footer_inner" id="footerInner"> <a class="footer_logo" href="#" target="_blank"> <img src="http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_163logo_bottom.gif" alt="浙江XX软件" /> </a><a id="kexing" class="kexing" href="#" target="_blank"> <img src="http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_knet.png" alt="可信网站，身份验证" /> </a> <div class="right_div"> <span class="copyright">浙江XXXX有限公司版权所有 © 1997-2013</span> </div> </div> </div> </body> </html> </code> </div>

CSS练习一(模仿163邮箱登陆)的更多相关文章

python+selenium实现163邮箱登陆—iframe动态ID定位及常用定位方法
今天发现之前的登录163邮箱脚本定位不到iframe了,原因是iframe拼接了动态ID,修改后的脚本如下: from selenium import webdriver driver = webdr ...
[Python爬虫] Selenium实现自动登录163邮箱和Locating Elements介绍
前三篇文章介绍了安装过程和通过Selenium实现访问Firefox浏览器并自动搜索"Eastmount"关键字及截图的功能.而这篇文章主要简单介绍如何实现自动登录163邮箱,同时 ...
java mail(发送邮件--163邮箱)
package com.util.mail; /** * 发送邮件需要使用的基本信息 */ import java.util.Properties; public class MailSenderIn ...
ios9邮箱添加163邮箱
电脑登陆163邮箱➡️设置➡️开启pop3/smtp/imap功能➡️保存.开启后系统会给你个"客户端授权密码",同时会发短信到你手机里. 打开手机,设置➡️邮件,通讯录,日历➡️ ...
Gmail，QMail，163邮箱的 IMAP/SMTP/POP3 地址
我们在客户端设置邮箱或者使用 PHPMailer 发送邮件的时候,我们都会去查找这些邮箱的 IMAP/SMTP/POP3 地址,这里就列出 Gmail, QMail, 163邮箱这三个常用邮箱的这些地 ...
java连接163邮箱发送邮件
一:jar包:下载链接:链接: http://pan.baidu.com/s/1dDhIDLv 密码: ibg5二:代码 1-------------------------------------- ...
利用Python+163邮箱授权码发送带附件的邮件
背景前段时间写了个自动爬虫的脚本,定时在阿里云服务器上执行,会从某个网站上爬取链接保存到txt文本中,但是脚本不够完善,我需要爬虫完毕之后通过邮件把附件给我发送过来,之前写过一个<利用Pyth ...
利用Python+163邮箱授权码发送邮件
背景前段时间写了个自动打卡的脚本,但是脚本不够完善,我需要知道,打卡到底成没成功,因此,我想到了用Python执行完代码之后,再执行一段发送邮件的代码.需求开始明确了,就开始分析和写代码实现吧. 分 ...
BugFree设置邮箱通知(这里以163邮箱为例)
公司用bugfree在进行新建Bug指派抄送给同事的时候,总是有人不及时登录BugFree去查看指派给自己的,所以要加一个邮箱通知,这样可以及时通知到被指派的同事. 百度上很多用的是QQ邮箱来实现的, ...

随机推荐

修复 SQLite 数据库文件
目录第1章说明 1 1 下载SQLite Tools 1 2 运行 2 第1章说明笔者编写的一个程序,无法往 SQLite 数据库文件里写数据.使用SQLiteSpy打开该 ...
signalR的一些细节
获取根目录通过AppDomain.CurrentDomain.BaseDirectory 因为不能直接获取session ,使用的替代方案如下 private static Dictionary< ...
struts2后台返回json到jsp页面
1.在action定义一个全局变量如: private Map<String, Object> dataMap; 2.控制层方法说明:主要的目的是把我们定义的Map转为Json对象,然后 ...
【CITE】5个最优秀的Java和C#代码转换工具
毋庸置疑,Java是一门最受欢迎而且使用最广泛的编程语言,目前有超过9百万的Java开发者从事web服务的开发,Java以“编写一次,可在任何地方运行”而著称,同时这也是其大受欢迎的主要原因. 和Ja ...
Python 练习 11
#!/usr/bin/python # -*- coding: UTF-8 -*- import math for i in range(10000): #转化为整型值 x = int(math.sq ...
笔记8：winfrom连接数据库DBHelp
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
HDUOJ----1234 开门人和关门人（浙江大学考研题）
开门人和关门人 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
MATLAB随机森林回归模型
MATLAB随机森林回归模型: 调用matlab自带的TreeBagger.m T=textread('E:\datasets-orreview\discretized-regression\10bi ...
PowerPivot安装完成后创建网站或网站集报错解决办法
根据上一篇“在现有 SharePoint 服务器上安装 PowerPivot for SharePoint”后,新建网站或网站集时报错,重新配置了一下PowerPivot For SharePoint ...
Js笔试题之parseInt()和.map()
parseInt()的几个例子 var b = parseInt("01"); alert("b="+b); var c = parseInt("09 ...

CSS练习一(模仿163邮箱登陆)

CSS练习一(模仿163邮箱登陆)的更多相关文章

随机推荐

热门专题