生命不息,奋斗不止
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>