今天主要内容：
时间自己安排好。注意劳逸结合。
如何快速图片，IETEST
定位、超级链接的使用以及常见的BUG,DW的其他特效（娱乐，不推荐使用）
一，定位：
相对和绝对定位。
left,right,top,bottom的使用
z-index什么时候能用？当position 为相对或者绝对定位时能用。
二，超级链接的使用
1，爱恨规则
2，给A设置宽高背景颜横向或者纵向显示。
3，大量的普通按钮（文字右下移动）--见PPT
思考，margin-bottom 距离失效？？
4，表格改变行或单元格的背景图片或者颜（经过变）
5，改变INPUT的背景颜（经过变）
6，问答显示与隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<!--[if IE 6]>
<style>
body {behavior: url("csshover3.htc");}
</style>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<style>
div{ width:500px; height:100px; background-color:#060; margin:5px; color:#FFF;}
.one{ cursor:pointer; background-color:#0CC;}
</style>
<script>
function check(i){
var mz="a"+i;
var ElementById(mz);
if(mz.style.display=="none"){
mz.style.display="block";
}else{
mz.style.display="none";
}
}
</script>
<div class="one" onclick="return check(1);">问题：为什么1？</div>
<div id="a1">这里是答案1</div>
<div class="one" onclick="return check(2);">问题：为什么2？</div>
<div id="a2">这里是答案2</div>
<div class="one" onclick="return check(3);">问题：为什么3？</div>
<div id="a3">这里是答案3</div>
<div class="one" onclick="return check(4);">问题：为什么4？</div>
<div id="a4">这里是答案4</div>
</body>
</html>
7，下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<!--[if IE 6]>
<style>
body {behavior: url("csshover3.htc");}
</style>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<style>
.nav{ background-color:#369; height:50px;}
html图片展示特效a{ color:#FFF; text-decoration:none;}
ul,li{ margin:0; padding:0; list-style:none;}
.nav .da li{ width:200px; float:left; margin-left:30px; line-height:50px; position:relative;}
.nav .da li .xiao{ display:none; position:absolute; background-color:#F9F;}
.nav .da li:hover .xiao{ display:block;}
</style>
<div class="nav">
<ul class="da">
<li><a href="#">网站首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">产品展示</a>
<ul class="xiao">
<li><a href="#">小类一</a></li>
<li><a href="#">小类二</a></li
>
</ul>
</li>
<li><a href="#"></a></li>
</ul>
</div>
</body>
</html>
8，TAB切换
9，连接上显示小手鼠标
cursor:pointer;
10，判断浏览器
<!--[if IE 6]>
<style>
body {behavior: url("csshover3.htc");}
</style>
<![endif]-->
三，常见BUG
1，DIV等块的高度（小于20PX） 加font-size解决
2，图片的底部5个像素BUG（直接在DIV插入图片看效果）最好设置img{ display:block;}
3，文字与Input垂直居中对齐 图片与文字对齐
vertical-align:middle;  一般给input和图片、表格设置
4，注意：有float的不要使用margin和padding。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。