白舟空间

当网页中插入的过大的图片的时候,经常会撑破网页

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

CSS代码如下：

CSS:

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

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

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

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

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

设计布局

仿站长站滑动门导航效果

November 27th, 2007

No comments 390 views

搜了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>

设计布局

CCS实现仿淘宝无刷新导航切换效果

November 27th, 2007

No comments 385 views

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

查看页面：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>

设计布局

Div中class与id的区别及应用

September 23rd, 2007

No comments 261 views

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则对宏观布局和设计放置各种元素较有用。