html+css完成登陆页面附实际效果图

日期:2020-12-12 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板


拷贝编码
编码以下:

<!DOCTYPE html>
<style type="text/css">
body{
background-color: #555555;
}
#titel_img{
width:417px;
}
#log_image {
z-index: 0;
position: absolute;
left: 50%;top:50%;
height: 151px;width:400;
margin-left: ⑵00px;margin-top:⑴00px;
}
#text_box{
position: absolute;
top:65px;
left:40px;
z-index: 1;
/* background-color: #FF0000;*/
}
#text_box div{
color:#FFFFFF;
}
#titel_text{
position: absolute;
}
</style>
<html>
<head>
<title>登陆页面</title>
</head>
<body>
<form>
<div id="log_image">
<div id="titel_text">
<img id=titel_img src="header_logo.gif">
</div>
<img id="log" src="login.gif" >
<div id="text_box">
<div>客户名: <input type="text"></dvi>
<div>密 码: <input type="password"></div>
<div> 认证码: <input type="text"><img src="yan.bmp" style="position:relative;top: 5px"><input type="button" value="登陆"></div>
</div>
</div>
</form>
</body>
</html>

【1】这里要留意文本文档流的定义,假如1个元素的沒有被申明为float,absolute,relative,那末他便是依照默认设置的文本文档流精准定位方式。即在父架构内从上坐到右从上到下排序,假如元素被申明为float,absolute,中的1种,那末他就摆脱了文本文档流,元素部位再次相对父架构而言。relative较为非常,他是相对自身在文本文档流中的部位做偏位。

【2】也有1点便是用<p></p>标识包含的內容有较大行间隔,能够换用<div></div>。

【3】如何使元素垂直居中,由于沒有立即的特性可使1个框显示信息立即垂直居中,横向能够用 text-align:center ,可是竖直的沒有这个特性。因此大家用absolute精准定位,设定top和left为显示屏的50%,这样架构的左上角会垂直居中显示信息,随后设定margin各自向左和向上平移半个架构的间距,这样架构的管理中心就在显示屏的管理中心。

【4】元素遮盖优先选择级难题,应用 z-index 标识处理,数据越大优先选择级越高。

【5】拉伸照片,设定照片元素的宽度和高宽比便可 即width和height。

下面便是运作实际效果图: