这种效果怎么做的?
时间:2009-07-20
来源:互联网
http://shouji.taobao.com/?ad_id=&am_id=&cm_id=1400118807ed64f4b911&pm_id=
看“选机中心”很多checkbox
看“选机中心”很多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>
<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
要做得和<fieldset>一样宽
IE和FF还不一样显示的时候。郁闷ing
作者: gundumw100 发布时间: 2009-07-21
fieldset是用来做FORM的,这个用不着这样。
它主要是overflow的运用。
它主要是overflow的运用。
作者: shgen 发布时间: 2009-07-21
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28