整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在很多web或者app页面中，我们可以看到各种各样的输入框，从外观上看它们可以直观的看做是input元素，但是实际上并非如此。我们可以通过别的标签去模拟input标签的效果，今天我们就来看看如何使用div标签模拟input标签的效果。
div+css
这里我们用ofo的主页面作为例子，在点击下面数字的时候，数字的内容会出现在输入框内，这个输入框就是用div模拟实现的。
当然页面内容是静态的，只是一个简单的html，我们来看下实现后的效果。如果感兴趣的可以直接去github上去看看，源码地址：
https://github.com/zhouxiongking/article-pages/tree/master/articles/divToInput
实现效果
这里我们定义一个显示内容的div来模拟input，其css样式如下。
css样式
我们使用:before伪元素来装载输入的内容，在:before元素中使用content属性来动态的元素的属性值。
使用:before伪元素
在input标签中，如果input元素获取焦点后，在input元素内会有光标在闪烁，这个效果我们可以通过:after伪元素来实现。
我们会用到动画animation的知识，首先定义一个动画效果，利用opacity属性来控制显示与不显示，从而造成闪烁效果。
定义闪烁动作
然后在:after伪元素中使用。
:after伪元素
在设置好div效果后，需要在点击下面的数字时，将值显示在div中，这就需要用到Javascript去控制。
首先获取页面上所有存在动作的元素。
获取元素
然后给数字和删除元素分别添加对应的事件。
元素绑定事件
绑定事件后，在点击数字时会将值动态的显示在div中，在删除时也会相应删掉最后一个添加的元素值。
对于整个页面的设计，采用了header，div和footer的布局。
header和div的html部分代码如下。
header与div
相应的footer部分代码如下，其主要采用的是table布局，相对简单实用。
footer部分
至此，整个页面的实现就讲解完毕了，中间有很多的css样式部分我并没有放出来，感兴趣的可以自行去github上clone下来看看。
今天这篇文章主要以ofo主页面实现来讲解了一下如何使用div来模拟input的效果，你有收获吗
例最终效果如下：
一、设置整个网页的背景色
图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
网页制作过程中，布局是我们最重要的一个环节。可以说布局的好坏直接影响到整个网页的成败！布局成则事半功倍；布局败，则事倍功半。 随着移动互联的到来，响应式网站风靡。这也就兴起了一种新兴的布局方式——弹性布局。取代我们之前“display+float+position”的布局形式，采用全新的弹性布局，会让你的网站如丝般顺滑！ 今天，就让我们一起来学习一下弹性布局，让我们用5个div玩转弹性布局吧~
弹性布局，又称“Flex布局”，是由W3C大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。
>>> 了解两个基本概念，接下来会频繁提到：
① 容器： 需要添加弹性布局的父元素；
② 项目： 弹性布局容器中的每一个子元素，称为项目；
>>> 了解两个基本方向，这个牵扯到弹性布局的使用：
① 主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴；
② 交叉轴： 与主轴垂直的另一方向，称为交叉轴。
<div id="div">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>#div{
width: 400px;
height: 400px;
background-color: yellow;
display: flex;
}
#div div{
width: 100px;
height: 100px;
background-color: blue;
color: white;
font-size: 30px;
}五个简单的div，只给父容器添加了display: flex;属性，就可以让容器内部打破原有文档流模式，展现为弹性布局。
简单的了解一下弹性布局后，我们来详解一下配合“display: flex;”使用的12大属性。其中，12个属性分为两类，6个作用于父容器，6个作用于子项目。
nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度；
wrap： 换行，并且第一行在容器最上方；
wrap-reverse： 换行，并且第一行在容器最下方。
>>> 此属性与主轴方向息息相关。
主轴方向为：row-起点在左边，row-reverse-起点在右边， column-起点在上边，column-reverse-起点在下边
flex-start（默认值）： 项目位于主轴起点。
flex-end：项目位于主轴终点。
center： 居中
space-between：两端对齐，项目之间的间隔都相等。(开头和最后的项目，与父容器边缘没有间隔)
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目，与父容器边缘有一定的间隔)
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
(当项目换为多行时，可使用align-content取代align-items)
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
此属性有两个快捷设置：auto=(1 1 auto)/none=(0 0 auto)
属性值：与align-items相同，默认值为auto，表示继承父容器的align-items属性值。
好了，相信到这里，所有同学都能够理解flex弹性布局了吧~~学习一个新知识，字不如表，表不如图。希望这5个div的图解，能够让所有同学深刻的理解Flex弹性布局~接下来，让我们愉快的抛弃Float、抛弃Position，一起拥抱Flex吧！！
最后，所有的源码附上，需要的同学自行测试哦~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div{ width: 500px;
height: 400px;
background-color: yellow;
display: flex;
/*flex-direction: column-reverse;*/ /*flex-wrap: wrap;*/ /*justify-content: space-around;*/ /*align-items: stretch;*/ /*align-content: stretch;*/
}
#div div{width: 100px;
height: 100px;
background-color: blue;
color: white;
font-size: 30px;
/*flex-shrink: 0;*/
}
#div .div1{ /*font-size: 48px;*/
/*order: 1;*/
/*flex-grow: 1;*/
/*flex-shrink: 0;*/
/*background-color: red;*/
}
#div .div3{ /*flex-grow: 2;*/
background-color: green;
/*flex-basis: 200px;*/
align-self: flex-end;
}
</style>
</head>
<body>
<div id="div">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
</body>
</html>--如需转发，请注明原文网站，整理不易
*请认真填写需求信息，我们会在24小时内与您取得联系。
