CSS 学习&测试记录
2010-08-26 11:22
453 查看
function runCode(obj) {
var winname = window.open('', "_blank", '');
winname.document.open('text/html', 'replace');
//winname.opener = null // 防止代码对原页面修改
winname.document.write(obj.value);
winname.document.close();
}
function saveCode(obj) {
var winname = window.open('', '_blank', 'top=10000');
winname.document.open('text/html', 'replace');
winname.document.writeln(obj.value);
winname.document.execCommand('saveas','','code.htm');
winname.close();
}
function copyCode(obj) {
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
}
<!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">
提示：您可以先修改部分代码再运行
var winname = window.open('', "_blank", '');
winname.document.open('text/html', 'replace');
//winname.opener = null // 防止代码对原页面修改
winname.document.write(obj.value);
winname.document.close();
}
function saveCode(obj) {
var winname = window.open('', '_blank', 'top=10000');
winname.document.open('text/html', 'replace');
winname.document.writeln(obj.value);
winname.document.execCommand('saveas','','code.htm');
winname.close();
}
function copyCode(obj) {
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
}
<!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">
提示：您可以先修改部分代码再运行
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 学习html&css&JavaScript记录
- 20100604 学习记录：Gridview添加滚动条 && 网站消息弹出框 && Page_Unload
- 前端学习记录一---html_css 校验网址
- openCV学习记录：滤镜：熔铸&冰冻
- HTML/CSS学习记录（4）
- spring 测试层学习记录
- Android学习记录<五>
- HTML&CSS基础学习笔记1.10-添加链接
- CSS 学习网站，按学习顺序记录，多做手
- Android测试单元学习记录
- machine learning for hacker记录(4) 智能邮箱（排序学习&推荐系统）
- 雾山的Robotium学习笔记---CheckBox，RadioGroup&RadioButton的测试方法及结果判定
- spring boot 学习(三)API注解记录及测试
- CSS学习记录1
- HTML&CSS学习3——文字居中
- 前端学习 -- Html&Css -- 背景
- Head first HTML&CSS ---[学习笔记第七章]
- WebRTC学习记录（1）：采集microphone到文件原理实践&讲解
- 学习记录：交叉编译环境配置（buildroot and gdb&gdbserver）
- HTML&CSS学习2——布局