html学习Day3

最新推荐文章于 2024-08-11 02:49:42 发布

fleetingevent

最新推荐文章于 2024-08-11 02:49:42 发布

阅读量250

点赞数

文章标签： html

本文链接：https://blog.csdn.net/fleetingevent/article/details/53504814

版权

一.学习内容

（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" οnmοusemοve="moveover(this)" οnmοuseοut="moveout(this)">
      <div class="icon_img" ><img src="wechat.png"></div>
	  <div class="icon_word">Wechat</div>
   </div>
   <div class="icon" οnmοusemοve="moveover(this)" οnmοuseοut="moveout(this)">
      <div class="icon_img" ><img src="qq.png"></div>
	  <div class="icon_word">QQ</div>
   </div>
   <div class="icon" οnmοusemοve="moveover(this)" οnmοuseοut="moveout(this)"  οnclick="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" οnmοusemοve="moveover(this)" οnmοuseοut="moveout(this)" οnclick="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>

功能主要实现功能就是