欢迎大家来到IT世界,在知识的湖畔探索吧!
本例最终效果如下：
一、设置整个网页的背景色
图1
图2
二、创建一个盒子，让其水平居中，距离上边200像素。
图3
图4
三、把盒子设置四个角为圆角，圆10个像素。
图5
图6
四、在大盒子里做一个ding盒子，设置它上面两个角是圆角，下面两个角是直角。
图7
图8
五、ding盒子里输入几个字，让这几个字在盒子里水平居中，垂直居中，关于盒子内居中问题可参看我写的文【203】。
图9
图10
六、在deng盒子里面再做三个小盒子，取名为ref，注意如果这三个盒子不用浮动，会有什么效果，这个你可以试试看。
图11
图12
七、往ref盒子里面添加信息，发下图，这里顺便学习两个标签，一个是input，一个是button。
图13
图14
八、去掉背景色，然后用盒子内居中的方法，让这些元素居中。
图15
图16
九、通过样式，设置按钮的大小和字的大小，这里我特地用id来给元素上名字，不同于class，在样式里调用的时候，一个是前面加.一个是前面加#。
图17
图18
十、最后设置一下密码输入框，输入内容时为密码隐藏符号。
图19
图20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #1f88cb;
}
.deng{
width: 300px;
height: 200px;
background: #d9e3e8;
margin: 200px auto;/*盒子顶部距离200，水平居中*/
border-radius: 10px;/*圆角10个像素*/
}
.ding{
width: 100%;/*百分比指的是父盒子的宽的百分之百*/
height: 50px;
background: #093f63;
float: left;/*浮动是为了让盒子间发生关系*/
/* 就像水上的多个物体，浮起来后就不会相互穿插 */
border-radius: 10px 10px 0px 0px;
/* 圆角四个参数的写法分别指左上，右上，右下，左下 */
color: white;/*字的颜色*/
text-align: center;/*水平居中*/
line-height: 50px;/*垂直居中*/
}
.ref{
width: 280px;
height: 40px;
/* 这个背景色后面是要去掉的 */
margin-left: 10px;
margin-top: 5px;
/* 以上两句可以简写为margin:5px 0px 0px 10px; */
float: left;
/*在这里你可以试着不加浮动，就知道浮动的作用了*/
text-align: center;/*水平居中*/
line-height: 40px;/*垂直居中*/
}
#bt{
width: 80px;
height: 30px;
font-size: 12pt;/*设置字的大小*/
}
</style>
</head>
<body>
<div class="deng">
<div class="ding">方块登录窗口</div>
<div class="ref">用户名：<input type="text"></div>
<div class="ref">密 码：<input type="password"></div>
<!-- 是空格的意思 input是输入框标签 button是按钮标签-->
<div class="ref"><button id="bt">确 定</button></div>
</div>
</body>
</html>
欢迎大家来到IT世界,在知识的湖畔探索吧!
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/36130.html
