CSS 学习&测试记录

zoukankan html css js c++ java

CSS 学习&测试记录

<!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> .news{ background-color:gray; border:solid 1px black; } .news img{ float:left; } .news p{ float:right } .clear{ clear:both; #试下将这行代码注释掉，看看会出现什么结果。当这行代码注释掉，最外层 div 的高度为0，而 img 和 p 没有包含进 div 里面。 } </style> </head> <body> <div class="news"> <img src="http://www.2345.com/i/toplogo.gif" alt="" /> <p>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST </p> <div class="clear"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行

////////////////////// - 2010-12-29 Update - //////////////////////

今天看到一篇关于 clear:both 的不错文章：http://www.cnbruce.com/blog/showlog.asp?log_id=1281。

另在工作中遇到一个关于 clear:both 的问题，就是做自定义表单时的问题，怎样才可以将“字段类型”里的选项排成一行四列，排列整齐。现记录下： <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="14%" height="30"><p>编号ID　　：</p></td> <td width="86%">14</td> </tr> <tr> <td height="30">序　　　号：</td> <td><input name="id" type="text" id="id" value="自动生成" readonly="readonly" /></td> </tr> <tr> <td height="30"><p>字段中文名：</p></td> <td><input type="text" name="name" id="name" /></td> </tr> <tr> <td height="30"><p>字段英文名：</p></td> <td> <select name="table" id="table"> <option value="">请选择</option> <option value="qy_company">qy_company</option> <option value="sale_guest">sale_guest</option> </select> </td> </tr> <tr> <td height="30">字段类型　：</td> <td> <DIV class="nw"> <INPUT class="np" id="dtype1" style="ZOOM: 1" type="radio" CHECKED name="dtype" value="text" /> 单行文本(varchar) </DIV> <DIV class="nw"> <INPUT class="np" id="dtype2" style="ZOOM: 1" type="radio" name="dtype" value="textchar" /> 单行文本(char) </DIV> <DIV class="nw"> <INPUT class="np" id="dtype3" style="ZOOM: 1" type="radio" name="dtype" value="multitext" /> 多行文本 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype4" style="ZOOM: 1" type="radio" name="dtype" value="htmltext" /> HTML文本 </DIV> <BR class="cls" /> <DIV class="nw"> <INPUT class="np" id="dtype5" style="ZOOM: 1" type="radio" name="dtype" value="textdata" /> 文本保存HTML数据 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype6" style="ZOOM: 1" type="radio" name="dtype" value="int" /> 整数类型 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype7" style="ZOOM: 1" type="radio" name="dtype" value="float" /> 小数类型 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype8" style="ZOOM: 1" type="radio" name="dtype" value="datetime" /> 时间类型 </DIV> <BR class="cls" /> <DIV class="nw"> <INPUT class="np" id="dtype9" style="ZOOM: 1" type="radio" name="dtype" value="img" /> 图片 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype10" style="ZOOM: 1" type="radio" name="dtype" value="imgfile" /> 图片(仅网址) </DIV> <DIV class="nw"> <INPUT class="np" id="dtype11" style="ZOOM: 1" type="radio" name="dtype" value="media" /> 多媒体文件 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype12" style="ZOOM: 1" type="radio" name="dtype" value="addon" /> 附件类型 </DIV> <BR class="cls" /> <DIV class="nw"> <INPUT class="np" id="dtype13" style="ZOOM: 1" type="radio" name="dtype" value="select" /> 使用option下拉框 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype14" style="ZOOM: 1" type="radio" name="dtype" /> 使用radio选项卡 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype15" style="ZOOM: 1" type="radio" name="dtype" value="checkbox" /> Checkbox多选框 </DIV> <DIV class="nw"> <INPUT class="np" id="dtype16" style="ZOOM: 1" type="radio" name="dtype" value="stepselect" /> 联动类型 </DIV> </td> </tr> <tr> <td height="30">验证类型　：</td> <td> </td> </tr> <tr> <td height="30">默认值　　：</td> <td> </td> </tr> <tr> <td height="30">最大长度　：</td> <td> </td> </tr> <tr> <td height="30">表单Html　：</td> <td>◆自定义表单HTML用~name~表示提示文字，~form~表示表单元素 <br /> <textarea name="textfield" cols="100" rows="6" id="textfield">
提示：您可以先修改部分代码再运行

查看全文

相关阅读:
POJ 1795 DNA Laboratory
CodeForces 303B Rectangle Puzzle II
HDU 2197 本源串
 HDU 5965 扫雷
 POJ 3099 Go Go Gorelians
CodeForces 762D Maximum path
CodeForces 731C Socks
HDU 1231 最大连续子序列
 HDU 5650 so easy
大话接口隐私与安全转载

原文地址：https://www.cnblogs.com/chy1000/p/1808893.html