白舟工作室 » 设计布局 http://www.baizoo.cn ——长风破浪会有时 Mon, 30 Jan 2012 08:09:57 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 防图片太大撑破页面css http://www.baizoo.cn/archives/891.html http://www.baizoo.cn/archives/891.html#comments Sat, 09 Jan 2010 09:18:43 +0000 baizoo http://www.baizoo.cn/?p=891 这个在网页布局里很常见，网上看到有人用overflow:hidden来隐藏超出部分的图片，但那样图片就被截断了，不够完美。
用个简单的css max-width: 100%;可以解决这个问题，css代码如下：

img{
max-width: 100%;
height: auto;
vertical-align: middle;
}

不过max-width在IE6.0中是无效的，为了照顾到IE6.0，还是顺便把overflow:hidden加上比较好

]]> http://www.baizoo.cn/archives/891.html/feed 3 div自适应高度 http://www.baizoo.cn/archives/878.html http://www.baizoo.cn/archives/878.html#comments Fri, 01 Jan 2010 07:02:43 +0000 baizoo http://www.baizoo.cn/?p=878 朋友问一个div自适应高度的问题，其实我也好久没关注css了，但是朋友问起来，还是帮忙解决一下。我没怎么深入去研究，只是从pjblog的皮肤里提取了最外层的div框架就能得到这个div自适应高度的案例。贴出代码如下：
css


CSS布局

其他地方div自适应高度的问题，都可以以这段css作为参考。

]]> http://www.baizoo.cn/archives/878.html/feed 0 收藏一个找图标的网站 http://www.baizoo.cn/archives/875.html http://www.baizoo.cn/archives/875.html#comments Thu, 24 Dec 2009 20:23:37 +0000 baizoo http://www.baizoo.cn/?p=875 非常实用的一个网站，做logo时到上面找素材还是挺方便的。

iconfinder

地址：www.iconfinder.net

]]> http://www.baizoo.cn/archives/875.html/feed 2 记一个每段开头空两格的css http://www.baizoo.cn/archives/695.html http://www.baizoo.cn/archives/695.html#comments Thu, 22 Oct 2009 06:35:05 +0000 baizoo http://www.baizoo.cn/?p=695 每段开头空两格css

p{
text-indent: 2em;
}

]]> http://www.baizoo.cn/archives/695.html/feed 0 颜色快速采集器 http://www.baizoo.cn/archives/327.html http://www.baizoo.cn/archives/327.html#comments Wed, 23 Jul 2008 16:10:41 +0000 baizoo

还是同事们发的一个工具：颜色快速采集器，用它来取一些简单颜色还是挺方便的。

地址：http://www.baizoo.cn/tools/color.html

]]> http://www.baizoo.cn/archives/327.html/feed 4 Fireworks超质感按钮 http://www.baizoo.cn/archives/286.html http://www.baizoo.cn/archives/286.html#comments Thu, 03 Apr 2008 22:23:54 +0000 baizoo

闲着无聊，逛了经典论坛后跟着教程做的一个按钮效果。

教程原文：超酷质感按钮制作

]]> http://www.baizoo.cn/archives/286.html/feed 4 CSS 定义IMG样式解决页面被撑变形的问题 http://www.baizoo.cn/archives/254.html http://www.baizoo.cn/archives/254.html#comments Sat, 12 Jan 2008 14:16:20 +0000 baizoo 当网页中插入的过大的图片的时候,经常会撑破网页

JS是可以解决的,但是用CSS解决会比较简单点。

CSS代码如下：

CSS:

.entry img {
max-width: 520px;
width:e­xpression(width>520?”520px”:”width”);
}

另外记几个限制宽度的CSS样式

IE7以上 和 Firefox浏览器(限定宽度大于700小于1024)
min-width:700px;
max-width:1024px;

IE7以下
最小宽度为700
width:e­xpression( documentElement.clientWidth < 770 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 770 ? “770″ : “auto”) : “770px”) : “auto” );
最大宽度为1024
width:e­xpression( documentElement.clientWidth > 1024 ? (documentElement.clientWidth == 0 ? (body.clientWidth >1024 ? “1024″ : “auto”) : “1024px”) : “auto” );

限制高度和宽度都不大于400
width:e­xpression(onload=function(){if (this.offsetWidth>this.offsetHeight){this.style.width=(this.offsetWidth > 400)?”400px”:”auto”}{this.style.height=(this.offsetHeight < 400)?”auto”:”400px”}});

]]> http://www.baizoo.cn/archives/254.html/feed 2 仿站长站滑动门导航效果 http://www.baizoo.cn/archives/223.html http://www.baizoo.cn/archives/223.html#comments Tue, 27 Nov 2007 01:01:56 +0000 baizoo

搜了blueidea论坛之后才知道，这叫滑动门导航效果，顾名思义，就是鼠标滑动到导航链接处，可以无刷新显示下级菜单。

收藏一个韩国滑动门效果导航网站：http://www.priden.com/ 只是导航CSS效果不一样，实现原理都一样的，有空的时候模仿一个priden的效果。

这个效果在做cms模板时比较有用的。效果查看：chinaznav.html

程序代码 程序代码

<%@LANGUAGE=”VBSCRIPT” CODEPAGE=”936″%>
<!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=gb2312″ />
<title>滑动门导航实例</title>
<style type=”text/css”>
body{
    margin: 0; padding: 0;
    background: #fff ;
    font-family: Verdana, Geneva, Arial; font-size: 12px; color:#000;
    line-height: 15px;
}
#navbar{
    background: #f6f6f6 ;
    margin: 6px 0 0 0;
    width: 770px; color: #626262; height:30px; line-height: 28px;
}
#navbar ul{
}
#navbar li{    
    float: left;
    list-style-type: none;
    height: 28px;
    line-height: 28px;
    text-align: center;
    margin-right: 10px;
}
#navbar a{
    margin: 0px 2px 0 0;
    padding: 5px 9px 8px 10px;
    color: #626262;
    background: inherit;
    text-decoration: none;
}
#navbar a:hover{
    background-color: #33ADDB;
    border-top: 1px solid #2491BE;
    color: #FFFFFF;
}
#nav{width: 770px; background-color: #33ADDB; height:25px; line-height: 25px; color: Maroon;}
#nav a{
    margin: 0px 2px 0 0;
    padding: 5px 9px 5px 10px;
    color: #fff;
    text-decoration: none;
}
#nav a:hover{ text-decoration: underline;}
#nav ul{}
#nav li{ float:left; list-style-type:none; margin-right:10px;}
.hide{ display:none;}
</style>
<script language=”JavaScript” type=”text/javascript” >
<!–
/*
function hideNav(idName)
{
    document.getElementById(idName).className = ‘hide’;
}
function showNav(idName)
{
    document.getElementById(idName).className = ‘show’;
}
*/
//–>
function showCurrentDiv(num)
{
    var divNum = document.getElementById(‘nav’).getElementsByTagName(‘div’);
    for (var i=0;i<divNum.length ;i++ )
    {  
        divNum[i].style.display = ‘none’;
    }
    divNum[num].style.display = ‘block’;
}
</script>
</head>

<body>
<center>
    <div id=”navbar”>
        <ul>
            <li><a href=”#”onmousemove=”showCurrentDiv(0)” >网站首页</a></li>
            <li><a href=”#”onmousemove=”showCurrentDiv(1)”>个人求职</a></li>
            <li><a href=”#”onmousemove=”showCurrentDiv(2)”>企业招聘</a></li>
        </ul>
    </div>
    <div id=”nav”>
        <div class=”hide”>这是首页</div>
        <div class=”hide”>
            <ul>
            <li><a href=”#”>求职一</a></li>
            <li><a href=”#”>求职二</a></li>
            <li><a href=”#”>求职三</a></li>
            </ul>            
        </div>
        <div class=”hide”>
            <ul>
            <li><a href=”#”>招聘一</a></li>
            <li><a href=”#”>招聘二</a></li>
            <li><a href=”#”>招聘三</a></li>
            </ul>
        </div>
    </div>
</center>
</body>
</html>

]]> http://www.baizoo.cn/archives/223.html/feed 0 CCS实现仿淘宝无刷新导航切换效果 http://www.baizoo.cn/archives/222.html http://www.baizoo.cn/archives/222.html#comments Tue, 27 Nov 2007 00:28:02 +0000 baizoo

比较炫的仿淘宝导航切换效果，在博客里收藏共享，做皮肤的时候可以参考。

查看页面：taobaonav.html

程序代码 程序代码

<!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=gb2312″ />
<title>无标题文档</title>
<style type=”text/css”>
<!–
* {
    margin: 0; padding:0
}
body {
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    text-align: center;
    height: auto;
    width: auto;
    background-color: #666666;
    font-size: 12px;
    color: #000000;
}
#container {
    text-align: left;
    width: 760px;
    height: 400px;
    background-color: #FFFFFF;
    padding: 20px;
}
#container #title {
    height: 28px;
}
#container #title li {
    float: left;
    list-style-type: none;
    height: 28px;
    line-height: 28px;
    text-align: center;
    margin-right: 1px;
}
#container #title ul {
    background-color: #FFFFFF;
    height: 28px;
}
#container #title a {
    text-decoration: none;
    color: #000000;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -29px;
}
#container #title a span{
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -29px;
    padding: 0 15px 0 15px;
}
#container #title #tag1 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -87px;
    padding: 0 15px 0 15px;
}
#container #title #tag2 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right 0px;
    padding: 0 15px 0 15px;    
}
#container #title #tag3 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -58px;
    padding: 0 15px 0 15px;    
}
#container #title #tag4 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -145px;
    padding: 0 15px 0 15px;
}
#container #title #tag5 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -174px;
    padding: 0 15px 0 15px;
}
#container #title #tag6 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -203px;
}
#container #title #tag6 a:hover span{
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -203px;
    padding: 0 15px 0 15px;
}
#container #title #tag7 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -232px;
}
#container #title #tag7 a:hover span{
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -232px;
    padding: 0 15px 0 15px;
}
#container #title #tag8 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -261px;
}
#container #title #tag8 a:hover span{
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -261px;
    padding: 0 15px 0 15px;
}
#container #title .selectli1 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -87px;
}
#container #title a .selectspan1 {
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -87px;
    padding: 0 15px 0 15px;
}
#container #title .selectli2 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left 0px;
}
#container #title a .selectspan2 {
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right 0px;
    padding: 0 15px 0 15px;
}
#container #title .selectli3 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -58px;
}
#container #title a .selectspan3 {
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -58px;
    padding: 0 15px 0 15px;
}
#container #title .selectli4 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -145px;
}
#container #title a .selectspan4 {
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -145px;
    padding: 0 15px 0 15px;
}
#container #title .selectli5 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -174px;
}
#container #title a .selectspan5 {
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -174px;
    padding: 0 15px 0 15px;
}
#container #title .selectli6 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -203px;
}
#container #title a .selectspan6 {
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -203px;
    padding: 0 15px 0 15px;
}
#container #title .selectli7 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -232px;
}
#container #title a .selectspan7 {
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -232px;
    padding: 0 15px 0 15px;
}
#container #title .selectli8 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif”) no-repeat left -261px;
}
#container #title a .selectspan8 {
    display: block;
    background: url(“http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif”) no-repeat right -261px;
    padding: 0 15px 0 15px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
    height: 300px;
    padding: 10px;
}
.content1 {
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #3A81C8;
    border-right-color: #3A81C8;
    border-bottom-color: #3A81C8;
    border-left-color: #3A81C8;
    background-color: #DFEBF7;
}
.content2 {
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #ff950b;
    border-right-color: #ff950b;
    border-bottom-color: #ff950b;
    border-left-color: #ff950b;
    background-color: #FFECD2;
}
.content3 {
    height: 300px;
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #FE74B8;
    border-right-color: #FE74B8;
    border-bottom-color: #FE74B8;
    border-left-color: #FE74B8;
    background-color: #FFECF5;
}
.content4 {
    height: 300px;
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #00988B;
    border-right-color: #00988B;
    border-bottom-color: #00988B;
    border-left-color: #00988B;
    background-color: #E8FFFD;
}
.content5 {
    height: 300px;
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #A8BC1F;
    border-right-color: #A8BC1F;
    border-bottom-color: #A8BC1F;
    border-left-color: #A8BC1F;
    background-color: #F7FAE2;
}
.content6 {
    height: 300px;
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #DD5A31;
    border-right-color: #DD5A31;
    border-bottom-color: #DD5A31;
    border-left-color: #DD5A31;
    background-color: #E7A996;
}
.content7 {
    height: 300px;
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #B65E5D;
    border-right-color: #B65E5D;
    border-bottom-color: #B65E5D;
    border-left-color: #B65E5D;
    background-color: #C29A99;
}
.content8 {
    height: 300px;
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #B67BD8;
    border-right-color: #B67BD8;
    border-bottom-color: #B67BD8;
    border-left-color: #B67BD8;
    background-color: #E8C4FF;
}
.hidecontent {display:none;}
–>
</style>
<script language=”javascript”>
function switchTag(tag,content)
{
//    alert(tag);
//    alert(content);
    for(i=1; i <9; i++)
    {
        if (“tag”+i==tag)
        {
            document.getElementById(tag).getElementsByTagName(“a”)[0].className=”selectli”+i;
            document.getElementById(tag).getElementsByTagName(“a”)[0].getElementsByTagName(“span”)[0].className=”selectspan”+i;
        }else{
            document.getElementById(“tag”+i).getElementsByTagName(“a”)[0].className=”";
            document.getElementById(“tag”+i).getElementsByTagName(“a”)[0].getElementsByTagName(“span”)[0].className=”";
        }
        if (“content”+i==content)
        {
            document.getElementById(content).className=”";
        }else{
            document.getElementById(“content”+i).className=”hidecontent”;
        }
        document.getElementById(“content”).className=content;
    }
}
</script>
</head>
<body>
<table width=”950″ border=”0″ align=”center”>
  <tr>
    <td height=”94″ colspan=”3″><div id=”container”>
  <div id=”title”>
    <ul>
      <li id=”tag1″><a href=”#” onclick=”switchTag(‘tag1′,’content1′);this.blur();” class=”selectli1″><span class=”selectspan1″>首页</span></a></li>
      <li id=”tag2″><a href=”#” onclick=”switchTag(‘tag2′,’content2′);this.blur();”><span>产品介绍</span></a></li>
      <li id=”tag3″><a href=”#” onclick=”switchTag(‘tag3′,’content3′);this.blur();”><span>连锁加盟</span></a></li>
      <li id=”tag4″><a href=”#” onclick=”switchTag(‘tag4′,’content4′);this.blur();”><span>CCSOS常识</span></a></li>
      <li id=”tag5″><a href=”#” onclick=”switchTag(‘tag5′,’content5′);this.blur();”><span>培训资讯</span></a></li>
      <li id=”tag6″><a href=”#” onclick=”switchTag(‘tag6′,’content6′);this.blur();”><span>长沙旗舰馆</span></a></li>
      <li id=”tag7″><a href=”#” onclick=”switchTag(‘tag7′,’content7′);this.blur();”><span>提问区</span></a></li>
      <li id=”tag8″><a href=”#” onclick=”switchTag(‘tag8′,’content8′);this.blur();”><span>联系我们</span></a></li>
    </ul>
  </div>
<div id=”content” class=”content1″>
  <div id=”content1″><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div>    
  <div id=”content2″ class=”hidecontent”>2、不同的项目使用不同的颜色来区分</div>
  <div id=”content3″ class=”hidecontent”>3、这回需要使用到js了，呵呵</div>
  <div id=”content4″ class=”hidecontent”>4、背景图片只需要两个图片文件就足够，减少服务器负担</div>
  <div id=”content5″ class=”hidecontent”>5、这是使用到的两个图片：
         <table width=”58%” border=”1″ cellspacing=”2″ cellpadding=”0″>
           <tr>
             <td width=”70%” align=”center”><img src=”http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif” width=”250″ height=”290″ /></td>
             <td width=”30%” align=”center”><img src=”http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif” width=”15″ height=”290″ /></td>
           </tr>
         </table>
  </div>
<div id=”content6″ class=”hidecontent”>6.不是什么地方用ajax都合适的！</div>
<div id=”content7″ class=”hidecontent”>7.该刷新的地方还是要刷新！</div>
<div id=”content8″ class=”hidecontent”>8.刷新用cookie保存还是很不方便的！！！！！！！！ </div>
</div>  
</div></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>
]]> http://www.baizoo.cn/archives/222.html/feed 0 Div中class与id的区别及应用 http://www.baizoo.cn/archives/175.html http://www.baizoo.cn/archives/175.html#comments Sun, 23 Sep 2007 19:19:30 +0000 baizoo class是设置标签的类。

id是设置标签的标识。

class属性用于指定元素属于何种样式的类。

如样式表可以加入：

.baobao { color: lime; background: #ff80c0 }

使用方法：class=”baobao”

id属性用于定义一个元素的独特的样式。如一个CSS规则：

#binbin { font-size: larger }

使用方法：id=”binbin”

id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；

class是一个样式，可以套在任何结构和内容上，就象一件衣服；


概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事线，你可以通过CSS，javascript等来使用这个类。因此你可以在一个页面上使用class=”Frodo” ，class= “Gandalf”， class=”Aragorn”来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。

至于 ID，通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头< masthead>，一个内容区域和一个页脚等组成），一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。

归纳成一句话就是：Class可以反复使用,而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。

在实际应用的时候，Class可能对文字的排版等比较有用，而ID则对宏观布局和设计放置各种元素较有用。

]]> http://www.baizoo.cn/archives/175.html/feed 0