纯CSS3制作的登录模板简洁蓝白(非IE效果更好)

最新推荐文章于 2023-03-05 18:27:32 发布

心在忍耐

最新推荐文章于 2023-03-05 18:27:32 发布

阅读量6.3k

点赞数 10

分类专栏： div/css

本文链接：https://blog.csdn.net/jason_ldh/article/details/9881217

版权

div/css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

纯CSS3制作的登录模板简洁蓝白(非IE效果更好) [图]

效果图：

源码如下

 
    001<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
    002<HTML><HEAD><TITLE>纯CSS3制作的 登录模板 简洁蓝白(非IE效果更好)</TITLE>
 
    003<META content="text/html; charset=unicode"http-equiv=Content-Type>
 
    004<STYLE>
 
    005    h1, h2, h3, h4, h5, h6{
 
    006    font-weight:normal;
 
    007    margin:0;
 
    008    line-height:1.1em;
 
    009    color:#000;
 
    010    }
 
    011    h1{font-size:2em;margin-bottom:.5em;}
 
    012    h2{font-size:1.75em;margin-bottom:.5142em;padding-top:.2em;}
 
    013    h3{font-size:1.5em;margin-bottom:.7em;padding-top:.3em;}
 
    014    h4{font-size:1.25em;margin-bottom:.6em;}
 
    015    h5,h6{font-size:1em;margin-bottom:.5em;font-weight:bold;}
 
    016    p, blockquote, ul, ol, dl, form, table,pre{line-height:inherit;margin:001.5em0;}
 
    017    ul, ol, dl{padding:0;}
 
    018    ul ul, ul ol, ol ol, ol ul, dd{margin:0;}
 
    019    li{margin:0002em;padding:0;display:list-item;list-style-position:outside;}
 
    020    blockquote, dd{padding:0002em;}
 
    021    pre,code, samp, kbd, var{font:100%mono-space,monospace;}
 
    022    pre{overflow:auto;}
 
    023    abbr, acronym{
 
    024    text-transform:uppercase;
 
    025    border-bottom:1pxdotted#000;
 
    026    letter-spacing:1px;
 
    027    }
 
    028    abbr[title], acronym[title]{cursor:help;}
 
    029    small{font-size:.9em;}
 
    030    sup,  sub{font-size:.8em;}
 
    031    em, cite, q{font-style:italic;}
 
    032    img{border:none;}
 
    033    hr{display:none;}
 
    034    table{width:100%;border-collapse:collapse;}
 
    035    th,caption{text-align:left;}
 
    036    form div{margin:.5em0;clear:both;}
 
    037    label{display:block;}
 
    038    fieldset{margin:0;padding:0;border:none;}
 
    039    legend{font-weight:bold;}
 
    040    input[type="radio"],input[type="checkbox"], .radio, .checkbox{margin:0.25em00;}
 
    041    /* base */
 
    042    body, table, input, textarea, select, li, button{
 
    043    font:1em"Lucida Sans Unicode","Lucida Grande",sans-serif;
 
    044    line-height:1.5em;
 
    045    color:#444;
 
    046    }
 
    047    body{
 
    048    font-size:12px;
 
    049    background:#c4f0f1;
 
    050    text-align:center;
 
    051    }
 
    052    /* login form */
 
    053    #login{
 
    054    margin:5emauto;
 
    055    background:#fff;
 
    056    border:8pxsolid#eee;
 
    057    width:500px;
 
    058    -moz-border-radius:5px;
 
    059    -webkit-border-radius:5px;
 
    060    border-radius:5px;
 
    061    -moz-box-shadow:0010px#4e707c;
 
    062    -webkit-box-shadow:0010px#4e707c;
 
    063    box-shadow:0010px#4e707c;
 
    064    text-align:left;
 
    065    position:relative;
 
    066    }
 
    067    #login a, #login a:visited{color:#0283b2;}
 
    068    #login a:hover{color:#111;}
 
    069    #login h1{
 
    070    background:#0092c8;
 
    071    color:#fff;
 
    072    text-shadow:#007dab01px0;
 
    073    font-size:14px;
 
    074    padding:18px23px;
 
    075    margin:001.5em0;
 
    076    border-bottom:1pxsolid#007dab;
 
    077    }
 
    078    #login .register{
 
    079    position:absolute;
 
    080    float:left;
 
    081    margin:0;
 
    082    line-height:30px;
 
    083    top:-40px;
 
    084    right:0;
 
    085    font-size:11px;
 
    086    }
 
    087    #login p{margin:.5em25px;}
 
    088    #login div{
 
    089    margin:.5em25px;
 
    090    background:#eee;
 
    091    padding:4px;
 
    092    -moz-border-radius:3px;
 
    093    -webkit-border-radius:3px;
 
    094    border-radius:3px;
 
    095    text-align:right;
 
    096    position:relative;
 
    097    }
 
    098    #login label{
 
    099    float:left;
 
    100    line-height:30px;
 
    101    padding-left:10px;
 
    102    }
 
    103    #login .field{
 
    104    border:1pxsolid#ccc;
 
    105    width:280px;
 
    106    font-size:12px;
 
    107    line-height:1em;
 
    108    padding:4px;
 
    109    -moz-box-shadow:inset005px#ccc;
 
    110    -webkit-box-shadow:inset005px#ccc;
 
    111    box-shadow:inset005px#ccc;
 
    112    }
 
    113    #login div.submit{background:none;margin:1em25px;text-align:left;}
 
    114    #login div.submit label{float:none;display:inline;font-size:11px;}
 
    115    #login button{
 
    116    border:0;
 
    117    padding:030px;
 
    118    height:30px;
 
    119    line-height:30px;
 
    120    text-align:center;
 
    121    font-size:14px;
 
    122    Font-Weight:bold;
 
    123    color:#fff;
 
    124    text-shadow:#007dab01px0;
 
    125    background:#0092c8;
 
    126    -moz-border-radius:50px;
 
    127    -webkit-border-radius:50px;
 
    128    border-radius:50px;
 
    129    cursor:pointer;
 
    130    }
 
    131    #login .forgot{text-align:right;font-size:11px;}
 
    132    #login .back{padding:1em0;border-top:1pxsolid#eee;text-align:right;font-size:20px;}
 
    133    #login .error{
 
    134    float:left;
 
    135    position:absolute;
 
    136    left:95%;
 
    137    top:-5px;
 
    138    background:#890000;
 
    139    padding:5px10px;
 
    140    font-size:11px;
 
    141    color:#fff;
 
    142    text-shadow:#50001px0;
 
    143    text-align:left;
 
    144    white-space:nowrap;
 
    145    border:1pxsolid#500;
 
    146    -moz-border-radius:3px;
 
    147    -webkit-border-radius:3px;
 
    148    border-radius:3px;
 
    149    -moz-box-shadow:005px#700;
 
    150    -webkit-box-shadow:005px#700;
 
    151    box-shadow:005px#700;
 
    152    }
 
    153    </STYLE>
 
    154 
 
    155<STYLE id=wiz_custom_css type=text/css>
 
    156body
 
    157{
 
    158    font-family: 微软雅黑,Georgia,Helvetica,Arial,sans-serif,宋体,serif;
 
    159    font-size:10.5pt;
 
    160    line-height:1.5;
 
    161}
 
    162html, body, div, span, applet, object, iframe, p, blockquote,pre,
 
    163abbr, acronym, address, big, cite,  code,
 
    164del, dfn, em, font, img, ins, kbd, q, s, samp,
 
    165small, strike, strong,sub, sup, tt, var,
 
    166b, u, i, center,
 
    167dl, dt, dd, ol, ul, li,
 
    168fieldset, form, label, legend,
 
    169table, caption, tbody, tfoot, thead, tr, th, td
 
    170{
 
    171    color: inherit;
 
    172    background-color: inherit;
 
    173}
 
    174 
 
    175h1  {
 
    176    font-size:1.5em;
 
    177    font-weight:bold;
 
    178}
 
    179h2  {
 
    180    font-size:1.4em;
 
    181    font-weight:bold;
 
    182}
 
    183h3  {
 
    184    font-size:1.3em;
 
    185    font-weight:bold;
 
    186}
 
    187h4  {
 
    188    font-size:1.2em;
 
    189    font-weight:bold;
 
    190}
 
    191h5  {
 
    192    font-size:1.1em;
 
    193    font-weight:bold;
 
    194}
 
    195h6  {
 
    196    font-size:1.0em;
 
    197    font-weight:bold;
 
    198}
 
    199img {
 
    200    border:0;
 
    201}
 
    202 
 
    203 
 
    204</STYLE>
 
    205 
 
    206<META name=GENERATOR content="MSHTML 9.00.8112.16421"></HEAD>
 
    207<BODY>
 
    208<FORM id=login method=post action="">
 
    209<H1><STRONG>考生登录</STRONG></H1>
 
    210<DIV><LABEL for=login_username><STRONG>考生学号：</STRONG></LABEL> <INPUT
 
    211id=login_username class="field required"title=请输入您的用户名 name=username> </DIV>
 
    212<DIV><LABEL for=login_password><STRONG>考生密码：</STRONG></LABEL> <INPUT
 
    213id=login_password class="field required"title=密码不能为空 name=password
 
    214type=password> </DIV>
 
    215<DIV class=submit><BUTTON type=submit>登录</BUTTON> </DIV></FORM></BODY></HTML>