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

时间：2023-01-19 10:05:43

// ');
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"> &nbsp;自动登录&nbsp;</label> <div class="auto_cheack_tip" id="autoTip"> 为了您的信息安全，请不要在网吧或公用电脑上使用此功能！ </div> </div> </div> <div class="login_div"> <input type="button" class="btn_login" id="loginBtn" value="登&nbsp;录" /> </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="浙*X软件" /> </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">浙*XXX有限公司版权所有 © 1997-2013</span> </div> </div> </div> </body> </html> </code> </div>

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

  1. python&plus;selenium实现163邮箱登陆—iframe动态ID定位 及常用定位方法

    今天发现之前的登录163邮箱脚本定位不到iframe了,原因是iframe拼接了动态ID,修改后的脚本如下: from selenium import webdriver driver = webdr ...

  2. &lbrack;Python爬虫&rsqb; Selenium实现自动登录163邮箱和Locating Elements介绍

    前三篇文章介绍了安装过程和通过Selenium实现访问Firefox浏览器并自动搜索"Eastmount"关键字及截图的功能.而这篇文章主要简单介绍如何实现自动登录163邮箱,同时 ...

  3. java mail&lpar;发送邮件--163邮箱&rpar;

    package com.util.mail; /** * 发送邮件需要使用的基本信息 */ import java.util.Properties; public class MailSenderIn ...

  4. ios9邮箱添加163邮箱

    电脑登陆163邮箱➡️设置➡️开启pop3/smtp/imap功能➡️保存.开启后系统会给你个"客户端授权密码",同时会发短信到你手机里. 打开手机,设置➡️邮件,通讯录,日历➡️ ...

  5. Gmail，QMail，163邮箱的 IMAP&sol;SMTP&sol;POP3 地址

    我们在客户端设置邮箱或者使用 PHPMailer 发送邮件的时候,我们都会去查找这些邮箱的 IMAP/SMTP/POP3 地址,这里就列出 Gmail, QMail, 163邮箱这三个常用邮箱的这些地 ...

  6. java连接163邮箱发送邮件

    一:jar包:下载链接:链接: http://pan.baidu.com/s/1dDhIDLv 密码: ibg5二:代码 1-------------------------------------- ...

  7. 利用Python&plus;163邮箱授权码发送带附件的邮件

    背景 前段时间写了个自动爬虫的脚本,定时在阿里云服务器上执行,会从某个网站上爬取链接保存到txt文本中,但是脚本不够完善,我需要爬虫完毕之后通过邮件把附件给我发送过来,之前写过一个<利用Pyth ...

  8. 利用Python&plus;163邮箱授权码发送邮件

    背景 前段时间写了个自动打卡的脚本,但是脚本不够完善,我需要知道,打卡到底成没成功,因此,我想到了用Python执行完代码之后,再执行一段发送邮件的代码.需求开始明确了,就开始分析和写代码实现吧. 分 ...

  9. BugFree设置邮箱通知&lpar;这里以163邮箱为例&rpar;

    公司用bugfree在进行新建Bug指派抄送给同事的时候,总是有人不及时登录BugFree去查看指派给自己的,所以要加一个邮箱通知,这样可以及时通知到被指派的同事. 百度上很多用的是QQ邮箱来实现的, ...

随机推荐

  1. C&num; 词法分析器（五）转换 DFA

    系列导航 (一)词法分析介绍 (二)输入缓冲和代码定位 (三)正则表达式 (四)构造 NFA (五)转换 DFA (六)构造词法分析器 (七)总结 在上一篇文章中,已经得到了与正则表达式等价的 NFA ...

  2. python之路-Day6

    time & datetime模块 #_*_coding:utf-8_*_ __author__ = 'Alex Li' import time # print(time.clock()) # ...

  3. Oracle 列顺序测试

    列顺序测试 大家在做表设计的时候通常对表中列的排列顺序没有过多注意,但是其实越常用的列,它的位置越靠前,则查询速度越快. 因为每个block里面存储了row directory (每行数据在块中的位移 ...

  4. C&num;中string&period;Empty和&quot&semi;&quot&semi;、null的区别

    string.Empty是string类的一个静态常量,而""则表示一个空字符串. string是一种特殊的引用类型,它的null值则表示没有分配内存. 使用ILSpy反编译Str ...

  5. 发现AspNet&period;Core版本控制库Bug一枚，你还想入坑？

    我,博客写作小白一枚,注册账号多年却未曾留下只言片语,在潜水的这些年里从大家的博客中收获了很多新的知识忽觉惶恐心有不安,是时候给大家分享一些我的经验和教训了.嗯嗯,实话告诉大家前面的话的都是来凑字数的 ...

  6. PHP中&colon;&colon;的使用

    访问静态变量,静态属性,const修饰的变量.

  7. javascript 回到顶部

    <script type="text/javascript"> window.onload = function(){ var timer = null; //用于判断 ...

  8. &lowbar;proto&lowbar; 和prototype自己的理解

    对象(obj)并不具有prototype属性,只有函数(function)才有prototype属性 1.在JS里,万物皆对象. 方法(Function)是对象,方法的原型(Function.prot ...

  9. 【王者荣耀之IT大神版】1&period;1版本升级之&OpenCurlyDoubleQuote;投降机制”

    版本:1.1 关于“投降机制”的理论基础与灵感来源于<微习惯>这本书. 简单来说,微习惯就是很小很小的习惯,比如说,每天做一个俯卧撑,每天看一页书等等.我们以前也许有过很多的计划,但却总是 ...

  10. The D Programming Language 书评

    此书的作者 Andrei Alexandrescu 作为前 C++ 社区的一朵奇葩,因为实在是不满 C++ 标准委员会的官僚作风,跳槽到了 D 社区,成为了 D 发明人 Walt Brightman ...

相关文章