今天完成的事
今天做css4，头部用的padding 撑起来的，分别用float:left; text-align:center; float:right;
身体部分，用的margin:5px;然后放图片，用垂直居中对齐，再用margin padding上下为0，左右有边距在依次写上图片 线 input
水平垂直居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css4</title>
<style tyle="text/css">
.box {
margin :0px;
padding :20px 20px;
background-color:#5fc0cd;color:#f3f4f6;
font-size :18px;
}
.a2 {
float: left;
}
.a3 {
text-align:center;
}
.a4 {
float: right;
}
.s{
margin-top:10px;
background-color:#ffffff;
}
.img1{
vertical-align:middle;
margin: 0 12px;
padding:0 12px;
}
.line{
width:1px;
height:16px;
vertical-align:middle;
background-color:#eaedee;
margin:3px;
display:inline-block;
}
.input1{
width:70%;
height:70px;
line-height:45px;
display:inline-block;
border:none;
outline:none;
background-color:#ffffff;
padding:0 12px;
font-size:16px;
}
.s2{
margin-top:10px;
background-color:#ffffff;
}
.img2{
vertical-align:middle;
margin:0 12px;
padding:0 12px;
}
.line{
width:1px;
height:16px;
vertical-align:middle;
background-color:#eaedee;
margin:3px;
display:inline-block;
}
.input2{
width:70%;
height:70px;
line-height:45px;
display:inline-block;
border:none;
outline:none;
background-color: #ffffff;
padding:0 12px;
font-size:16px;
}
.s3{
margin-top: 30px;
}
.frame{
padding:20px;
font-size:18px;
text-align:center;
background-color:#5fc0cd;color:#e1e5e7;
}
.s4{
margin-top: 0px;
float:right;
background-color:#f3f4f6;
}
body{
margin:0px;
padding:0px;
background-color: #eff0f4;
}
</style>
</head>
<body >
<div class="box">
<div class="a2">关闭</div>
<div class="a4">注册</div>
<div class="a3">登录</div>
</div>
<div class="s">
<img src="ps4文件夹/st1.png" alt="" class="img1">
<div class="line"></div>
<input type="text" class="input1" placeholder="请输入手机号">
</div>
<div class="s2">
<img src="ps4文件夹/st2.png" alt="" class="img2">
<div class="line"></div>
<input type="text" class="input2" placeholder="请输入密码">
</div>
<div class="s3">
<div class="frame">登录</div>
</div>
<div class="s4">
<div class="s4">忘记密码？</div>
</div>
</div>
</body>
</html>
遇到的问题，我想把input里面的文字换成和模板一样是，知识一换颜色整个表格元素也会跟着变，试了几次没有成功，希望师兄帮忙解答
忘记密码 是淡蓝色字体，我现在图片上是黑色的，怎么变成蓝色，我也试了，转不过弯来，不知道要改哪里
收获，知道了怎么清除body属性
我用的是margin padding 都为0
ps字体大小，选择图层，属性再除以2
图片具体大小ctrl加点击图片缩略图就可以得到图片的信息，宽高
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的
RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。 目前的显示器大都是采用了RGB颜色标准，在显示器上，是通过电子枪打在屏幕的红、绿、蓝三色发光极上来产生色彩的，目前的电脑一般都能显示32位颜色，约有一百万种以上的颜色。 RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好象有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于两者亮度之总和（两盏灯的亮度嘛！），越混合亮度越高，即加法混合
em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.5em, 1em,2em等，通常1em=16px。
rem：rem是相对单位，是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
fr：fr单位是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。
px：全称Pixel，译：像素。它相对长度单位，像素 px 是相对于显示器屏幕分辨率而言的
返回列表
评论