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

随机推荐

清理PC垃圾
@echo off pause echo 正在清除系统垃圾文件,请稍等...... del /f /s /q %systemdrive%\*.tmp del /f /s /q %systemdrive ...
使用Beanstalkd实现队列
Beanstalkd可以想象成缓存当中的memcahe或者redise,将我们的队列任务放到内存中进行管理. 运行环境是在linux中,反正我的windows中没运行成功.../(ㄒoㄒ)/~~ 首先 ...
经典排序算法---冒泡排序（Bubble Sort）
原理是临近的数字两两进行比较,按照从小到大或者从大到小的顺序进行交换, 这样一趟过去后,最大或最小的数字被交换到了最后一位,然后再从头开始进行两两比较交换,直到倒数第二位时结束 void Bubble ...
sh脚本异常：bad interpreter: No such file or directory
转:http://bluedest.iteye.com/blog/1674963 在Linux中执行.sh脚本,异常/bin/sh^M: bad interpreter: No such file o ...
PHP读取文件夹目录，按时间排序，大小排序，名字排序
工作中有时候会遇到文件存储数据,但是在前台显示的时候又因为没有数据库,无法使用上传或最后一次修改日期字段排序,所以有了如下代码: <?php $dir = "./";//目录 ...
cf(#div1 A. Dreamoon and Sums)(数论)
A. Dreamoon and Sums time limit per test 1.5 seconds memory limit per test 256 megabytes input stand ...
Java 集合系列 09 HashMap详细介绍(源码解析)和使用示例
java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...
MATLAB 矩阵转化为灰度图
A=[ 1.00 0.96 0.98 0.88 0.94 0.61 0.96 0.80 0.98 0.89 0.96 1.00 0.94 0.90 0.95 0.71 0.96 0.83 0.90 0 ...
《Play for Java》学习笔记（一）项目框架
从今天开始认真复习<Play for JAVA>,该书以一个案例为主线,以前为应付项目马马虎虎看了一遍,好多地方都不明白!现在跟着这本书再走一遍,认真模拟,当做一个项目啦!! 一.Play ...
Java多线程-新特性-有返回值的线程
在Java5之前,线程是没有返回值的,常常为了“有”返回值,破费周折,而且代码很不好写.或者干脆绕过这道坎,走别的路了. 现在Java终于有可返回值的任务(也可以叫做线程)了. 可返回值的任务必须实现 ...

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

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

随机推荐

热门专题