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

查看全文

相关阅读:
项目经验分享(上)
socket.io实现在线群聊
 socket.io中文文档
 常用的Sublime Text插件及安装方法
 常用的Atom插件
 atom及其插件activate-power-mode下载安装
 jeesite快速开发平台
 js权威指南
 hexSHA1散列加密解密(不可逆)
腾讯云企业邮箱

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