制作一个前程无忧的网页知识总结

最新推荐文章于 2021-02-13 11:25:16 发布

原创最新推荐文章于 2021-02-13 11:25:16 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#语言

个人记录专栏收录该内容

5 篇文章

订阅专栏

这篇博客详细介绍了层叠样式表（CSS）的三种类型：行内样式表、内嵌样式表和外部样式表，并探讨了如何在HTML中应用CSS，包括类选择器、ID选择器和标签选择器。此外，还提到了meta标签的作用以及JavaScript中document.getElementById()函数的应用，用于网页元素的交互和验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2013年12月2号我学习了层叠样式表的概念

总结如下：

	层叠样式表分为三种：	1,行内样式表：主要应用样式为用到<table style "width:100px;..."></table>

				2.内嵌样式表：在<head>

							内部添加<style type="text/css">

								1.以.开头在后面div中应用class<div class = "名称"></div>;

								2.以#开头在后面div中应用id  <div id="名称"></div>

								3.标签样式表eg:td{width:100px;

										.......}作用是设置一类标签的属性

								</style>

						</head>

				3.外部样式表：在外部定义一个css文件在head内部<link href="/层叠样式表/样式.css" rel="stylesheet" type="text/css"/>将css链接到html中。

下面是我跟随老师写的一个前程无忧的一个页面其中对话框内部的逻辑处理因为没有学到所以简单的写了点。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta是个单标签起初认为没有什么作用，后来查询了解到
 
  meta是html语言head区的一个辅助性标签。几乎所有的网页里，我们可以看到类似下面这段的html代码：
 
 
  <head>
 
 
  <meta http-equiv="content-Type" content="text/html; charset=gb2312" />
 
 
  </head>
  其实如果你能够用好meta标签，会给你带来意想不到的效果，例如加入
  关键字
  会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。
 >
<title></title>
<style type="text/css">              //内嵌样式表的固定格式  type是它的类型属性，text/css是它的值，它们是告诉浏览器这里面的文本内容(text)要当层叠样式表 (css)来解析，不能当作其它的来解析可以当作是一个声明。
        //以.开头的都是贴一些图片  后面以#开投的是在对话框后面增加逻辑拍短的提示图层他们的display属性刚开始都设置为none表示隐藏，当在<input标签内的οnfοcus="demo();"的事件触发时在script脚本中有相应的功能实现。>
	.divtop{
	position:absolute;
	top:10px;
	left:0px;
	height:48px;
	width:1001px;
	}
	
	.divtr{
	position:absolute;
	top:15px;
	left:921px;
	height:20px;
	width:70px;
	}
	
	.divinsert{
	position:absolute;
	top:60px;
	left:0px;
	width:1001px;
	height:39px;
	}
	.divinsertin{
	position:absolute;
	top:60px;
	left:0px;
	width:1001px;
	height:39px;
	text-align:right;
	}
	
	.divmiddle{
	position:absolute;
	top:100px;
	left:0px;
	width:1001px;
	height:398px;
	}
	
	.divbottom{
	position:absolute;
	top:510px;
	left:0px;
	width:1001px;
	height:200px;
	text-align:center;
	}

	.divmakesure{
	position:absolute;
	top:400px;
	left:0px;
	width:1001px;
	height:39px;
	text-align:center;
	}
	
	
	.divRight{
	position:absolute;
	top:450px;
	left:0px;
	width:1001px;
	height:12px;
	text-align:center;
	}
	
#apDiv1 {
	position:absolute;
	left:346px;
	top:134px;
	width:311px;
	height:300px;
	text-align:center;
}
#EmailTip{
	position:absolute;
	left:621px;
	top:185px;
	width:155px;
	height:20px;
	border:#0033CC solid 1px;
	background:#999933;
	display:none;
 		
}
#EmailRight {
	position:absolute;
	left:623px;
	top:185px;
	width:14px;
	height:15px;
	display:none;
}
#EmailWrong{
	position:absolute;
	left:623px;
	top:185px;
	width:160px;
	height:20px;
	display:none;
}
#NameRight {
	position:absolute;
	left:621px;
	top:195px;
	width:24px;
	height:20px;
	display:none;
}
#NameTip {
	position:absolute;
	left:622px;
	top:194px;
	width:250px;
	height:22px;
	diplay:none;
}
<!--可以再添加一个Name校验#NameWrong-->

</style>

<script>

关于document.getElementById("id");函数的理解 首先服务器想浏览器传输数据时数据到达内存中是以树的形式存储document表示此网页中的所有文档而getElementById是通过一个id来获取这个id的所有元素以便于更改属性值来达到变幻的效果。
	function EmailNameTip(){
		var msg = document.getElementById("EmailTip");
		msg.style.display="block";
		}
		
	function CheckEmailName(){
		var msgname = document.getElementById("Emailname");
		var msg1 = document.getElementById("EmailRight");
		var msg2 = document.getElementById("EmailWrong");
		var msg=document.getElementById("EmailTip");
		msg.style.display = "none";
		if(msgname.value==""){
			msg1.style.display = "none";
			msg2.style.display = "block";
		}
		else{
			msg1.style.display = "block";
			msg2.style.display = "none";
			}
			}
		
	function EmailNameTip(){
		var msg = document.getElementById("NameTip");
		msg.style.display="block";
		}
	
</script>
</head>

<body>

/在图层中插入图片格式为<img src="",属性>
	<div class="divtop">
		<img src="img/login_img1.gif" height="48" width="113"/>
    	<img src="img/login_img2.gif" height="48" width="267"/>
    </div>
 
    
    <div class="divtr">
    	<font color="#CCCCCC" size="-1">首页 | 帮助</font>
    </div>
    
    <div class="divinsert">
   	  <img src="img/login_img10.gif"height="39" width="1001">
    </div>
    
    <div class="divmiddle">
    	<img src="img/register_img1.gif"/><img src="img/register_img3.gif"/><img src="img/register_img2.gif"/>
    </div>
     
<div class="divinsertin">
     	<img src="img/login_img14.gif"/>
        <img src="img/login_img15.gif"/>
     </div>
     
     <div class="divbottom">
     	<font color="#999999">网站导航 | 服务声明 | 联络我们 | 关于我们 | 媒体报道 | 加入无忧 | 帮助 | Investor Relation | 合作伙伴<br/><br/>无忧工作网版权所有©1999-2003</font>
     </div>

     <div id="apDiv1">
     <table height="300" align="center">
       	   <td><font color="#FF9933">*</font><font color="#CCCCCC" face="微软雅黑" size="-1">Email :</font></td>
       	   <td>
            <input type="text" id="Emailname" name="Emailname" style="width:160px; height:26px" οnblur="CheckEmailName();" οnfοcus="EmailNameTip();"/>
           </td>
        </tr>
        <tr>
        	<td><font color="#FF9933">*</font><font color="#CCCCCC" face="微软雅黑" size="-1">用户名 :</font></td>

/*<<input> 标签用于搜集用户信息。>标签中可以通过9中途径来获得用户信息text,password'button等 onfocus onblur是用来激发事件所用。  在一个标签中可以存在  1.属性2.样式3.事件
       	  <td>
           	 <input type="text" id="username" name="username" style="width:160px; height:26px" οnfοcus="UserNameTip();" οnblur="CheckUserName();"/>
          </td>
        </tr>
        <tr>
       	  <td><font color="#FF9933">*</font><font color="#CCCCCC" face="微软雅黑" size="-1">密码 :</font></td>
        	<td>
            <input type="text" name="userpwd" style="width:160px; height:26px"/>
          </td>
        </tr>
        <tr>
        	<td><font color="#FF9933">*</font><font color="#CCCCCC" face="微软雅黑" size="-1">重复密码 :</font></td>
       	  <td>
            <input type="text" name="userpwd1" style="width:160px; height:26px"/>
          </td>
        </tr>
        <br/><br/>
        <tr>
        	<td colspan="2" align="center">
          <input type="image" src="img/register_img4.gif" width="154" height="39"></td>
        </tr>
        <tr>
       	  <td colspan="2" align="center"><input type="checkbox"><font color="#999999" face="微软雅黑" size="-1">  我已阅读</font><font color="#FF9933" face="微软雅黑" size="-1">服务声明</font></td>
        </tr>
     </table>
     </div>
     
     <div id="EmailTip">
     	<font size="-1" color="#00FF33">请输入您的Email地址</font>
</div>
     <div id="EmailRight"><img src="img/icon_need.gif"></div>
<div id="EmailWrong"><img src="img/icon_error.gif">输入不能为空</div>
     <div id="NameRight"></div>
     <div id="NameTip"></div>
</body>
</html>