发表于： 2016-06-19 21:01:42
1 1271
今天完成的事情：完成task4的切图，完成task4
明天计划的事情：看后面的任务
遇到的问题：div的定位差不多熟练了，
收获：了解position：fixed，inhert，static，relative，absolute属性。
http://www.w3school.com.cn/cssref/pr_class_display.asp。
学习了float和clear使用方法
display:inline; 内联元素，简单来说就是在同一行显示。
html---------------------------------
display:block; 块级元素，简单来说就是就是有换行，会换到第二行。
display:inline-block; 就是在同一行内的块级元素。- <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link href="../../public.css/task-4.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>登陆</title>
</head>
<body class="body">
<img src="images/2_01.jpg" width="100%">
<div class="head">
<div class="head-left">关闭</div>
<div class="head-center">登陆</div>
<div class="head-right">注册</div>
</div>
<div class="input"><div class="div1" >
<img class="image1" src="images/2_02.png"><input class="input1" type="" name="" value="请输入手机号">
</div><div class="div2">
<img class="image2" src="images/2_05.png"><input class="input2" type="" name="" value="请输入密码">
</div></div><input class="button1"type="button" name="" value="登录">
<div class="p1">忘记密码？</div></body>
</html> - css------------------------------------
- @charset "utf-8";
/* CSS Document */
.body{
background-color:#eff0f4;
}
.head{
font-size:4vw;
height:5vw;
background-color:#5AC2CD;
margin:-0.3rem 0 0 0 ;
text-align:center;
}
.head-left{
float: left;
color: white;
font-size: 3vw;
margin:0 0 0 5%;}
.head-center{
float: left;
color: white;
font-size: 3vw;
margin: 0 0 0 35%;}
.head-right{
font-size: 3vw;
color: white;
float: right;
margin: 0 5% 0 0;
}
.input
{
width: 100%;
height: 25VW;
background-color: #eff0f4;
padding: 0;
position: relative;
}
.div1,.div2{
width: 100%;
background-color: white;
margin:1% 0 1% 0;
position: absolute;
height: 9vw;
}
.div2{
margin: 11% 0 0 0;
}
.input1,.input2{
vertical-align: middle;
width: 30%;
height: 4vw;
border: none;
border-width: 0;
margin: 2.75vw 0 0 0;
float: left;
position: relative;
font-family: Microsoft YaHei,serif;
font-size: 100%;
}
.image1,.image2{
float: left;
position: relative;
width:10vw;
}.button1{width: 100%;
height: 10vw;
background-color: #5AC2CD;
padding: 0 15% 0 15%;
font-size: 8vw;
border: none;
border: 0 0 0 0;
color: white;
float: none;
background-color: none;
}
.p1{
float: right;
margin: 2% 0 0 0;
color: #5AC2CD;
font-size: 4.45vw;
font-weight: bolder;
}
返回列表
评论