DIV+CSS登陆页面练习_css登录页面局部练习-CSDN博客

本文链接：https://blog.csdn.net/Abenazhan/article/details/72818436

<html>

<head>

<title>登陆</title>

<style>

#hh

{

width:300px;//设置div宽度300像素 

height:200px;//设置div高度200像素

background:yellow;//设置背景颜色，黄色

position:absolute;//设置绝对位置

top:50%;//浏览器高度的50%是登陆框上顶点的位置

left:50%;//浏览器宽度的50%是登陆框左顶点的位置

margin-left:-150px;//上顶点减一半的宽度，中间点变为水平居中点

margin-top:-100px;//上顶点减一半高度，中间点变为垂直居中点

}

div .yhm

{

width:100px;//设置宽度100像素

height:30px;//设置高度30像素

color:red;//颜色，红色

font-size:16px;//字体大小16像素

float:left;//左侧浮动

margin-left:10px;//左外边距10像素

margin-top:50px;//上外边距50像素

text-align:right;//文本对齐方式居中

}

div .yhmk

{

width:100%px;//宽度占其余的宽度

height:30px;//高度30像素

float:left;//左侧浮动

margin-top:50px;//上外边距50像素

}

div .mm

{

width:100px;//宽度100像素

height:30px;//高度30像素

color:blue;//颜色蓝色

font-size:16px;//字体大小16像素

float:left;//左侧浮动

margin-left:10px;//左外边距10像素

text-align:right;//文本对齐方式靠右



}

div .mmk

{

width:100%px;//宽度填满剩余空间

height:30px;//高度30像素

float:left;//左侧浮动



}

.qq

{

clear:left;//清除浮动

}

div .qr

{

float:left;//左侧浮动

margin-left:100px;//左外边距100像素

}

div .cz

{



float:left;//左侧浮动

margin-left:15px;//左外边距15像素



}

</style>

</head>



<body>

<div id="hh">

<div class="yhm">

用户名：

</div>

<div class="yhmk">

<form>

<input type="text" name="yhml" size="15">

</form>

</div>

<div class="mm">

密码：

</div>

<div class="mmk">

<form>

<input type="text" name="mmk" size="15" >

</form>

</div>

<div class="qq"></div>

<div class="qr">

<form>

<input type="submit" size="2" value="确认">

<form>

</div>

<div class="cz">

<form>

<input type="reset" size="2">

</form>

</div>

</div>

</body>

</html>