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邮箱来实现的, ...

随机推荐

selenium+python笔记10
#!/usr/bin/env python # -*- coding: utf-8 -*- """ 我们多添加一些测试场景,比如:删除邮件,查找邮件,发送邮件等等 &qu ...
谈谈JPA-03-基本注解
@Entity @Entity 标注用于实体类声明语句之前,指出该Java 类为实体类,将映射到指定的数据库表.如声明一个实体类 Customer,它将映射到数据库中的 customer 表上. @T ...
QMessageBox中按钮的汉化
方法一:直接添加汉语按钮: QMessageBox mess(QMessageBox::Question, "删除提示", "确认删除所选组件?", NULL) ...
Java 集合系列 02 Collection架构
java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...
override和overload的区别
override(重写,覆盖) 1.方法名.参数.返回值相同. 2.子类方法不能缩小父类方法的访问权限. 3.子类方法不能抛出比父类方法更多的异常(但子类方法可以不抛出异常). 4.存在于父类和子类之 ...
DOI EXCEL显示报表
我这个是比较不规则的数据填充 1.程序开头,定义一个工作区,存对应单元格的值: BEGIN OF TY_EXCEL, C031() TYPE C, C032() TYPE C, C033() TYPE ...
EF5.X Code First表关联与延迟加载
1-指定导航属性,会自动生成外键,命名规则为:“表名_主键名”2-默认情况下与导航属性的主键名称相同的字段会自动被标记为外键3-通过[ForeignKey]标记指定实体类的属性为外键,4-方式2的升级 ...
apache 修改最大连接数
1.在哪里设置? 服务器的为FreeBSD 6.2 ,apache 2.24,使用默认配置(FreeBSD 默认不加载自定义MPM配置),默认最大连接数是250 在/usr/local/etc/apa ...
bzoj 2661: [BeiJing wc2012]连连看
#include<cstdio> #include<iostream> #include<cstring> #include<cmath> #inclu ...
Java中断言的使用（转）
相信学过c,c++的朋友一定不会对断言感到陌生.下面介绍一下断言在JAVA中的使用,JAVA是从JDK1.4才开始支持断言的(添加了关键字assert),请注意老版的JRE不支持. 断言概述编写代码 ...

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

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

随机推荐

热门专题