移动端简单布局

 

简单的列表页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <style>
    *{ margin: 0; padding:0;}
    html{ font-size: 16px;}
    li{ float: left; width: 50%; height: 20rem; background: blue;  box-sizing:border-box; padding: 1rem 2rem;}
    
    </style>
</head>
<body>
    <ul>
        <li>
            <div>1111</div>
        </li>
        <li>
            <div>222</div>
        </li>
        <li>
            <div>3333</div>
        </li>
        <li>
            <div>4444</div>
        </li>
    </ul>
</body>
</html>

 

posted @ 2016-04-28 11:33  __枫伊飘渺  阅读(121)  评论(0)  编辑  收藏  举报