DIV+CSS登陆页面练习

来源：互联网发布：java的socket聊天室编辑：程序博客网时间：2024/05/20 03:04

<html>

<head>

<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>

<form>

</form>

</div>

密码：

</div>

<form>

</form>

</div>

<form>

<form>

</div>

<form>

</form>

</div>

</body>

</html>

float浮动：在同一层都是float：left；按照顺序依次排列，一列中地方不够的时候，自动换行到下一行
定义的margin外边距是针对上一个层而设定的，不是相对于父层设定的。

阅读全文

0 0