对于本图来说用了一个效果就能达到这种情况，对于我来说，今天是有进步的，具体操作就是盒子模型确实，在什么地方起来的flex就运用到该地方去，刚

开始就一直有问题，思考了半天，原来是我的控制代码出现了点错误，就是不将对应的控制放到了想盒子里面，而放在子元素下面，果然不会的地方是在于

多多尝试，尝试多了，自然就知道为什么会这样了，感谢今天的自己，这么努力，很简单的静态页面我也很认证的完成了，为的就是提高自己的撸码能力，

哈哈哈，代码如下！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="wap-font-scale" content="no">
<script src="js/flexible.js"></script>
<title>登录</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="login">
<div class="login-header">
<ul class="list3">
<li class="facing-left">
<div class="facing-left1"></div>
</li>
<li class="facing-center">
<h2>登录</h2>
</li>
<li class="facing-right">
<span>注册</span>
</li>
</ul>
</div>
<div class="login-content">
<div class="content-head"><span>打赏登录帐号</span></div>
<div class="content-t">
<input type="text" placeholder="邮箱手机">
<input type="text" placeholder="密码">
</div>
<div class="content-footer"><span>忘记密码？</span></div>
<div class="footer-content"><p>点击登录，即表示已阅读并同意<span>《用户许可协议》</span></p></div>
</div>
<div class="login-footer">
<div class="footer-head">
<p>使用第三方账户登录</p>
</div>
<div>
<ul class="list4">
<li><img src="img/icon_11.png" alt=""></li>
<li><img src="img/icon_12.png" alt=""></li>
<li><img src="img/icon_13.png" alt=""></li>
</ul>
</div>
</div>
</div>

</body>
</html>

.login-header{
width:100%;
height: 1.3438rem;
}

.login-header .list3{
width: 100%;
display:flex;
justify-content:space-between;
}

.login-header .list3 .facing-center{
margin-top:0.3438rem;
}

.login-header .list3 .facing-right{
margin:0.4438rem 0.4688rem 0 0;
color:#404040;
}

.login-header .list3 .facing-left1{
display: inline-block;
justify-content:flex-start;
margin:0.5062rem 0 0 0.4688rem;
border-left: 0.0469rem solid; border-bottom: 0.0469rem solid;
width: 0.3281rem; height:0.3281rem;
transform: rotate(45deg);
}

.login-content{
width: 100%;
}

.login-content .content-head{
text-align:center;
margin-top:0.625rem;
}

.login-content .content-head span{
font-size:0.4375rem;
color: #808080;

}

.content-t{
margin-top: 0.9375rem;
}

.content-t input{
height: 1.2188rem;
margin-left:0.3125rem;
display:block;
padding-left:0.3125rem;
outline:none;
width:90%;
background: #f8f9f9;
}

.content-t input:hover {
background: #ebeced;
border-radius:0.3125rem;
}

.content-t input:nth-child(2){
margin-top:0.2344rem;
}

.content-footer{
margin:0.1562rem 0 0 0.3125rem;
}

.content-footer span{
font-size:0.3238rem;
color:#404040;
}

.footer-content{
text-align: center;
margin-top:3.1875rem;
}

.footer-content p{
font-size:0.3438rem;
color:#888888;
}

.footer-content p span{
color:red;
}

.login-footer .footer-head p{
text-align:center;
margin-top:3.1875rem;
font-size:0.3438rem;
color:#888888;
}

.login-footer .list4{
margin-top: 1.0rem;
display:flex;
justify-content:space-around
}

.login-footer .list4 li{
width:1.5rem;

}

.login-footer .list4 li img{
max-width: 100%;
}

关于flex布局对自己的影响的更多相关文章

  1. flex布局知识点

    flexBox 布局最合适小规模布局,而网格布局适合较大规模布局. float,clear,vertical-align  在flex中不起作用. flex布局中,有两类作用于父节点也子节点的样式,大 ...

  2. Flex 布局相关用法

    前言: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 就不容易实现. 2009年,W3C提出了 ...

  3. flex布局全解析

    前言 很长一段时间, 我知道有flex这个布局方式, 但是始终没有去学它. 3点原因: 感觉还比较新, 担心兼容性不好. 普通的布局方式能满足我的绝大多数需求. 好像蛮复杂的. 最近由于开发需要, 学 ...

  4. Flex布局摆脱float带来的布局问题

    完整文章地址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 使用浮动(float)的一个比较疑惑 ...

  5. flex布局应用于踩坑

    一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...

  6. 写给 Android 开发的小程序布局指南，Flex 布局！

    一.序 Hi,大家好,我是承香墨影! 最近在做小程序,验证一些方向,开发效率确实很快,就是各种微信的审核有点费劲,但是总归是有办法解决的. 想要开发一款小程序,其实和我们正常写一款 App 类似,你需 ...

  7. flex布局应用

    flex介绍  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 了解了flex布局之后,发现其功能非常强大. 当指定一个div dis ...

  8. IE浏览器下flex布局的bug

    原文地址:gitub上的Flexbugs list,可以看到Flex布局在IE糟糕表现的详细描述. 2. Column flex items set to align-items:center ove ...

  9. flex布局应用与踩坑

    一.预告 本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学 二.开篇 flex布局原本是好几个月前就一直 ...

随机推荐

  1. 嵌入式开发之davinci---IPIPE、IPIPEIF and ISIF这三者有什么区别

    (1)缩写概念 (2)各自区别 (3)不同sensor 采集接口 (4)采集后的数据链路link (5)8127 中的iss和ipipe的区别 (1)缩写概念 http://www.ti.com.cn ...

  2. 初步学习C++中的继承关系

    继承机制是面向对象程序设计使代码能够复用的最重要的手段,它同意程序猿在保持原有类特性的基础上进行扩展,添加功能. 这样产生新的类,称派生类.继承呈现了面向对象程序设计的层次结构,体现了由简单到复杂 ...

  3. Redhat enterpise6 安装unix2dos/dos2unix

    初用unix2dos,在rhel6 上 用yum install unix2dos , 提示源不可用, 那好吧, 就去rpm包网:http://rpm.pbone.net/ 下载了一个unix2dos ...

  4. 关于warning: Clock skew detected. Your build may be incomplete. 的解决方法【转】

    本文转载自:http://blog.csdn.net/jeesenzhang/article/details/40300127 今天发现电脑的系统时间不正确,因此将时钟进行了修改,回头编译Linux ...

  5. 《Visual C++ 2010入门教程》系列六：VC2010常见调试技术

    <Visual C++ 2010入门教程>系列六:VC2010常见调试技术   犹豫了好久,最终还是决定开始这一章,因为我不清楚到底有没有必要写这样的一章,是应该在这里说明一些简单的调试方 ...

  6. echo 到 stderr

    This question is old, but you could do this, which facilitates reading: >&2 echo "error& ...

  7. AutoIT： 开发界面结合GUI automation和Watir Automation

    可以应用AutoIT开发出界面,从而把AutoIT对GUI的自动化测试与Watir对web的自动化测结合在一起.以下代码是我学习GUI界面开发的实例代码.1. 当点击Watir_Test_Button ...

  8. 【140】◀▶ ArcGIS技巧

    目录: Add XY Data 图例修改 中文字符左斜体设置 专题图只显示“度” 制作渐变图例 待定 待定 待定 1. 在ArcGIS中插入含有经纬度的*.txt或者*.xls文件等 File> ...

  9. Ubuntu 14.04.1 配置 Android 源码开发环境（jdk版本切换）（转载）

    转自:http://www.cnblogs.com/ren-gh/p/4248407.html # Ubuntu 14.04.1 1.更新源: sudo apt-get update 安装vim工具: ...

  10. Ruby 数式匹配器

    str = "x^2 + 12317         +X^2 -       Length" str = "      x    ^  2  + y           ...