<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body,ul{margin:0;padding:0;}
li{ list-style:none;}
.list{width:500px;padding:10px;background:#ccc; margin:0 auto;}
.list li{padding:5px 0;height:17px;font-size:0;}
.list span{float:left;height:17px;font-size:0;}
.left{width:300px;background:#369;}
.right{background:#f90;width:200px;}
</style>
</head>
<body>
<!--
一般情况 一个元素里所有子元素结构和样式都一样 就把整体看成是1个列表
-->
<ul class="list">
<li>
<span class="left"></span>
<span class="right"></span>
</li>
<li>
<span class="left"></span>
<span class="right"></span>
</li>
<li>
<span class="left"></span>
<span class="right"></span>
</li>
<li>
<span class="left"></span>
<span class="right"></span>
</li>
<li>
<span class="left"></span>
<span class="right"></span>
</li>
<li>
<span class="left"></span>
<span class="right"></span>
</li>
</ul>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body,ul{margin:0;padding:0;}
li{ list-style:none;}
.list{width:300px;margin:30px auto;border-left:1px solid #000;border-top:1px solid #000;height:300px;}
.list li{width:99px;height:99px;float:left;border-right:1px solid #000;border-bottom:1px solid #000;background:#ffc;}
</style>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body,ul{margin:0;padding:0;}
li{ list-style:none;}
.list{width:732px;margin:30px auto; overflow:auto;border-top:1px solid #999;border-left:1px solid #999;}
.list li{width:60px;height:180px;float:left;border-right:1px solid #999;border-bottom:1px solid #999;}
.list div{height:100px;background:#000; color:#fff;}
/*.list li:nth-of-type(2n) div{ height:50px;}*/
.list .div2{ height:50px;}
</style>
</head>
<body>
<ul class="list">
<li>
<div>1</div>
</li>
<li>
<div class="div2">2</div>
</li>
<li>
<div>3</div>
</li>
<li>
<div class="div2">4</div>
</li>
<li>
<div>5</div>
</li>
<li>
<div class="div2">6</div>
</li>
<li>
<div>7</div>
</li>
<li>
<div class="div2">8</div>
</li>
<li>
<div>9</div>
</li>
<li>
<div class="div2">10</div>
</li>
<li>
<div>11</div>
</li>
<li>
<div class="div2">12</div>
</li>
</ul>
</body>
</html>
1791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
