饥人谷技术博客

css 布局的一般步骤

2017-07-19  本文已影响32人  在乎者也

前提

问问题

任务:不要直接问答案
非任务:最好拿代码来问问题

支持IE 使用浮动布局

注意:

  1. 实在想不到好的标签使用div,
  2. 伪类写法clearfix:after clearfix::after : 兼容ie :: 不兼容ie

不支持IE使用flex布局

视频讲解
必须要会

浮动布局

固定步骤:

  1. 在儿子身上加 float:left 实在不行写float:right
  2. clearfix:after clearfix::after伪类 加到爸爸身上 ::ie不支持 :ie支持
  3. 给儿子调宽高,里面有宽度父级元素最好不要加 宽高最好不要加
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{margin:0;padding: 0;}
    ul,ol{list-style:none;}
    .clearfix:after{
      content: '';
      display: block;
      clear: both;
    }
    a{
      color: inherit;
      text-decoration: none;
    }
    .background{
      border: 1px solid green;
      background: black;
      color: white;
    }
    .wrapper{
      width: 1000px;
      margin: 0 auto;
      
    }
    .logo{
      width: 60px;
      height: 60px;
      background: red;
      float: left;
    }
    .menu{
      float: left;
      margin-left: 50px;
    }
    .menu > li{
      float: left;
      width: 110px;
      text-align: center;
      padding: 18px 0;
    }
    .actions{
      float: right;
      text-align: right;
      padding: 18px;
      width: 150px; /*一会删*/
    }
  </style>
</head>
<body>
  <div class="background">
    
    <div class="wrapper clearfix" style="border: 1px solid black;">
      <div class="logo">

      </div>

      <ul class="menu clearfix">
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
      </ul>

      <div class="actions">
        <a href="#">个人中心</a>
        <a href="#">购物车</a>
      </div>
    </div>
  </div>
</body>
</html>

flex布局

固定步骤:

  1. 在爸爸身上加dispaly:flex
  2. 调整儿子宽度 在能伸缩的儿子使用flex:1
  3. 使用justify-content align-item flex
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{margin:0;padding: 0;}
    ul,ol{list-style:none;}
    a{
      color: inherit;
      text-decoration: none;
    }
    .background{
      border: 1px solid green;
      background: black;
      color: white;
    }
    .wrapper{
      width: 1000px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .logo{
      width: 60px;
      height: 60px;
      background: red;
      
    }
    .menu{
      flex: 1;
      margin-left: 50px;
    }
    .menu > li{
      float: left;
      width: 110px;
      text-align: center;
      padding: 18px 0;
    }
    .actions{
      text-align: right;
      padding: 18px;
    }
  </style>
</head>

<body>
  <div class="background">
    
  
    <div class="wrapper clearfix" style="border: 1px solid black;">
      <div class="logo">

      </div>

      <ul class="menu clearfix">
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
      </ul>

      <div class="actions">
        <a href="#">个人中心</a>
        <a href="#">购物车</a>
      </div>
    </div>
  </div>
  
</body>

</html>

css烂怎么办

烂思维:想到什么写什么

  1. 有个大体框架 分豆腐块
    tab bar bigBanner pro contacts
  2. 命名要精确 (不会命名看同行怎么命名)
  3. 最小影响原则
  4. 嵌套不要超过五层
上一篇下一篇

猜你喜欢

热点阅读