学习及应用html,css,js,jqurey 的总结

最新推荐文章于 2023-03-31 20:38:29 发布

魂淡疯轻

最新推荐文章于 2023-03-31 20:38:29 发布

阅读量874

点赞数

分类专栏： Html

本文链接：https://blog.csdn.net/yazongliu/article/details/9530549

版权

Html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

生命不息，奋斗不止

HTML 指超文本标签语言。HTML 是通向 WEB 技术世界的钥匙。他把复杂的后台操作隐藏到各种网页之后，这样一来，这些复杂的操作对用户来说都是透明的。

CSS 指层叠样式表（CascadingStyle Sheets）。通过与HTML 结合，CSS 可以帮助我们实行表现与结构分离的开发模式。

下面是对html的常用标签，css样式，javascript，jqurey的简单应用：

1、利用div-ul-li实现的导航：

<!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 type="text/css">
body{
	margin: 0 auto;
	font-family: "宋体";
	font-size: 16px;
	}
li{
	font-family:"宋体";
	font-size:18px;
	float:left;
	width:99px;
	list-style-type:none;
	}
a{
	text-decoration:none;
	}
a:link{
	color: #00F;}
a:hover{
	color: #F00;}
a:active{
	color: #606;}
.content{
	margin:0 auto;
	width:80%;}
.content .head{
	height:80px;
	}
.content .nav{
	height:24px;
	}
.content .main{
	height:444px;}
.content .main .left{
	float:left;
	width:20%;
	height:100%;
	}
.content .main .right{
	float:left;
	width:80%;
	height:100%;
	}
.content .foot{
	height:80px;}
</style>
</head>

<body>
<div class="content"> 
  <!--head==============-->
  <div class="head"> </div>
  <!--nav=========-->
  <div class="nav">
    <ul>
      <li><a  href="index.html" target="_self">首    页</a></li>
      <li><a href="#"  target="_self">书籍管理</a></li>
      <li><a href="#" target="_self">分类管理</a></li>
      <li><a href="#" target="_self">借阅管理</a></li>
      <li><a href="#" target="_self">帮助中心</a></li>
    </ul>
  </div>
  <!--main===================-->
  <div class="main">
    <div class="left">  </div>
    <div class="right">  </div>
  </div>
  <!--foot================-->
  <div class="foot"> </div>
</div>
</body>
</html>

2、简单的表单验证：

<!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>email验证</title>
<script >
	function myemail(){
		var str=document.getElementById("email").value;
		//alert(str);
		var i=str.indexOf("@");
		var j=str.indexOf(".");
		var k=str.length;
		//alert(k);
			if(""==str){
				alert("邮箱为空!");
				return ;
			}
			if(-1==i|k-1==i){
				alert("邮箱格式不对");
				return;
			}
			if(-1==j|k-1==j){
				alert("邮箱格式不对");
				return;
			}
			if(j-i<2){
				alert("邮箱格式不对");
				return;
			}
			alert("邮箱通过验证！");
	}
</script>
</head>

<body>
<form action="" method="get">
  email：
  <input id="email" type="text" />
  <input type="button" οnclick="myemail()" value="确定" />
</form>
</body>
</html>

3、简单的事件处理：

<!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>changecolor</title>
<script >
	function changeColor(id,color){
			document.bgColor=color;
			document.getElementById(id).style.backgroundColor=color;
	}
</script>
<style type="text/css">
input {
	width: 64px;
	height: 24px;
}
</style>
</head>

<body>
<div align="center" style="margin:200px 100px">
  <input type="button" id="red" οnmοuseοver="changeColor('red','red')" οnmοuseοut="changeColor('red','white')" οnmοusedοwn="changeColor('red','black')" οnmοuseup="changeColor('red','white')" value="红色">
  </input>
  <br />
  <br />
  <input type="button" id="yellow" οnmοuseοver="changeColor('yellow','yellow')" οnmοuseοut="changeColor('yellow','white')" οnmοusedοwn="changeColor('yellow','black')" οnmοuseup="changeColor('yellow','white')"  value="黄色">
  </input>
  <br />
  <br />
  <input type="button" id="blue" οnmοuseοver="changeColor('blue','blue')" οnmοuseοut="changeColor('blue','white')" οnmοusedοwn="changeColor('blue','black')" οnmοuseup="changeColor('blue','white')" value="蓝色">
  </input>
  <br />
  <br />
</div>
</body>
</html>

4、利用jqurey实现简单的特效：

<!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>
<script src="jq.js"></script><!--必须引入jqurey库-->
<script >
	$(document).ready(function(){
		$("#hb").click(function(){
				$("p").hide(1000);
			});
		$("#sb").click(function(){
				$("p").show(1000);
			});
		$("#shb").click(function(){
				$("p").toggle(1000);
			});
		$("#fi").click(function(){
				$("p").fadeIn(1000);
			});
		$("#fo").click(function(){
				$("p").fadeOut(1000);
			});
		$("#fio").click(function(){
				$("p").fadeToggle(1000);
			});
		$("#sd").click(function(){
				$("p").slideDown(1000);
			});
		$("#su").click(function(){
				$("p").slideUp(1000);
			});
		$("#sdu").click(function(){
				$("p").slideToggle(1000);
			});
		$("p").click(function(){
				$(this).css("background-color","red");
			});
		$("p").click(function(){
				$(this).append("...hello jq..........");
			});
		$("#animate").click(function(){
				$(".div3").animate({height:"444px",width:"333px"},2000,function(){alert("动画展开")});
			});
		$("#reset").click(function(){
				$(".div3").animate({height:"22px",width:"33px"},1000,function(){alert("动画关闭")});
			});
	});	
</script>
<style type="text/css">
.div1, .div2, .div3, .div4 {
	width: 999px;
	height: auto;
	margin: 0px 200px;
}
input {
	width: 222px;
}
p {
	padding-left: 222px
}
</style>
</head>

<body>
<div>
  <p>隐藏与显示</p>
  <hr />
  <div class="div1">
    <input id="hb" name="hide" type="button" value="hide" />
       
    <input id="shb" name="sh" type="button" value="hide/show" />
       
    <input id="sb" name="show" type="button" value="show" />
    <br />
    <input id="fi" name="fadeIn" type="button" value="fadeIn" />
       
    <input id="fio" name="fio" type="button" value="fadeIn/fadeOut" />
       
    <input id="fo" name="fo" type="button" value="fadeOut" />
    <br />
    <p id="text" style="display:none">点我。。。hhhhhhhhhhhhhhhhhhhh</p>
    <p id="text" style="display:none">点我。。hhhhhhhhhhhhhhhhhhhh</p>
    <p id="text" style="">点我。。hhhhhhhhhhhhhhhhhhhh</p>
    <p id="text" style="display:none">点我。。hhhhhhhhhhhhhhhhhhhh</p>
  </div>
  <div class="div2">
    <input id="sd" name="sd" type="button" value="slideDown" />
       
    <input id="sdu" name="sdu" type="button" value="slideDown/slideUp" />
       
    <input id="su" name="su" type="button" value="slideUp" />
    <br />
  </div>
  <hr />
  <p>动画</p>
  <hr />
  <div class="div4">
    <input id="animate" name="animate" type="button" value="animate" />
    <input id="reset" name="reset" type="button" value="reset" />
    <div class="div3" align="center" style=" height:99px; width:99px; background-color:#93F;"></div>
  </div>
  <hr />
</div>
</body>
</html>

魂淡疯轻

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
学习及应用html,css,js,jqurey 的总结

HTML 指超文本标签语言。HTML 是通向 WEB 技术世界的钥匙。他把复杂的后台操作隐藏到各种网页之后，这样一来，这些复杂的操作对用户来说都是透明的。CSS 指层叠样式表（CascadingStyle Sheets）。通过与HTML 结合，CSS 可以帮助我们实行表现与结构分离的开发模式。下面是对html的常用标签，css样式，javascript，jqurey的简单应用：1、
复制链接

扫一扫

专栏目录