+ -
当前位置:首页 → 问答吧 → 这种效果怎么做的?

这种效果怎么做的?

时间:2009-07-20

来源:互联网

http://shouji.taobao.com/?ad_id=&am_id=&cm_id=1400118807ed64f4b911&pm_id=

看“选机中心”很多checkbox

作者: gundumw100   发布时间: 2009-07-20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css" rel="stylesheet">
    #container{ width:240px; height:150px; border:1px solid blue; overflow:auto;}
    #branding{}
    #branding ul{ list-style:none; margin:0;padding:0;}
    #branding ul li{ float:left; width:100px;}
</style>
</head>

<body>
    <div id="container">
        <div id="branding">
            <ul>
                <li><input type="checkbox" id="brand1" /><label for="brand1">诺基亚</label></li>
                <li><input type="checkbox" id="brand2" /><label for="brand2">三星</label></li>
                <li><input type="checkbox" id="brand3" /><label for="brand3">摩托罗拉</label></li>
                <li><input type="checkbox" id="brand4" /><label for="brand4">多普达</label></li>
                <li><input type="checkbox" id="brand5" /><label for="brand5">索爱</label></li>
                <li><input type="checkbox" id="brand6" /><label for="brand6">夏普</label></li>
                <li><input type="checkbox" id="brand7" /><label for="brand7">联想</label></li>
                <li><input type="checkbox" id="brand8" /><label for="brand8">黑莓</label></li>
                <li><input type="checkbox" id="brand9" /><label for="brand9">LG</label></li>
                <li><input type="checkbox" id="brand10" /><label for="brand10">Apple</label></li>
                <li><input type="checkbox" id="brand11" /><label for="brand11">诺基亚</label></li>
                <li><input type="checkbox" id="brand12" /><label for="brand12">诺基亚</label></li>
                <li><input type="checkbox" id="brand13" /><label for="brand13">诺基亚</label></li>
                <li><input type="checkbox" id="brand14" /><label for="brand14">诺基亚</label></li>
                <li><input type="checkbox" id="brand15" /><label for="brand15">诺基亚</label></li>
                <li><input type="checkbox" id="brand16" /><label for="brand1">诺基亚</label></li>
                <li><input type="checkbox" id="brand17" /><label for="brand1">诺基亚</label></li>
                <li><input type="checkbox" id="brand18" /><label for="brand1">三星</label></li>
                <li><input type="checkbox" id="brand19" /><label for="brand1">摩托罗拉</label></li>
                <li><input type="checkbox" id="brand20" /><label for="brand1">多普达</label></li>
                <li><input type="checkbox" id="brand21" /><label for="brand1">索爱</label></li>
                <li><input type="checkbox" id="brand22" /><label for="brand1">夏普</label></li>
                <li><input type="checkbox" id="brand23" /><label for="brand1">联想</label></li>
                <li><input type="checkbox" id="brand24" /><label for="brand1">黑莓</label></li>
                <li><input type="checkbox" id="brand25" /><label for="brand1">LG</label></li>
                <li><input type="checkbox" id="brand26" /><label for="brand1">Apple</label></li>
                <li><input type="checkbox" id="brand27" /><label for="brand1">诺基亚</label></li>
                <li><input type="checkbox" id="brand28" /><label for="brand1">诺基亚</label></li>
                <li><input type="checkbox" id="brand29" /><label for="brand1">诺基亚</label></li>
                <li><input type="checkbox" id="brand30" /><label for="brand1">诺基亚</label></li>
                <li><input type="checkbox" id="brand31" /><label for="brand1">诺基亚</label></li>
                <li><input type="checkbox" id="brand32" /><label for="brand1">诺基亚</label></li>
            </ul>
        </div>
    </div>
</body>
</html>

作者: xyq159589   发布时间: 2009-07-20

就用CSS实现,不知道是不是你说的效果...

作者: xyq159589   发布时间: 2009-07-20

用<fieldset>做做看,特别是上面的标题栏<legend style="border:1px solid blue; width:240px; height:20px; background-color:#00aaff; margin-left:-8px;">选机中心</legend>
要做得和<fieldset>一样宽
IE和FF还不一样显示的时候。郁闷ing

作者: gundumw100   发布时间: 2009-07-21

fieldset是用来做FORM的,这个用不着这样。
它主要是overflow的运用。

作者: shgen   发布时间: 2009-07-21

相关阅读 更多