网页制作实践步骤三登录界面

来源：互联网发布：阿里云系统编辑：程序博客网时间：2024/05/01 23:12

科二挂了。。。怒刷登录界面，也是新写近300行css代码，酸爽无比

效果：

html：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="../css/login.css"></head><body><!--导航栏--><div class="nav">    <div class="header">        <div class="header_left">            <a href="../index.html"><h2 style="font-family:logo">校园生活</h2></a>            <ul>                <li><a href="../index.html" style="font-family: MyFont-light">主页</a></li>            </ul>        </div>        <div class="header_right">            <ul>                <li><a href="#" style="font-family: MyFont-light">登录</a></li>                <li><a href="#" style="font-family: MyFont-light">注册</a></li>            </ul>        </div>    </div></div><!--登录窗口--><div class="row">    <div class="row_top"><span style="font-family: MyFont-light;">登录</span></div>    <div class="row_body">       <div class="form_group">           <lable id="text_row">邮箱地址</lable>           <input id="input_email" type="email" />       </div>        <br />        <br />        <div class="form_group">            <label id="text_row_password">密码</label>            <input id="input_password" type="password" />        </div>        <div class="check_box">            <input type="checkbox">            <lable id="text_checkbox">Remember me</lable>        </div>        <div class="row_bottom">            <button style="font-family: MyFont-light;">登录</button>            <span><a href="#">忘记密码</a></span>        </div>    </div></div></body></html>

css部分：

/*created by Liu Xindi in summer of 2015*//*引用中文字体*/@font-face{    font-family: 'MyFont-normal';    src:url('../font/SourceHanSansCN-Normal.otf');    font-weight:normal;    font-style:normal;}@font-face{    font-family: 'MyFont-heavy';    src:url('../font/SourceHanSansCN-Heavy.otf');    font-weight:normal;    font-style:normal;}@font-face{    font-family: 'MyFont-light';    src:url('../font/SourceHanSansCN-Light.otf');    font-weight:normal;    font-style:normal;}@font-face{    font-family: 'MyFont-medium';    src:url('../font/SourceHanSansCN-Medium.otf');    font-weight:normal;    font-style:normal;}@font-face{    font-family: 'logo';    src:url('../font/Logo2.otf');    font-weight:normal;    font-style:normal;}/*样式重置*/body,ul,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,select{    padding:0;    margin:0;}a{    letter-spacing: 3px;}li{    list-style: none;}image{    border: none;}a{    text-decoration: none;}a:hover{    text-decoration: none;}body{    background-color: #F3F3F4;    background-image: url("../image/login_bg.png");}/*导航栏*/.nav{    background-color: #FFF;    border-width: 5px medium 1px;    border-style: solid none;    border-color: #F56857 ;    border-bottom: none;    -moz-border-top-colors: none;    -moz-border-right-colors: none;    -moz-border-bottom-colors: none;    -moz-border-left-colors: none;    border-image: none;    border-radius: 0px;    min-height: 50px;    margin-bottom: 50px;    font-weight: 300;    position: relative;    height: 66px;    font-size: 15px;}.header{    width: 1170px;    margin:0 auto;    position:relative;}.header_left{    color:#F56857;    position: relative;}.header_left a{    float: left;    height: 66px;}.header_left h2{    margin-top: 8px;    color: #F56857;}.header_left ul{    margin-left: 50px;    float: left;    width: 90px;    height: 72px;    text-align: center;}.header_left ul li{    width:90px;    line-height: 32px;}.header_left ul a{    text-align: center;    padding: 17px 15px;    height: 32px;    width: 60px;}.header_left ul li a:hover{    background-color: #F9F9F9;    color: #F56857;}.header_right{    position: relative;    float: right;    height: 66px;}.header_right ul{    margin-right: 40px;    height: 66px;}.header_right ul li{    position: relative;    height: 60px;    float: right;    width: 90px;    line-height: 66px;    text-align: center;}.header_right ul li a{    padding: 24px 15px;    height: 32px;}.header_right ul li a:hover{    background-color: #F9F9F9;    color: #F56857;}.row{    margin-left: 25%;    width: 48%;    position: relative;    height: 320px;    background-color: #ffffff;}.row_top{    color: #333;    background-color: #FAFAFA;    border-color: #DDD;    font-size: 16px;    padding: 10px 18px;    border-bottom: 1px solid transparent;    border-top-right-radius: 3px;    border-top-left-radius: 3px;    box-sizing: border-box;}.row_body{    padding: 15px;    box-sizing: border-box;}.form_group{    box-sizing: border-box;    padding-top: 8px;}#text_row{    float: left;    text-align: right;    margin-bottom: 0;    margin-left: 18%;    margin-top: 6px;}#input_email{    float: left;    padding-left: 4px;    margin-left: 30px;    display: block;    width: 50%;    height: 32px;    font-size: 14px;    line-height: 1.42857;    color: #555;    background-color: #FFF;    border: 1px solid #CCC;    border-radius: 4px;    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;}#text_row_password{    float: left;    text-align: right;    margin-bottom: 0;    margin-left: 23%;    margin-top: 6px;}#input_password{    float: left;    padding-left: 4px;    margin-left: 30px;    width: 50%;    height: 32px;    font-size: 14px;    line-height: 1.42857;    color: #555;    background-color: #FFF;    border: 1px solid #CCC;    border-radius: 4px;    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;}.check_box{    position: absolute;    margin-top: 55px;    margin-left: 210px;    font-weight: 100;    font-size: 14px;}#text_checkbox{    margin-left: 4px;}.row_bottom{    margin-top:100px;    margin-left: 210px;    height: 50px;}.row_bottom button{    position: absolute;    color: #FFF;    background-color: #F56857;    display: inline-block;    margin-bottom: 0;    font-weight: normal;    text-align: center;    vertical-align: middle;    cursor: pointer;    background-image: none;    border: 1px solid transparent;    white-space: nowrap;    padding: 6px 12px;    font-size: 16px;    line-height: 1.42857;    border-radius: 4px;    -moz-user-select: none;}.row_bottom button:hover{    background: #FFF none repeat scroll 0% 0%;    color: #F56857;    border: 2px solid #F56857;}.row_bottom span{    margin-left: 100px;    font-size: 13px;}.row_bottom span a{    position: absolute;    height: 50px;    margin-top: 10px;}

值得说的是：

1.如过父级设置position:absolute; 子元素也许设置position:absolute;才能改变子元素的高度，否则无法匹配；

2.padding值可以扩展标签a的hover的范围；

0 0

网页制作实践步骤三 登录界面

网页制作实践步骤三登录界面