滑动图片展示效果(js+css)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.zishu.cn</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font-family:Verdana; font-size:12px; line-height:1.8; margin:50px;}
img{ border:0; display:block;vertical-align:middle}
#imgBox{border-right:1px solid #3B8C54; border-bottom:1px solid #3B8C54; background:#84B726; padding:5px;}
#imgBox div{width:700px; background:#B5DF63; border:1px solid #DAEFB1; border-top:1px solid #6D9720; border-left:1px solid #6D9720; overflow:hidden}
#imgBox,#imgBox ul,#imgBox li{ float:left;}
#imgBox ul{ width:4100px;}
#imgBox a{ padding:6px; display:block; background:#fff; margin:10px; border:1px solid #A5D845; text-align:center; text-decoration:none}
#imgBox span{ display:block; background:#FFFF99; border-top:1px solid #FFFFFF}
#imgBox a:hover{ border:1px solid #84B726; border-left:1px solid #fff; border-top:1px solid #fff; background:#95CC2D;}
#imgBox a:hover span{ background:#000; color:#fff}
</style>
</head>
<body>
<div id="imgBox">
<ul>
<li><a href="http://www.zishu.cn"><img alt="this is 001" src="http://www.zishu.cn/attachments/month_0902/1.gif" /></a></li>
<li><a href="http://www.zishu.cn"><img alt="this is 002" src="http://www.zishu.cn/attachments/month_0902/2.gif" /></a></li>
<li><a href="http://www.zishu.cn"><img alt="this is 003" src="http://www.zishu.cn/attachments/month_0902/3.gif" /></a></li>
<li><a href="http://www.zishu.cn"><img alt="this is 004" src="http://www.zishu.cn/attachments/month_0902/4.gif" /></a></li>
<li><a href="http://www.zishu.cn"&g
相关文档:
写了一个表单,在使用css时发现了一些问题。
1、定义label的style不起作用,例如,我在css中定义了一个
<mce:style type="text/css"><!--
label
{
font-size:large;
}
--></mce:style><style type="text/css" ......
图片自动适应大小的问题在平时制作的时候是比较常见的问题,下面提供一个比较简单的解决方法:
div img {
max-width:600px;
//IE7、FF等其他非IE浏览器下最大宽度为600px;
width:600px;
//所有浏览器中图片的大小为600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
//当图片大小大于6 ......
IE6、IE7、IE8、Firefox、Opera CSS hack区分
针对样式名
如果只让ie6看见用*html .head{color:#000;}
如果只让ie7看见用*+html .head{color:#000;}
如果只让ff看见用:root body .head{color:#000;}
如果只让ff、IE8看见用html>/**/body .head{color:#000;}
如果只是不让ie6看见用html>body .head{color:#000;} ......
1.document.formName.item("itemName") 问题
说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];
Firefox下,只能使用document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].
2.集合类对象问题
说明:
IE下,可以 ......