频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
HTML(css+div)登录界面的建设(代码实例)
2018-06-04 09:59:52           
收藏   我要投稿

HTML(css+p)登录界面的建设(代码实例)

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>login</title>  
<style type="text/css">  
*{  
    margin: 0;  
    padding: 0;  
}  
#wrap {  
    height: 719px;  
    width: 100;  
    background-image: url(4.jpg);  
    background-repeat: no-repeat;  
    background-position: center center;  
    position: relative;  
}  
#head {  
    height: 120px;  
    width: 100;  
    background-color: #66CCCC;  
    text-align: center;  
    position: relative;  
}  
#foot {  
    width: 100;  
    height: 126px;  
    background-color: #CC9933;  
    position: relative;  
}  
#wrap .logGet {  
    height: 408px;  
    width: 368px;    
    position: absolute;  
    background-color: #FFFFFF;  
    top: 20%;  
    right: 15%;  
}  
.logC a button {  
    width: 100%;  
    height: 45px;  
    background-color: #ee7700;  
    border: none;  
    color: white;  
    font-size: 18px;  
}  
.logGet .logD.logDtip .p1 {  
    display: inline-block;  
    font-size: 28px;  
    margin-top: 30px;  
    width: 86%;  
}  
#wrap .logGet .logD.logDtip {  
    width: 86%;  
    border-bottom: 1px solid #ee7700;  
    margin-bottom: 60px;  
    margin-top: 0px;  
    margin-right: auto;  
    margin-left: auto;  
}  
.logGet .lgD img {  
    position: absolute;  
    top: 12px;  
    left: 8px;  
}  
.logGet .lgD input {  
    width: 100%;  
    height: 42px;  
    text-indent: 2.5rem;  
}  
#wrap .logGet .lgD {  
    width: 86%;  
    position: relative;  
    margin-bottom: 30px;  
    margin-top: 30px;  
    margin-right: auto;  
    margin-left: auto;  
}  
#wrap .logGet .logC {  
    width: 86%;  
    margin-top: 0px;  
    margin-right: auto;  
    margin-bottom: 0px;  
    margin-left: auto;  
}  
  
  
.title {  
    font-family: "宋体";  
    color: #FFFFFF;  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */  
    font-size: 36px;  
    height: 40px;  
    width: 30%;  
}  
  
.copyright {  
    font-family: "宋体";  
    color: #FFFFFF;  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */  
    height: 60px;  
    width: 40%;  
    text-align:center;  
}  
      
  
#foot .copyright .img {  
    width: 100%;  
    height: 24px;  
    position: relative;  
}  
.copyright .img .icon {  
    display: inline-block;  
    width: 24px;  
    height: 24px;  
    margin-left: 22px;  
    vertical-align: middle;  
    background-image: url(%E7%94%B5%E5%AD%90%E9%82%AE%E4%BB%B6.png);  
    background-repeat: no-repeat;  
    vertical-align: middle;  
    margin-right: 5px;  
}  
      
.copyright .img .icon1 {  
    display: inline-block;  
    width: 24px;  
    height: 24px;  
    margin-left: 22px;  
    vertical-align: middle;  
    background-image: url(%E5%9C%B0%E5%9D%80.png);  
    background-repeat: no-repeat;  
    vertical-align: middle;  
    margin-right: 5px;  
}  
.copyright .img .icon2 {  
    display: inline-block;  
    width: 24px;  
    height: 24px;  
    margin-left: 22px;  
    vertical-align: middle;  
    background-image: url(%E8%81%94%E7%B3%BB%E6%96%B9%E5%BC%8F.png);  
    background-repeat: no-repeat;  
    vertical-align: middle;  
    margin-right: 5px;  
}  
#foot .copyright p {  
    height: 24px;  
    width: 100%;  
}  
</style>  
</head>  
  
<body>  
<p class="header" id="head">  
  <p class="title">企业人事管理系统</p>  
      
</p>  
      
<p class="wrap" id="wrap">  
    <p class="logGet">  
            <!-- 头部提示信息 -->  
            <p class="logD logDtip">  
                <p class="p1">登录</p>  
            </p>  
            <!-- 输入框 -->  
            <p class="lgD">  
                <img src="img/logName.png" width="20" height="20" alt=""/>  
                <input type="text"  
                    placeholder="输入用户名" />  
            </p>  
            <p class="lgD">  
                <img src="img/logPwd.png" width="20" height="20" alt=""/>  
                <input type="text"  
                    placeholder="输入用户密码" />  
            </p>  
            <p class="logC">  
                <a href="index.html" target="_self"><button>登 录</button></a>  
            </p>  
        </p>  
</p>  
      
<p class="footer" id="foot">  
  <p class="copyright">  
    <p>Copyright © 2018 Qunar.com Inc. All Rights Reserved.</p>  
    <p class="img">  
        <i class="icon"></i><span>联系邮箱:jiankangsun@yahoo.com</span>  
    </p>  
      
    <p class="img">  
        <i class="icon1"></i><span>联系地址:合肥工业大学</span>  
    </p>  
        
    <p class="img">  
      <i class="icon2"></i><span>联系电话:18355042634</span>  
    </p>  
  
  
  </p>  
      
</p>  
      
      
</body>  
</html>  
点击复制链接 与好友分享!回本站首页
上一篇:MFC连接数据库时,无法启动程序,计算机丢失libmysql.dll的问题解决办法
下一篇:EL表达式及其11个使用对象(及jsp中的对象)实例介绍
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站