定位

  • position:relative; 相对定位
  • position:absolute;绝对定位
  • position:fixed;固定定位

登录页面

  1. <style>
  2. *{
  3.     padding:0;
  4.     margin:0;
  5.     box-sizing:border-box;
  6. }
  8. .container{
  9.     width:100vw;
  10.     height:100vh;
  11.     background-color: #1E9FFF;
  12.     position: relative;
  13. }
  15. .container .login{
  16.     width: 30rem;
  17.     height: 30rem;
  18.     position: absolute;
  19.     top: 50%;
  20.     left: 0;
  21.     right: 0;
  22.     margin: 0 auto;
  23.     margin-top: -15rem;
  24.     background-color: #fff;
  25.     border: 1px solid #fff;
  26.     border-radius: 3px;
  27.     box-shadow: 0 0 8px #eeeeee;
  28.     padding: 1.5rem;
  29. }
  31. .container .login .login-title h1{
  32.     color: #1E9FFF;
  33.     font-size: 2.5rem;
  34.     font-weight: bold;
  35.     text-align: center;
  36.     margin-bottom:1.5rem;
  37. }
  39. .container .login .form {
  40.     position: relative;
  41.     margin-bottom:1.5rem;
  42. }
  43. .container .login .form label {
  44.     margin-bottom: 1.5rem;
  45.     clear: both;
  46.     position: absolute;
  47.     left: 1px;
  48.     top: 1px;
  49.     width: 4rem;
  50.     line-height: 4rem;
  51.     text-align: center;
  52.     color: #d2d2d2;
  53. }
  54. .container .login .form input {
  55.     padding-left: 4rem;
  56.     display: block;
  57.     width: 100%;
  58.     height: 4rem;
  59.     line-height: 4rem;
  60.     background-color: #fff;
  61.     border-radius: 2px;
  62.     border:1px solid #ccc;
  63. }
  64. .container .login .form input:focus{
  65.     outline: 0px;
  66.     box-shadow: 0 0 10px #1e9fff;
  67. }
  68. .container .login .form img{
  69.     background-color: bisque;
  70.     position: absolute;
  71.     right: 0px;
  72.     top: 0px;
  73.     width: 10rem;
  74.     height: 4rem;
  75. }
  76. .container .login .form .btn{
  77.     display: block;
  78.     height: 4rem;
  79.     line-height: 4rem;
  80.     border: 0px;
  81.     background-color: #1E9FFF;
  82.     color: #fff;
  83.     text-align: center;
  84.     font-size: 1.4rem;
  85.     border-radius: 2px;
  86.     cursor: pointer;
  87.     width: 100%;
  88. }
  89. </style>
  90. <div class="container" >
  91.     <div></div>
  92.     <div class="login" >
  93.         <div class="login-title" ><h1>登录</h1></div>
  94.         <form action="">
  95.             <div class="form">
  96.                 <label class="iconfont icon-yonghu" for="username"></label>
  97.                 <input type="text" name="username" placeholder="用户名" value="">
  98.             </div>
  99.             <div class="form">
  100.                 <label class="iconfont icon-mima" for="password"></label>
  101.                 <input type="text" name="password" placeholder="密码" value="">
  102.             </div>
  103.             <div class="form">
  104.                 <label class="iconfont icon-mima" for="code"></label>
  105.                 <input type="text" name="code" placeholder="验证码" value="">
  106.                 <img src="" alt="">
  107.             </div>
  108.             <div class="form">
  109.                 <button class="btn">登 入</button>
  110.             </div>
  111.         </form>
  112.     </div>
  113. </div>

媒体查询

移动优先

  1. div {
  2.     background-color:red;
  3. }
  4. @media only screen and (min-width: 768px) {
  5.     div {
  6.         background-color:slateblue;
  7.     }
  8. }
  9. @media only screen and (min-width:768px) and (max-width:992px) {
  10.     div {
  11.         background-color:greenyellow;
  12.     }
  13. }
  14. @media only screen and (min-width:992px) and (max-width:1200px) {
  15.     div {
  16.         background-color:wheat;
  17.     }
  18. }

PC优先

  2. div {
  3.     background-color:red;
  4. }
  5. @media only screen and (min-width:992px) and (max-width: 1200px) {
  6.     div {
  7.         background-color:wheat;
  8.     }
  9. }
  10. @media only screen and (min-width:768px) and (max-width: 992px) {
  11.     div {
  12.         background-color:greenyellow;
  13.     }
  14. }
  15. @media only screen and (max-width: 768px) {
  16.     div {
  17.         background-color:slateblue;
  18.     }
  19. }

flex布局

父级设置

设置flex属性

  • display:flex;
  • display:inline-flex;

设置排列方式[ row横排列 | column纵排列 ]

  • flex-direction:row|column;

设置换行[ wrap允许换行 | nowrap不允许换行 ]

  • flex-wrap:wrap;

上面两个简写

  • flex-flow:row nowrap;

主轴分配剩余空间(align-content与justify-content的简写形式 | 第一个值align-content | 第二个值justify-content)

[ 左 | 右 | 中 | 两边对齐 | 分散对齐(中间是两倍) | 平均对齐]

  • place-content:start|end|center|space-between|space-around|space-evenly;

交叉轴分配剩余空间(align-items与justify-items的简写形式 | 第一个值align-items | 第二个值justify-items)

[ 上 | 下 | 中 | 子元素等高]

  • place-items:start|end|center|stretch;

子级设置

flex:放大 收缩 计算宽度; 放大 1开启 0禁止 收缩 1开启 0禁止

计算宽度auto自动 计算方式 : max-width/min-width > 计算宽度 > width

  • flex:1; = flex:1 1 auto;
  • flex:initial; 默认

排序[ 谁小谁前面 ]

  • order:0;

案例

  1. div{
  2.   display: flex;
  3.   flex:1;
  4.   width: 100px;height: 100px;
  5. }
  7. /* 平均对齐 */
  8. .d1{
  9.   background-color: tomato;
  10.   place-content: space-evenly;
  11.   place-items: center;
  12. }
  13. /* 分散对齐 */
  14. .d2{
  15.   background-color: rebeccapurple;
  16.   place-content: space-around;
  17.   place-items: center;
  18. }
  19. /* 两边对齐 */
  20. .d3{
  21.   background-color: goldenrod;
  22.   place-content: space-between;
  23.   place-items: center;
  24. }
  25. <div class="d1">
  26.     <span>1</span>
  27.     <span>2</span>
  28.     <span>3</span>
  29. </div>
  30. <div class="d2">
  31.     <span>1</span>
  32.     <span>2</span>
  33.     <span>3</span>
  34. </div>
  35. <div class="d3">
  36.     <span>1</span>
  37.     <span>2</span>
  38.     <span>3</span>
  39. </div>

更多相关文章

  1. 第五课--位置布局
  2. android:layout_alignParent 布局相对于父布局的位置
  3. Android(安卓)ApiDemos示例解析(139):Views->Layouts->Baseline-
  4. gravity与layout_gravity的区别
  5. Android设置一个按钮右对齐
  6. 改善android性能工具篇【zipalign】
  7. Android-布局相关难点特性讲解
  8. android常用布局设置
  9. Android中文API（142） —— Gravity

随机推荐

  1. android socket通信（下）
  2. android layout属性简介
  3. Android中几种数据结构使用
  4. android 隐藏键盘 ----- 断点记录
  5. 一 Android Camera框架
  6. XML解析各种方式比较
  7. 如何低成本打造品牌Android软件？
  8. Android(安卓)studio 43 文件存储到sdcar
  9. Android Retrofit框架的使用和个人见解
  10. 专题分纲目录 android 系统核心机制 bind