function fun(obj)
{
obj.style.fontSize="30px";
}
</script>
<p onClick="fun(this)">事件绑定</p>
This表示事件源p；
window.onload=function(){alert("欢迎来到美淘网");}
<body onUnload="alert('触发onload事件')">
<meta charset="utf-8">
<title>无标题文档</title>
<style typ="text/css">
p{
color:red;
font-size:20px;
font-family:微软雅黑;
letter-spacing:10px; /*字符间距*/
text-align:right;/*文本的对齐方式*/
left:50px;
top:-20px;
}
#box3
{
background-color:yellow;
color:black;
position:fixed;/*固定定位*/
top:30px;
left:100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="box1">第一个层</div>
下拉列表<select name=””size（显示的行数）=”3”> <optionvalue=”湖北省”selected=”selected”>湖北省</option> </select>
多行文本域：自我介绍<textarea name cols=’列’rows=”行”></textarea>
提交按钮<input type=”submit”value=按钮显示的值”name/>
<marquee direction="right" onMouseOver="stop()" onMouseOut="start()">
<img src="images/psb (1).jpg" width="300" height="300" alt="1"/>
</marquee>
浏览器默认处理程序
<div id="box2">第二个层</div>
<div id="box3">第三个层</div>
</div>
</body>
盒子的浮动
Float:left;
Clear:both;overflow：hidden解决浮动塌陷
常用流行布局的实现
自适应width：80%当改变窗口的大小时，页面内容始终是窗口的80%
font-size:9px;
font-family:黑体;
}
.red(类选择器)
{
Color:red;
}
#news（id选择器）
{
Background-color:red;
}
</style>
选择器的优先级ID选择器》类选择器》标签选择器
文本和字体属性
<!doctype html>
<html>
<head>
title>盒子的定位</title>
<style type="text/css">
#wrapper
{
border:3px solid black;
}
#box1,#box2,#box3
{
border:3px solid black;
margin:5px;
height:40px;
width:300px;
<script type="text/javascript">
function Check()
{
event.returnValue=false;
}
</script>
<body>
<form action="index.html" onSubmit="return false;">
<input type="submit" value="确定"/>
(3,4)
函数也是一种数据类型function类型
匿名函数作为函数的参数来传递
Var area=function(width,height){
Document.write(“面积：”+width*height);
};
Area(3,4);
常用事件、
<script type="text/javascript">
var name=window.prompt("请输入姓名：");
window.alert("欢迎"+name);
确认对话框
var flag=window.confirm("确认删除吗？");
if(flag)
window.alert("执行删除操作");
else
window.alert("取消删除操作");
text-decoration:underline;/*文本修饰*/
line-height:30px;/*文本行高*/
font:bold 20px微软雅黑;
}
</style><Fra bibliotekhead>
<body>
<p>css是一种页面修饰梅花技术</p>
</body>
</html>
CSS盒子模型
<style type="text/css">
background-color:red;
background-image:url();
}
body
{
margin:0px;
}
#box2{
margin-top:30px;/*盒子之间的间距*/
border:5px solid red;
</style>
}
</head>
<body>
<div id="box1">
网页的基本结构
<html> <head><title><title></head><body></body></html>
文本标签
标题标签<h1></h1>……..<h6></h6>
段落标签<p align=’center,left,right’><fontcolor,face,size>字体标签</font></p>
<img src="images/2015.03.14.jpg" height="500" width="300">
</div>
<div id="box2">盒子2
</div>
</body>
网页布局设计
标准文档流
行内元素从左到右解析文档
块级元素从上到下解析元素
Display属性可以改变元素的性质
盒子的定位
JavaScript基础知识
定义函数
<script type="text/javascript">
function getArea (width,height)
{
var re=width*height;
return re;
/*document.write("面积："+re);*/
}
var area=getArea(3,4);
换行标签<br/>
水平线标签<hr size=’20px’color=’red’width=’100%’/>(<)< (>)>
图片标签<img src=”图片路径”alt=’图片提示信息’height,width,align=’文本与图片的对齐方式’/>
滚动标签<marquee direction=’up’></marquee>
密码框<input type=”password”>
单选按钮<input type=”radio”value=”男”name=”sex”>
复选框<input type=”checkbox”value=”篮球”checked=”checked”/>
