16:20:42
<embed src="flash/banner.swf" width="531" height="198"></embed>
flash
text-decoration:underline 加下划线
20:07:56
是一个模块，和DIV的作用一样
唯一的区别是它是内联元素，使用时必须加float left转块元素，在架构内部结构时使用和P、font等标记可同时使用。
内联转块：
壹/:家float：left；针对水平分布内联
贰/:display:block; 针对垂直方向分布的内联
叁/:position:absolute; 采取相对定位针对不规则分布内联
一个标记同时使用两个样式时，之间用空格隔开
网页中按钮设置时比正确尺寸多加4-6px
<marquee></marquee>滚动字幕
<marquee style="font-size:40px; color:#FFFFFF;">我们都是好孩子</marquee>
表格 table 居中 align="center"
单元格水平垂直居中 <td align="center" valign="middle">zxczx</td>
链接的四个默认状态
正常：a：link
划过：a：hover
点击过状态：a：visited
按下不动 激活状态：a：active
导航菜单利用层的制作时
default默认
hidden隐藏
visible显示
inherit继承性
<img/> 可以设置大小
有路径
内联元素
内联元素
<input>
<a>伪类标记
<img>
<B><B>
<U></U>
<I></I>
<em></em>
第一课：表单(<form></form>)是块元素(block)
块元素：有固定大小（可直接设置宽width和高height)
常见的块元素：div,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd
表单的属性：3个，
1)传送方法:method="post"大量数据 method="get"小于1kb数据
格式：<form method="post" action="form.asp" name="form1"></form>
2)执行页面: action="form.asp" action="form.php" action="form.aspx" action="form.jsp"
3)名称：name="form1"
text(文本) hidden() possword() name
button(按钮) repet(重置) submit(提交) type()
checkbox(多选按钮) image() radio(单选按钮)
value属性值根据type类型的不同表达的意义也不一样，
当type类型为hidden和 possword时它代表了标签的初始值
当type类型为botton,reset 和submit时，它代表了标签的显示内容
当type类型为 checkbox,image,rodio时他的标签
title{标题（<title>标题名</title>）
注释（<a href="#" title="注释内容" target="blank">连接文字</a>）
盒子的大小由它的内容决定，而它的内容就是所谓的标准流。
同一行时，两盒子的左右外间距为两盒子的间距和
垂直时的外间距取两盒子的最大值
a:link
a:visited }三者顺序不可颠倒设置
a:hover
target(超链接目标){ blank
parent
sefl
top
表单的内部结构：
1)文本域：a:文本框（单行文本框）：<input type="text" name="user" />
b：密码框：<input type="password" name="pwd" />
c:文本区域(多行文本框）：<textarea></textarea>
2)按钮：a:提交：<input type="submit" value="提交" />
b:重置按钮：<input type="reset" value="清除" />
c:交互按钮：<input type="button" value="验证" />
3)单选按钮及复选框：
a)单选按钮：<input type="radio" name="sex" />
b)复选框：<input type="checkbox" name="sport" />
4)列表菜单：<select></select> 菜单项：<option>北京</option>
<textarea></textarea>
checked="checked" （初始值设定）
(直接写在input)
当鼠标经过文本框内容被选中 onmouseover="this.select();"
当鼠标被点击时清空内容 onclick="this.value='';"
第二课:web标准结构与css样式规范(门户类网站）
结构：1）1+2+1结构
代码：
<!--header-->
<div class="header">
</div>
<!--main-->
<div class="main">
<div class="mainleft"></div>
<div class="maincenter"></div>
<div class="mainright"></div>
</div>
<!--footer-->
<div class="footer">
</div>
css代码规范：
1.头部名称header 标志：logo 广告:banner 导航:mainnav 子导航：subnav
2.主体：main 左侧主体：mainleft 中间主体:maincenter 右侧：mainright
3.底部：footer 版权copy
内容模块名称：标题tit 内容列表：content 补白名称：blank18
css代码格式：
/*基本设置*/
body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";}/*文档清零*/
div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset{margin:0;padding:0;}/*边界元素清零*/
ul,li{list-style:none;}/*去除列表符号*/
img,input{border:none;}/*去除图片按钮边框*/
a{text-decoration:none;}/*去除超链接下划线*/
/*布局*/
.header{}
.main{}
.footer{}
/*尺寸*/
.w20{}
.h100{}
/*填充*/
.blank18{}
/*颜色*/
.white{color:#ffffff;}
第三课：图文混排
1)单行水平分布：左边图片右边文字.图解
使用方法：代码视图:<a href="#" class="sign">文字</a>
样式表中 .sign{background:url(../images/sign1.jpg) no-repeat;}
2)多行水平分布：采用列表(看示例图）
使用方法:代码视图：
<ul>
<li><a href="#">文字1</a></li>
<li><a href="#">文字2</a></li>
</ul>
ul,li:适用于多行的图文编排，制作导航菜单
样式表中：ul li{background:url(../images/sign1.jpg) no-repeat left center;}
0
例如
<div class="ul">
<ul class="float w10">
<li><img src="img/dhao.jpg" /><a href="#">免费给信息</a></li>
<li><img src="img/dhao.jpg" /><a href="#">免费发信息</a></li>
<li><img src="img/dhao.jpg" /><a href="#">免费给性发信息</a></li>
</ul>
<ul class="float w10">
<li><img src="img/dhao.jpg" /><a href="#">免费发表心情美文</a></li>
<li><img src="img/dhao.jpg" /><a href="#">免费心情美算得文</a></li>
<li><img src="img/dhao.jpg" /><a href="#">免费的技术开发kj</a></li>
</ul>
</div>
.ul{345px; height:60px;}
.w10{padding-left:40px;}
3)垂直分布：上边图片下边文字
静态站：使用方法;代码视图：
<dl>
<dt><a href="#"><img src="" /></a></dt>
<dd><a href="#">文字</a></dd>
</dl>
动态站：使用方法；代码视图：
<ul>
<li><img src="" /><a href="#">文字</a></li>
<li><img src="" /><a href="#">文字</a></li>
</ul>
注：li设置float:left;
4)图文绕排:左边图片，右侧段落文字
代码视图：
<span><img src="" /></span><p>段落文字</p>
注：span设置float:left;
css的背景
1前景色（color：#FFFFFF;）
2背景图片（ background:url(../img/mlbj.jpg) no-repeat;）
3背景颜色：background-color:#00FF00;
背景的重复
水平平铺：background-repeat:repeat-x;
垂直平铺：background-repeat:repeat-y;
不重复：background-repeat:no-repeat;
背景图片的定位
background-position：左右 上下 背景居中
背景图像的底部居中
background-position：center；bottom；
background-position：right；bottom；
精确的控制背景
background-position：左减右加 即left为负数right为正数
上减下加 即top为负数bottom为负数
例如：background-position：10px 10px；
文本
1缩进文本：text-indext：24px；（取决于当前文本文字，应用于块级元素）
2水平对齐：text-align：left；center；right；（应用于文本和内联元素）
3字间距：word-spacing：20px；
4字母间距：letter-spacing：30px；
5文本修饰：text-decoration；none；无下划线
text-decoration；underline；下划线
6处理空白符<处理代码中的空格>
white-space:per(预格式化)
7指定字体
font-family:"宋体"，Arial;
8字体粗细：font-weight：bold；加粗
font-weight：normal；不加粗
9行高：line-height：1.5;<1.5倍行高 即1.5倍比1距离>
第四课：浏览器兼容
一、常见的兼容处理：_:仅对IE6使用 *针对IE6/IE7使用 !important针对IE7/FF使用
a)IE6与FF的兼容处理:操作方法background:#ffff00;_background:#ff0000;
b)IE6与IE7的兼容处理：操作方法：background:#00ff00 !important;background:#0000ff;
c)IE7与FF的兼容处理：操作方法：background:#ffff00;*background:#ff00ff;
d)IE6与IE7与FF的同时兼容处理：background:#ff0000;*background:#00ff00;_background:#0000ff;
e)IE6/7与IE8/FF的兼容处理：background:#ffff00;+background:#ff0000;
f)IE8兼容：转成IE7处理:<meta http-equiv="x-ua-compatible" content="ie=7" />
二、浏览器常见的bug
1.IE6双倍浮动问题：处理方案1):margin-left:10px !important; 处理方案2）：display:inline;
2.FF出现下面div跑到上面div中，处理方案：给下面div加样式：clear:both;
3.IE6小于16px以下的div高度bug解决：font-size:0或overflow:hidden;
第五课：高度自适应(动态站）与文件框的使用
1.高度自适应的原理：外部div的高度随内部div的高度变化
操作流程：外部div设置样式如下: height:auto !important;height:100px;min-height:100px;
内部div设置时，需在最后一行添加一下空div,具体设置如下<div style="clear:both;"></div>
效果演示：二列浮动div的高度自适应。
<div class="main">
<div class="mainleft"></div>
<div class="mainright"></div>
<div style="clear:both;"></div> /*不设宽高*/
</div>
.main{1002px; height:auto !important; height:xxxpx; min-height:100px;}
2。文件框标记:<fieldset></fieldset> 文件框标题：<legend></legend>
代码视图的格式：
<fieldset>
<legend>这是标题</legend>
<div>这是内容</div>
</fieldset>
第六课:定位的使用(三角形制作）以及透明滤镜的制作
定位(position)的分类：绝对定位(absolute)和相对定位(relative)
使用方法：外div采用相对定位(position:relative;)，内div采用绝对定位(position:absolute;)
三角形的制作方法：需要使用到的属性和值有0;height:0;position:absolute;font-size:0;border:6px solid #ffffcc;border-left:6px solid #ff0000;
代码视图：
<div class="nav">
<ul>
<li><a href="#"><span></span>网站首页</a></li>
<li><a href="#"><span></span>产品介绍</a></li>
<li><a href="#"><span></span>联系我们</a></li>
</ul>
</div>
样式表:
.nav{200px;height:500px;background:#ffffcc;}
.nav ul li a{display:block;color:#ff0000;padding-left:20px;}
.nav ul li a:hover{color:#000000;}
.nav ul li a span{display:block;0;height:0;font-size:0;overflow:hidden;position:absolute;border:6px solid #ffffcc;border-left:6px solid #ffffcc;margin-left:-20px;}
.nav ul li a:hover span{border-left:6px solid #ff0000;}
二、滤镜的使用(filter):设置透明度的值
格式：IE浏览器：filter:alpha(opacity=30); FF浏览器：opacity:0.3;
思考问题:如何解决内部内容不变透明
第七课：导航菜单（一级导航菜单）
1)多背景一级导航菜单:利用背景的图像的位置控制 background-position:left或right top或bottom;
background-position:10px 10px;
注：背景位置：向左采用负值，向右采用正值，向下采用正值，向上采用负值。
操作流程：代码视图
<div class="nav">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
</ul>
</div>
style.css样式中
.nav ul li{float:left;}
.nav ul li a{display:block;176px;height:43px;background:url(../images/right.jpg) no-repeat;}
.nav ul li a:hover{background-position:0 -43px;}
2)宽度自适应滑动门
格式：设置固定高度，宽度不给值
代码视图：
<div class="nav">
<ul>
<li><a href="#"><span><em>首页</em></span></a></li>
<li><a href="#"><span><em>产品栏</em></span></a></li>
<li><a href="#"><span><em>公司简介</em></span></a></li>
</ul>
</div>
例如：
<div class="blank10"></div>
<div class="footer">
<ul>
<li><a href="#" class="a1">网站首页</a></li>
<li><a href="#" class="a2">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
</ul>
</div>
css表
.footer ul li{float:left;}
.footer ul li a{display:block;124px;height:34px;background:url(../images/color002.jpg) no-repeat;background-position:-7px -15px;}
.footer ul li a.a1:hover{background-position:-7px -267px;}
.footer ul li a.a2:hover{background-position:-7px -381px;}
第八课：导航菜单（二级导航菜单）
原理：二级导航菜单的ul嵌入在一级导航菜单的li中。
先利用定位position:absolute;先设置left:-999px;后设置left:auto;
代码视图：
<div class="menu" id="nav" >
<ul>
<li><a href="#">网站首页</a></li>
<li>
<a href="#">关于我们</a>
<ul>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司新闻</a></li>
</ul>
</li>
</ul>
</div>
<!--脚本-->
<script language="javascript">
function showmenu()
{
var li=document.getElementById("nav").getElementsByTagName("li");
}
</script>
style.css样式中
.menu ul li{float:left;}
.menu ul li a,.menu ul li ul li a{display:block;146px;height:43px;background:url(../images/right.gif) no-repeat;}
.menu ul li a:hover,menu ul li ul li a:hover{background-position:0 -43px;}
.menu ul li ul{position:absolute;left:-999px;}
.menu ul li ul li{float:left;}
.menu ul li.showmenu ul{left:auto;}
脚本
javascript/vbscript语言
嵌入在网页当中，前台执行交互动作
格式<script langvage="javascript"></script>
位置在<head></head>或者<body></body>之间
调用格式：onclick=“调用名称（）；”《名称可以是英文或大写字母，但不能是中文或数字》
名称的创建 命名：var k; var貌似姓氏而k就是名字
在head中建立调用脚本代码
function color(){
document.bgColor="#ff0000";
}
在body中调用
<input type="button" value="红色" onclick="red/color();"/>
常见的鼠标事件
onclick点击
onmouseover经过
onmouseout离开
例如
<title>a</title>
<script langvage="javascript">
function red(){
document.bgColor="#FF000";
}
function green(){
document.bgColor="#00ff00";
}
function bl(){
document.bgColor="#0000ff";
}
function cc(){
document.bgColor="#00ffff";
}
function bl(){
document.bgColor="#0000ff";
}
</script>
</head>
<body>
<input type="button" value="红色" onclick="red();"/>
<input type="button" value="绿色" onclick="green();"/>
<input type="button" value="蓝色" onclick="bl();"/>
<input type="button" value="lan" onmouseover="cc();"/>
<input type="button" value="蓝色" onmouseout="bl();"/>
</body>
变色箱子变色字
<title>a</title>
<style>
.box{500px; height:150p; border:1px solid #990000;}
</style>
<script language="javascript">
function red(){
document.getElementById("mm").style.background="#ff0000";
}
function green(){
document.getElementById("mm").style.background="#00ff00";
}
function blue(){
document.getElementById("mm").style.background="#0000ff";
}
</script>
</head>
<body>
<div class="box" id="mm">
<input type="button" value="红色" onclick="red();"/>
<input type="button" value="红色" onclick="green();"/>
<input type="button" value="红色" onclick="blue();"/>
</div>
</body>
第九课：导航菜单（三级导航菜单）
原理：和二级导航菜单一样。
代码视图：
<div class="nav">
<ul>
<li>
<a href="#">广告学院</a>
<ul>
<li><a href="#">动态版面</a></li>
<li>
<a href="#">动态出版物</a>
<ul>
<li><a href="#">兼容处理</a></li>
<li><a href="#">图文混排</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">环艺学院</a></li>
<li><a href="#">动画学院</a></li>
</ul>
</div>
style.css样式文件
.nav{200px;height:500px;background:#ff0000;}
.nav ul li a{display:block;color:#000000;}
.nav ul li a:hover{color:#0000ff;}
.nav ul li ul{position:absolute;left:-999px;}
.nav ul li.showmenu1 ul{left:auto;}
.nav ul li ul li ul{position:absolute;left:-9999px;}
.nav ul li.showmenu1 ul li.showmenu2 ul{left:auto;}
第十课：竖向导航菜单的制作
网页脚本javascript/vbscript
脚本：嵌入在网页当中，前台执行交互动作
格式：<script language="javascript">
</script>
位置：在<head></head>之间写入,还可以写在<body></body>之间
常见鼠标操作事件：onclick鼠标点击事件 onmouseover鼠标经过 onmouseout鼠标离开
格式：onclick="名称();"
名称创建：命名：var k;
名称的调用：
function color()
{
document.bgColor="#ff0000";
}
function color1()
{
document.bgColor="#00ff00";
}
function color2()
{
document.bgColor="#0000ff";
}
调用div的方法getElementById("id名称"):获取div中的id名称
使用方法：<div id="menu"></div>
<input type="button" value="红色" onclick="color();" />
脚本端：
<script language="javascript">
function color()
{
document.getElementById("menu").style.background="#ff0000";
}
第十课：竖向导航菜单的制作