JavaScript学习笔记4
来源：互联网 发布：英文全文翻译软件 编辑：程序博客网 时间：2024/05/16 14:10
4。1 CSS样式表
4。1。1 样式表的类型
行内样式表，内嵌样式表和外部样式表。
1。行内样式表
行内样式表是混合在HTML标签使用的，用这种方法，可以简单地对页面中的任何标签单独定义样式，只需在开始标签中包含一个style属性，后面再跟一个或多个属性及其属性值即可。
示例1：
<html>
<head>
<title>行内样式应用</title>
<style type="text/css">
A{
color:blue;
text-decoration:none;
}
A:hover
{
color:red;
}
</style>
</head>
<body>
<form action="" method="post">
<table border=0 align="center">
<tr align=left>
<td width="120">会员名：</td>
<td width="145">
<input style="border-width:1px;border-style:solid;" size=15 name=txtName>
</td>
</tr>
<tr align=left>
<td>密 码：</td>
<td>
<input style="border-width:1px;border-style:solid;" type="password" size=15 name="txtPass"></td>
</tr>
<tr>
<td height="30" colspan=2 align=center>
<input name="button" type="button" style="background-image:url(images/back1.jpg);color:#0000FF;border:0px;margin:0px; padding:0px;height:23px;width:82px;font-size:14px;" value="登录">
</td>
</tr>
</td align=right colspan=2><A href="#">免费注册</A></td>
</tr>
</table>
</form>
</body>
<p> </p>
<p></p>
</body>
</html>
2。内嵌样式表
内嵌样式表也称为嵌入样式表，它放置在<head>与</head>标签内，并且以<style type="text/css">开始，以</style>结束，这些定义的样式就可以应用到页面中。具体用法如示例所示。
示例2：
<html>
<head>
<title>内嵌样式应用</title>
<style type="text/css">
A
{
color:blue;
text-decoration:none;
}
A:hover
{
color:red;
}
.boxBorder
{
border-width:1px;
border-style:solid;
}
.picButton
{
background-image:url(images/back1.jpg);
color:0px;
margin:0px;
padding:0px;
height:23px;
width:82px;
font-size:14px;
}
#content{background-color:#E7FBFF;}
</style>
</head>
<body>
<div id="content">
<form action="" method="post">
<table border=0 align="center">
<tr align=left>
<td width="60">会员名：</td>
<td width="145">
<input id=txtName class=boxBorder size=15 name=txtName></td>
</tr>
<tr align=left>
<td>密 码</td>
<td>
<input id=txtPass class=boxBorder type=password size=15 name=txtPass></td>
</tr>
<tr>
<td height="30" colspan=2 align=center>
<input name=Button type="button" class="picButton" value="登录">
</td>
</tr>
<tr>
<td align=right colspan=2><A href="#">免费注册</A></td>
</tr>
</table>
</form>
</div>
</body>
<p> </p>
<p></p>
</body>
</html>
3。外部样式表
外部样式表是一个独立的文件，文件里定义了各种样式规则。这样，外部样式表可以被多个HTML页面所引用，在应用外部样式表是有两种方式：一种是在页面中使用<link>标签链接天外部样式文件；另一种是在页面中使用@import方法导入外部样式表。具休示例如下。
示例3：外部样式文件
A
{
color:blue;
text-decortion:none;
}
A:hover
{
color:red;
}
.boxBorder
{
border-width:1px;
border-style:solid;
}
.picButton
{
background-image:url(images/back1.jpg);
Color:#0000ff;
border:0px;
margin:0px;
padding:0px;
height:23px;
width:82px;
font-size:14px:
}
把样式文件和网页绑定，引用方式如下。
<html>
<head>
<title></titel>
<link rel="stylesheet" href="outcss_file.css" type="text/css">//链接外部样式表文件
</head>
<body>
<form action="" method="post">
<table border=0 align="center">
<tr align=left>
<td width="60">会员名:</td>
<td width="145">
<input class=boxBorder id=txtName size=15 name=txtName></td>
</tr>
<tr align=left>
<td>密 码:</td>
<td><input class=boxBorder id=txtPass type=password size=15 name=txtPass></td>
</tr>
<tr>
<td height="30" colspan=2 align=center>
<input name=Button type="button" class="picButton" value="登录"></td>
</tr>
<tr>
<td align=right colspan=2><A href="#">免费注册</A></TD>
</tr>
</table>
</form>
</body>
</html>
4。1。2 常用样式
1。文本属性
font-size 字体大小
font-family 字体类型
font-style 字本样式
color 设置或检索文本的颜色
text-align 文本对齐
2。背景属性
background-color 设置背景颜色
background-image 设置背景图像
background-repeat 设置一个指定的图像如何被重复
4。2 制作改变字本大小的样式特效
制作以下特效：当鼠标移动到文本“免费注册”超链接上方时，“免费注册”这几个字就变大并且颜色变为红色，当鼠标离开时这几个字就变小并且颜色变为蓝色，因此要为文本定义两个样式，鼠标的移动事件分别对应不同的样式。
示例4：
<html>
<head>
<title></title>
<style type="text/css">
A{
color:blue;
text-decoration:none;
}
A:hover
{
color:red;
}
.boxDorder
{
border-width:1px;
border-style:solid;
}
.picButton
{
background-image:url(images/back1.jpg);
color:#0000FF;
border:0px;
margin:0px;
padding:0px;
height:23px;
width:82px;
Font-size:14px;
}
</style>
</head>
<body>
<form action="" method="post">
<table border=0 align="center">
<tr align=left>
<td width="60">会员名:</td>
<td width="145">
<input class=boxBorder id=txtName size=15 name=txtName>
</td>
</tr>
<tr align=left>
<td>密 码:</td>
<td><input class=boxBorder id=txtPass type=password size=15 name=txtPass></td>
</tr>
<tr><td height="30" colspan=2 align=center>
<input name=Button type="button" class="picButton" value="登录">
</td>
</tr>
<tr>
<td align=right colspan=2>
<A href="#" onMouseOver="this.style.fontSize='24px'" onMouseOut="this.style.fontSize='14px'">免费注册</A></td>
</tr>
</table>
</form>
</body>
</html>
4。3 制作改变按钮背景图片的特效
当鼠标移到按钮上方时，按钮的背景图片变为另一幅图片，当鼠标移出按钮上方时，按钮的背景图片变为原始的效果。
示例5：
<html>
<head>
<titel></titel>
<style type="text/css">
.mouseOverStyle
{
background-image:url(images/back2.jpg);
color:#CC0099;
border:0px;
margin:0px;
padding:0px;
height:23px;
width:82px;
font-size:14px;
}
.mouseOutStyle
{
background-image:url(images/back1.jpg);
color:0000FF;
border:0px;
margin:0px;
padding:0px;
height:23px;
width:82px;
font-size:14px;
}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<input type="submit" name="Submit" value="提交" class="mouseOverStyle" onmouseover="this.className='mouseOverStyle'"
onmouseout="this.className='mouseOutStyle'">
</form>
</body>
</html>
示例5中的样式为CSS样式，所按钮背景图片的设置使用了属性名为background-image,而不是Style对象中的属性名backgroundImage,请切记，否则出错还不知怎么回事。
4。4 层的显示/隐藏特效
在设计网页时，经常会碰到层的显示与隐藏特效，如下拉菜单等。其实这些特效都用到CSS样式中的display属性，它主要用来控制页面中的元素是否显示，从而实现页面中元素的显示各隐藏效果。下面对display属性的语法格式各其常用的取值进行详细的说明。
语法：
Object.stryle.display="value";
其中，Object指HTML文档中的页面元素，style为每个元素的样式属性，display表示页面元素以何种方式显示属性，如document.getElementById("pl").style.display="none";表示隐藏页面中ID名为pl的页面元素。value可以取十几个值如下
bolck 默认值。按块显示，换行显示，用该值为对象之后添加新行
none 不显示，隐藏对象
inline 按行显示，和其他元素在同一行显示
4。4。2 制作层的显示/隐藏特效
示例6：
<html>
<head>
<title></title>
<style type="text/css">
#advLayer{
position:absolute;
left:62px;
top:44px;
width:360px;
height:190px;
z-index:2;}
</style>
<script language="javascript">
function closeMe(){
document.getElementById("advLayer").style.display="none";}
function showMe(){
document.getElementById("advLayer").style.display="block";}
</script>
</head>
<body>
<p>
<input name="placeButton" type="button" onClick="closeMe()" value="关闭层">
<input name="placeButton2" type="button" onClick="showMe()" value="弹出层">
</p>
<div id="advLayer"><img src="images/advPic.jpg" width="360" height="190">
</div>
<h1>层下方的内容</h1>
<h1>层下方的内容</h1>
<h1>层下方的内容</h1>
<h1>如果修改代码：去除层DIV的样式</h1>
<h1>将出现内容动态隐藏显示的效果</h1>
</body>
</html>
4。5 图片的显示/隐藏特效
实现图片的切换特效
示例7：
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>图片的切换效果</TITLE>
<SCRIPT language="javascript">
function InitImage( ){
document.getElementById("gameTab2").style.display="none";
document.getElementById("game").style.display="none";
document.getElementById("mobileTab1").style.display="none";
}
function TabChange(show,hidden) {
document.getElementById(show ).style.display="block";
document.getElementById(hidden ).style.display="none";
document.getElementById(show+"Tab1").style.display="none";
document.getElementById(hidden+"Tab2").style.display="none";
document.getElementById(hidden+"Tab1").style.display="block";
document.getElementById(show+"Tab2").style.display="block";
}
</SCRIPT>
</HEAD>
<BODY onLoad="InitImage( )">
<TABLE border="0" align="center" cellpadding="0" cellspacing="0">
<TR>
<TD><IMG id="gameTab1" src="images/gameTab1.jpg" width="83" height="47" onMouseOver="TabChange('game','mobile')" >
<IMG id="gameTab2" src="images/gameTab2.jpg" width="83" height="49"></TD>
<TD><IMG id="mobileTab1" src="images/mobileTab1.jpg" width="81" height="49" onMouseOver="TabChange('mobile','game')">
<IMG id="mobileTab2" src="images/mobileTab2.jpg" width="82" height="47"></TD>
</TR>
<TR>
<TD colspan="2"><IMG id="mobile" src="images/mobile.jpg" width="165" height="171">
<IMG id="game" src="images/game.jpg" width="164" height="169" ></TD>
</TR>
<TR>
<TD colspan="2"><IMG src="images/fly.jpg" width="165" height="43"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
- JavaScript学习笔记4
- JavaScript 学习笔记 4
- JavaScript学习笔记4
- JavaScript学习笔记4
- javascript学习笔记 4
- JavaScript学习笔记(4)
- JavaScript学习笔记4
- javascript 学习笔记（4）
- javascript学习笔记（4）
- JavaScript学习笔记（4）
- JavaScript学习笔记(4)---prototype
- JavaScript学习笔记（4）
- JavaScript学习笔记4--对象
- javascript cookie学习笔记javascript
- JavaScript学习笔记4（.net）
- HTML学习笔记（JavaScript）NO.4
- JavaScript学习笔记4-闭包
- JavaScript高级程序设计学习笔记(1-4)
- 一次选择多个文件上传的解决方案
- 按分类取前三条记录
- 人月神话读书笔记（2）-人月神话
- Effective C++ 3nd 读书摘要（八、定制new和delete）Item49 - 52
- 令中国人感动的两个小故事
- JavaScript学习笔记4
- 【转帖】驱动研究日记－链表＋后备链表
- 为了分数而来
- 使用FOR XML将查询结果以XML格式返回（Using the FOR XML Clause to Return Query Results as XML）
- Windows Media Player控件的使用和使用心得
- 深入GetMessage和PeekMessage
- 自我介绍
- 热门的技术教程！ASP.NET MVC, JQuery, ASP.NET AJAX and ADO.NET Entity Framework
- php网站根目录
