html学习Day3
2016-12-07 14:02
176 查看
一.学习内容
（1）表单相关标签：
1.<form>
2.<input>简单来说就是文本输入，提交按钮根据属性type的不同。
3.<fieldset> <legend>一个外框框，加一个标题！
4.<select><oprion>简单版的下拉菜单
（2）框架相关标签：
1.<iframe>首先可以直接用来引用别的页面（当你已经写好了这个页面）其次可以点击某个href之后，在相对应的ifame位置显示这个link。
（3）各种颜色的表达：直接英语可以，或者写HEX也可以。
（4）脚本：自己尝试了一些简单的脚本，点击之后显示，隐藏其他。
ps：菜鸟的速查列表感觉挺有用的：http://www.runoob.com/html/html-quicklist.html
然后据说就基本学完了(⊙o⊙)…........
二.代码
<!doctype html>
<head>
<meta charset="utf-8">
<title>Day3</title>
<meta http-equiv="refresh" content="10">
<style>
body{font-family:微软雅黑,Arial;}
.icon{float:right;margin-right:2px;width:60px; border-radius:1em;}
.icon_img{margin-left:25%;margin-top:2px;}
.icon_word{text-align:center;color:white;font-size:12px;}
.footclass{widtn:100%;font-size:12px;background-color:#9D9D9D;color:white;}
.foot_con{margin-top:10px;margin-left:10px;width:30%;border:1px solid yellow;}
</style>
<script>
function moveover(obj) {
obj.style.backgroundColor = "#BEBEBE";
}
function moveout(obj) {
obj.style.backgroundColor = "#9D9D9D";
}
function choose(n) {
for (var i = 1; i < 3; i++) {
var con = "content_" + i;
if (n == i) {
document.getElementById(con).style.display = "block";
}
else {
document.getElementById(con).style.display = "none";
}
}
}
</script>
<noscript> Sorry!Your computer cannot Support JavaScript!</noscript>
</head>
<body>
<div id="Header" style="width:100%;height:95px;background-color:#9D9D9D;border:1px solid #000000">
<p style="margin-top:2px;color:white;">TEST HTML Day3</p>
<div class="icon" onmousemove="moveover(this)" onmouseout="moveout(this)">
<div class="icon_img" ><img src="wechat.png"></div>
<div class="icon_word">Wechat</div>
</div>
<div class="icon" onmousemove="moveover(this)" onmouseout="moveout(this)">
<div class="icon_img" ><img src="qq.png"></div>
<div class="icon_word">QQ</div>
</div>
<div class="icon" onmousemove="moveover(this)" onmouseout="moveout(this)" onclick="choose(2)">
<a href="http://www.sina.com.cn" target="iframe1" style="text-decoration:none">
<div class="icon_img" ><img src="weibo.png"></div>
<div class="icon_word">Weibo</div>
</a>
</div>
<div class="icon" id="icon_1" onmousemove="moveover(this)" onmouseout="moveout(this)" onclick="choose(1)">
<div class="icon_img" ><img src="Login.png"></div>
<div class="icon_word">Login</div>
</div>
</div>
<div id="Content" style="width:100%;height:100%;border:1px solid red">
<div id="content_1" style="display:none">
<form>
<fieldset> <!--带边框的表单-->
<legend>Text Fields and Radio Buttons</legend>
<table>
<tr>
<td>
Name:
</td>
<td>
<input type="text"><br>
</td>
</tr>
<tr>
<td>
Password:
<td>
<input type="password">
</td>
</tr>
<tr>
<td>
Gender:
</td>
<td>
<input type="radio" name="sex">Male<br>
<input type="radio" name="sex">Female<br>
</td>
</tr>
<tr>
<td>
Dream School:
</td>
<td>
<select name="schools">
<option value="select">-----------Select-----------</option>
<option value="UBC">UBC</option>
<option value="Waterloo">Waterloo</option>
</td>
</tr>
</table>
</fieldset>
</form>
<br>
</div>
<div id="content_2" style="display:block;">
<fieldset>
<legend>Iframe</legend>
<iframe src="text2.html" name="iframe1" style="width:100%"></iframe>
</fieldset>
</div>
</div>
<div id="foot" class="footclass" style="border:1px solid green">
<div class="foot_con">
<ul> Contact us
<li>Address:Beijing</li>
<li>Tel:010-11111111</li>
<li>E-mail:123@263.com</li>
<li><a href="http://www.baidu.com" style="color:white;text-decoration:none;">More Information</a></li>
</ul>
</div>
<div class="foot_con">
<ul> Other Link
<li><a href="http://www.baidu.com" style="color:white;text-decoration:none;">Baidu</a></li>
<li><a href="http://www.sougou.com" style="color:white;text-decoration:none;">Sougou</a></li>
<li><a href="http://www.baidu.com" style="color:white;text-decoration:none;">Google</a></li>
<li><a href="http://www.baidu.com" style="color:white;text-decoration:none;">More Information</a></li>
</ul>
</div>
</div>
</body>
功能主要实现功能就是
1.当页面刚加载完时，显示的是我的text2.html页面，点击了login之后显示text file表单，点击微博weibo之后显示在页面中间的新浪网页。
2.并且没到鼠标滑过的时候，背景颜色会变浅，滑走之后又变回原来的颜色。嘿嘿嘿
三.问题
1.我的<div id=foot>为什么里面再嵌套两个div之后想要全部浮动在左侧，然后使它水平对齐，但是一旦float=left，框住他们的div就不见了。。。。。歪尔？
（1）表单相关标签：
1.<form>
2.<input>简单来说就是文本输入，提交按钮根据属性type的不同。
3.<fieldset> <legend>一个外框框，加一个标题！
4.<select><oprion>简单版的下拉菜单
（2）框架相关标签：
1.<iframe>首先可以直接用来引用别的页面（当你已经写好了这个页面）其次可以点击某个href之后，在相对应的ifame位置显示这个link。
（3）各种颜色的表达：直接英语可以，或者写HEX也可以。
（4）脚本：自己尝试了一些简单的脚本，点击之后显示，隐藏其他。
ps：菜鸟的速查列表感觉挺有用的：http://www.runoob.com/html/html-quicklist.html
然后据说就基本学完了(⊙o⊙)…........
二.代码
<!doctype html>
<head>
<meta charset="utf-8">
<title>Day3</title>
<meta http-equiv="refresh" content="10">
<style>
body{font-family:微软雅黑,Arial;}
.icon{float:right;margin-right:2px;width:60px; border-radius:1em;}
.icon_img{margin-left:25%;margin-top:2px;}
.icon_word{text-align:center;color:white;font-size:12px;}
.footclass{widtn:100%;font-size:12px;background-color:#9D9D9D;color:white;}
.foot_con{margin-top:10px;margin-left:10px;width:30%;border:1px solid yellow;}
</style>
<script>
function moveover(obj) {
obj.style.backgroundColor = "#BEBEBE";
}
function moveout(obj) {
obj.style.backgroundColor = "#9D9D9D";
}
function choose(n) {
for (var i = 1; i < 3; i++) {
var con = "content_" + i;
if (n == i) {
document.getElementById(con).style.display = "block";
}
else {
document.getElementById(con).style.display = "none";
}
}
}
</script>
<noscript> Sorry!Your computer cannot Support JavaScript!</noscript>
</head>
<body>
<div id="Header" style="width:100%;height:95px;background-color:#9D9D9D;border:1px solid #000000">
<p style="margin-top:2px;color:white;">TEST HTML Day3</p>
<div class="icon" onmousemove="moveover(this)" onmouseout="moveout(this)">
<div class="icon_img" ><img src="wechat.png"></div>
<div class="icon_word">Wechat</div>
</div>
<div class="icon" onmousemove="moveover(this)" onmouseout="moveout(this)">
<div class="icon_img" ><img src="qq.png"></div>
<div class="icon_word">QQ</div>
</div>
<div class="icon" onmousemove="moveover(this)" onmouseout="moveout(this)" onclick="choose(2)">
<a href="http://www.sina.com.cn" target="iframe1" style="text-decoration:none">
<div class="icon_img" ><img src="weibo.png"></div>
<div class="icon_word">Weibo</div>
</a>
</div>
<div class="icon" id="icon_1" onmousemove="moveover(this)" onmouseout="moveout(this)" onclick="choose(1)">
<div class="icon_img" ><img src="Login.png"></div>
<div class="icon_word">Login</div>
</div>
</div>
<div id="Content" style="width:100%;height:100%;border:1px solid red">
<div id="content_1" style="display:none">
<form>
<fieldset> <!--带边框的表单-->
<legend>Text Fields and Radio Buttons</legend>
<table>
<tr>
<td>
Name:
</td>
<td>
<input type="text"><br>
</td>
</tr>
<tr>
<td>
Password:
<td>
<input type="password">
</td>
</tr>
<tr>
<td>
Gender:
</td>
<td>
<input type="radio" name="sex">Male<br>
<input type="radio" name="sex">Female<br>
</td>
</tr>
<tr>
<td>
Dream School:
</td>
<td>
<select name="schools">
<option value="select">-----------Select-----------</option>
<option value="UBC">UBC</option>
<option value="Waterloo">Waterloo</option>
</td>
</tr>
</table>
</fieldset>
</form>
<br>
</div>
<div id="content_2" style="display:block;">
<fieldset>
<legend>Iframe</legend>
<iframe src="text2.html" name="iframe1" style="width:100%"></iframe>
</fieldset>
</div>
</div>
<div id="foot" class="footclass" style="border:1px solid green">
<div class="foot_con">
<ul> Contact us
<li>Address:Beijing</li>
<li>Tel:010-11111111</li>
<li>E-mail:123@263.com</li>
<li><a href="http://www.baidu.com" style="color:white;text-decoration:none;">More Information</a></li>
</ul>
</div>
<div class="foot_con">
<ul> Other Link
<li><a href="http://www.baidu.com" style="color:white;text-decoration:none;">Baidu</a></li>
<li><a href="http://www.sougou.com" style="color:white;text-decoration:none;">Sougou</a></li>
<li><a href="http://www.baidu.com" style="color:white;text-decoration:none;">Google</a></li>
<li><a href="http://www.baidu.com" style="color:white;text-decoration:none;">More Information</a></li>
</ul>
</div>
</div>
</body>
功能主要实现功能就是
1.当页面刚加载完时，显示的是我的text2.html页面，点击了login之后显示text file表单，点击微博weibo之后显示在页面中间的新浪网页。
2.并且没到鼠标滑过的时候，背景颜色会变浅，滑走之后又变回原来的颜色。嘿嘿嘿
三.问题
1.我的<div id=foot>为什么里面再嵌套两个div之后想要全部浮动在左侧，然后使它水平对齐，但是一旦float=left，框住他们的div就不见了。。。。。歪尔？
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML及CSS学习随手记 day3 （head first）
- html-day3-个人学习笔记
- 学习笔记2017.07.05-day3,am-HTML表格
- HTML学习笔记(Day3)
- javascript学习手记(Html)meta标签之详解
- HTML语言学习笔记之三
- HTML tag 学习
- 我学习html的顺序
- HTML语言学习笔记之二
- PEAR/HTML/HTML_Form学习
- PHP学习第七节---- PHP结合HTML打印表格
- 网站制作初步 第二步部分 学习HTML语言
- HtmlTextWriter学习笔记
- 第一天学习的总结(span,html控件,web控件,botton,随机数)
- HtmlTextWriter类的学习
- SQL Server 2005中的T-SQL增强 转载：WWW.CHINAHTML.COM 学习
- 学习html
- HTML学习笔记
- HTML 学习笔记
- 张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习