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{width: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{width: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;)
三角形的制作方法:需要使用到的属性和值有width: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{width: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;width: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;width: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;width: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;width: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{width: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{width: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";
}
第十课:竖向导航菜单的制作