CSS 学习&测试记录

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">
提示：您可以先修改部分代码再运行
相关阅读:
BZOJ3160: 万径人踪灭（FFT,回文自动机）
BZOJ4044: [Cerc2014] Virus synthesis（回文树+DP）
codeforces 666E. Forensic Examination（广义后缀自动机，Parent树，线段树合并）
BZOJ3926: [Zjoi2015]诸神眷顾的幻想乡（广义后缀自动机）
BZOJ5137: [Usaco2017 Dec]Standing Out from the Herd(广义后缀自动机，Parent树)
BZOJ4516: [Sdoi2016]生成魔咒(后缀自动机)
codeforces 235C. Cyclical Quest(后缀自动机)
codeforces 204E. Little Elephant and Strings(广义后缀自动机，Parent树)
BZOJ2119: 股市的预测（后缀数组）
BZOJ2555: SubString（后缀自动机，LCT维护Parent树）
原文地址：https://www.cnblogs.com/chy1000/p/1808893.html