年无分老少,事无分难易,但行之有恒,恒之,何三起,五眠 注册 | 登陆
浏览模式: 标准 | 列表分类:网页设计

CSS兼容IE与Firefox要点分析

Submitted by 小僧 on 2007, April 19, 4:28 PM

IE vs FF
CSS 兼容要点：

DOCTYPE 影响 CSS 处理

FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

» 阅读全文

网页设计 | 评论:0 | Trackbacks:0 | 阅读:1447

WEB2.0 圆形边框 div 使用 c...

Submitted by 小僧 on 2007, April 19, 4:25 PM


代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml...
<html xmlns="http://www.w3.org/1999/xht...


<head>
<title>WEB2.0 圆形边框 div 使用 css 做法</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="robots" content="all" />
<meta name="author" content="lybykw | blog.tsgcn.com" />
<meta name="Copyright" content="Copyright (c) 2000-2007 blog.tsgcn.com" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<meta name="description" content="网页制作" />
<meta name="keywords" content="展望理想,中国网站资源,刘月波,制作,波波工作室,天翼数码,网站制作,Falsh,下载,成都,多媒体制作,asp,jsp,php,sql,mssql,mysql,酷网站,图标,音乐,mp3" />

<link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />
<script type="text/javascript" src="/public/js/main.js"></script>

<style type="text/css">
<!--
/* WEB2.0 圆形边框 div 使用 css 做法 V1.0 for blog.tsgcn.com Admin Lybykw 2007年02月09日 星期五 10:46:45*/
.wos {width:550px;margin:0px auto;}
.toelws {border:0px solid #BFD2FB;background:#F4F7FE;padding:0px;}
.toelws .te .te1,.toelws .te .te2,.toelws .bt .bt1,.toelws .bt .bt2
{width:11px;height:11px;overflow:hidden;font-size:1px;background:url("http://blog.tsgcn.com/skin... no-repeat;border:0px solid;}
.toelws .te {clear:both;}
.toelws .te .te1 {float:left;background-position:0 0;}
.toelws .te .te2 {float:right;background-position:-11px 0;}
.toelws .te .te3 {float:left;width:528px;border-top:1px solid #BFD2FB;font-size:1px;}
.toelws .bt {clear:both;}
.toelws .bt .bt1 {float:left;background-position:-0px -11px;}
.toelws .bt .bt2 {float:right;background-position:-11px -11px;}
.toelws .bt .bt3 {float:left;width:528px;border-bottom:1px solid #BFD2FB;height:10px;font-size:1px;background:#F4F7FE;}
.content {padding:15px;font:11px verdana;border-left:1px solid #BFD2FB;border-right:1px solid #BFD2FB;}

.t234 {border:0px solid red;}

-->
</style>

<script language="javascript">
<!--

//-->
</script>

</head>
<body>

<div class="wos">
<div class="toelws">
 <div class="te"><div class="te1"></div><div class="te3"></div><div class="te2"></div></div>
  <div class="content">
   <div class="t234">The MSDN Library What's New page contains a comprehensive list of all new and
revised content for the July 2001 release. Continue reading this page for
highlights of new content in the Library.<br>
<br>
Microsoft Office XP Developer Documentation<br>
<br>
This Library release contains all the information professional developers need
to build and deploy applications and business solutions for Microsoft Office.
Microsoft Office XP Developer provides a complete set of developer tools,
documentation, and sample code for quickly creating custom applications with
Office and other Microsoft Visual Basic for Applications杄nabled programs. <br>
<br>
MapPoint 2002<br>
<br>
Microsoft MapPoint 2002 brings powerful mapping and analysis features to your
desktop. Use MapPoint 2002 to quickly find geographic locations, visually
analyze your business data, and create, customize, and integrate maps into
Office documents. <br>
<br>
Office XP Documents<br></div>


  </div>
 <div class="bt"><div class="bt1"></div><div class="bt3"></div><div class="bt2"></div></div>
</div>
</div>


</body>
</html>

网页设计 | 评论:0 | Trackbacks:0 | 阅读:1688

仿网易163首页鼠标滑动效

Submitted by 小僧 on 2007, March 23, 3:32 PM


代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml...
<html xmlns="http://www.w3.org/1999/xht...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS仿网易的滑动门技术AJAX</title>
<style type="text/css">
<!--
#header {
background-color: #F8F4EF;
height: 200px;
width: 400px;
margin: 0px;
padding: 0px;
border: 1px solid #ECE1D5;
font-family: "宋体";
font-size: 12px;
}
#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
display: block;
width: 100px;
text-align: center;
float: left;
margin: 0px;
padding-top: 0.2em;
padding-right: 0px;
padding-bottom: 0.2em;
padding-left: 0px;
cursor: hand;
}
.sec1 { background-color: #FFFFCC;}
.sec2 { background-color: #00CCFF;}
.block { display: block;}
.unblock { display: none;}
-->
</style>
</head>
<body>
<script language=javascript>
function secBoard(n)

{

for(i=0;i<menu.childNodes.length;i++)
menu.childNodes[i].className="sec1";
menu.childNodes[n].className="sec2";

for(i=0;i<main.childNodes.length;i++)
main.childNodes[i].style.display="none";
main.childNodes[n].style.display="block";

}
</script>
<div id="header">
 <ul id="menu">
   <li onMouseOver="secBoard(0)" class="sec2">最新新闻</li>
   <li onMouseOver="secBoard(1)" class="sec1">最新文章</li>
   <li onMouseOver="secBoard(2)" class="sec1">最新日志</li>
   <li onMouseOver="secBoard(3)" class="sec1">论坛新帖</li>
 </ul>
 <!--内容显示区域-->
 <ul id="main">
   <li class="block">第一个内容</li>
   <li class="unblock">第二个内容</li>
   <li class="unblock">第三个内容</li>
   <li class="unblock">第四个内容</li>
 </ul>
 <!--内容显示区域-->
</div>
</body>
</html>

转:http://www.itdowns.com/edu...

网页设计 | 评论:0 | Trackbacks:0 | 阅读:1821

无法拦截与屏蔽的网页漂浮图片广告代码

Submitted by 小僧 on 2007, March 23, 3:25 PM

代码:
<script type="text/javascript">
var imagepath="/andy.jpg"
var imagewidth=198 //这两行写图片的大小
var imageheight=158
var speed=2;
var imageclick="/andy.php" //这里写点击图片连接到的地址
var hideafter=0
var isie=0;
if(window.navigator.appName=="Microsoft Internet Explorer"&&window.navigator.appVersion.substring(window.navigator.appVersion.indexOf("MSIE")+5,window.navigator.appVersion.indexOf("MSIE")+8)>=5.5) {
isie=1;
}
else {
isie=0;
}
if(isie){
var preloadit=new Image()
preloadit.src=imagepath
}
function pop() {
if(isie) {
x=x+dx;y=y+dy;
oPopup.show(x, y, imagewidth, imageheight);
if(x+imagewidth+5>screen.width) dx=-dx;
if(y+imageheight+5>screen.height) dy=-dy;
if(x<0) dx=-dx;
if(y<0) dy=-dy;
startani=setTimeout("pop();",50);
}
}
function dismisspopup(){
clearTimeout(startani)
oPopup.hide()
}
function dowhat(){
if (imageclick=="dismiss")
dismisspopup()
else
window.open(imageclick);
}
if(isie) {
var x=0,y=0,dx=speed,dy=speed;
var oPopup = window.createPopup();
var oPopupBody = oPopup.document.body;
oPopupBody.style.cursor="hand"
oPopupBody.innerHTML = '<IMG SRC="'+preloadit.src+'">';
oPopup.document.body.onmouseover=new Function("clearTimeout(startani)")
oPopup.document.body.onmouseout=pop
oPopup.document.body.onclick=dowhat
pop();
if (hideafter>0)
setTimeout("dismisspopup()",hideafter*1000)
}
</script>

网页设计 | 评论:0 | Trackbacks:0 | 阅读:1936

Records:151234›