DIV总结

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结构

代码：

</div>

</div>

</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>

</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>

</dl>

动态站：使用方法；代码视图：

<ul>

</ul>

注：li设置float:left;

4)图文绕排:左边图片，右侧段落文字

代码视图：

注：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 style="clear:both;"></div> /*不设宽高*/

</div>

.main{1002px; height:auto !important; height:xxxpx; min-height:100px;}

2。文件框标记:<fieldset></fieldset> 文件框标题：<legend></legend>

代码视图的格式：

</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;

代码视图：

</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;

注：背景位置：向左采用负值，向右采用正值，向下采用正值，向上采用负值。

操作流程：代码视图

<ul>

</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)宽度自适应滑动门

格式：设置固定高度，宽度不给值

代码视图：

<ul>

</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;

代码视图：

<ul>

<li>

<ul>

</ul>

</li>

</ul>

</div>

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中调用

常见的鼠标事件

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>
变色箱子变色字
<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>

第九课：导航菜单（三级导航菜单）

原理：和二级导航菜单一样。

代码视图：

<ul>

<li>

<ul>

<li>

<a href="#">动态出版物</a>

<ul>

</ul>

</li>

</ul>

</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>

脚本端：

function color()

{

document.getElementById("menu").style.background="#ff0000";

}

第十课：竖向导航菜单的制作