列表用处大！代码优化！

来源：互联网发布：淘宝网店铺排名编辑：程序博客网时间：2024/05/15 23:45

<!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>

0 0