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">
提示：您可以先修改部分代码再运行

查看全文

相关阅读:
SQL Server 损坏修复
 记录一些数据库函数或全局变量
 查询数据库空间使用情况
 SQL Server 2008文件与文件组的关系
 大型网站--负载均衡架构
 本地事务和分布式事务工作实践
 IIS防止同一IP大量非法访问
 使用EventLog类写Windows事件日志
 1878: [SDOI2009]HH的项链
 模板

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