2005 05月 - - WEB标准网站设计心得 - Dodo’s Blog @ DoNews.com

2005年05月31日

豆腐做了一个新的模板,我改了一点点.

还是选系统的Lighty

然后再自定义CSS加入以下代码:

body, html {
    background: url(http://www.donews.net/images/www_donews_net/dodo/54776/o_wowbg.jpg) #000000 center top;
    color: #787878;
    font-family:ms shell dlg;
    font-size:12px;
    margin: 0;
    line-height:150%;padding:0px
}
#nadframe{display:none}
form{
magrin:0;
font-size:14px;
padding:0px
}

.pagelayout{
    margin: auto;
    padding:0px 0px 0px 0px;
    width: 100%;
    font-size:14px;
}
a:visited, a:active, a:link {
    color : #70472A;
    text-decoration : none;
}

a:hover {
    color: #999966;
}

blockquote {
    font-style : italic;
}

#header {
text-align:center;
color:#000000;
font-size:12px;
font-family:ms shell dlg;
padding-top:0px;
padding-right:20px;
height:150px ;
background: url(http://www.donews.net/images/www_donews_net/dodo/54776/o_wowhead.jpg) #000000 no-repeat center top;
border-bottom: 0px solid #E4E5E5;
}
#header span{float:left;padding-top:38px;text-align:center;width:100%;}
#header #Header1_HeaderTitle{
    color: #000000;
    font-size:14px;font-family:arial;line-height:120%;font-weight:bold;color:#FABB0B
}
#main {
   float:left;padding: 10px 0px 0px 25px;width:65%;font-size:14px;line-height:160%;color:#333333;word-wrap:break-word;
}
#footer{clear:both;text-align:center;font-size:12px;width:100%;
    height:100px;
    padding-top:60px;margin:0px;
    background: url(http://www.donews.net/images/www_donews_net/dodo/54776/o_wowbg_foot.jpg) #000000 no-repeat;
}

#menu {clear:both;padding:0;
    float:left;
    width:250px;
    padding-top:10px;
    word-wrap:break-word;
    border-right:1px dotted #c0c0c0;
}

#menu h1 {
    color:#E3D8B7;
    padding:8px 0px 0px 18px;
    font-size: 14px;
    font-weight: bold;
    margin: 0px 0px 15px 60px;
    height:30px;
    background:url(http://www.donews.net/images/www_donews_net/dodo/54776/o_wowmenu_bg_blue.jpg) no-repeat;
}

#menu h3 {
    color:#E3D8B7;
    padding:8px 0px 0px 18px;
    font-size: 14px;
    font-weight: bold;
    margin: 0px 0px 15px 60px;
    height:30px;
    background:url(http://www.donews.net/images/www_donews_net/dodo/54776/o_wowmenu_bg_red.jpg) no-repeat;
}
#menu ul {
    list-style: none;
    padding: 0px;
    margin: 0px 0px 15px 60px;
    font-size: 12px;

}
#comments{font-size:12px;line-height:150%}
#comments a{font-weight:bold}
.postTitle{font-weight:bold;background:url(http://www.donews.net/images/www_donews_net/dodo/54776/o_wowwhite_icon_ball.gif) no-repeat;padding-left:20px}
.postTitle a,.postTitle a:link,.postTitle a:visited{color:#999966;font-size:14px}
div,select,input{font-size:12px;word-wrap:break-word;}
div.block {
background-image: url(images/main_background.gif);
background-position: top left;
background-repeat: repeat-y;
font-size: 12px;
text-align: justify;
}

div.block_footer {
background-image: url(images/day_footer.gif);
background-position: top left;
background-repeat: no-repeat;
height: 67px;
}

div.post {
padding-left: 0px;
}
.dateTitle{padding-left:0px;font-size:12PX;color:#454545;line-height:150%;font-weight:bold}
div.posttitle {
color: #73AF1D;
    font-family: "ms shell dlg";
    font-size: 14px;
    font-weight: bold;
}
div.postText{line-height:150%;}
.posttitle a:visited, .posttitle a:active, .posttitle a:link {
    color:#999966;
    text-decoration : none;
    padding:2px;
}

.posttitle a:hover {
    color: #999966;
    text-decoration : none;padding:3px;
    border-bottom:1px dotted #999966;
}
.postFoot{line-height:120%;border-bottom:1px dotted #808080;font-size:12px;}
div.itemdesc {
color: #808080;
font-size: 12px;
    text-transform: uppercase;
}

div.seperator {

background-position: top left;
background-repeat: no-repeat;
margin: 15px 0px 10px 0px;
}

div.entrylistitem {
padding-left: 20px;
padding-bottom: 10px;
}

a.entrylisttitle, a.entrylisttitle:visited, a.entrylisttitle:link, a.entrylisttitle:active {
color: #FF6600;
    font-size: 14px;
    font-weight: bold;
}

div.moreinfo {
font-size: 12px;
text-align: justify;
}

div.moreinfotitle {
    color: #FF2a00;
    font-size: 12px;
    font-weight: bold;
}

div.comments {
font-size: 12px
}

div.comment {
    background-color: #FBFBFB;font-size:12px;
border: 0px dotted #DDDDDD;
margin: 10px 0px 10px 0px;
padding: 10px;
}

div.comment_author {
margin: 5px 0px 5px 0px;font-size:12px;
}

div.comment_content {
margin: 5px 0px 5px 0px;font-size:12px;
}

#postcomment {
    border: 0px solid #DDDDDD;
    background-color: #FBFBFB;
font-size: 12px;
padding: 10px;
text-align: justify;
margin-top: 15px;
width: 435px;
}

#postcomment div {
    color: #808080;
font-size: 12px;
    font-weight: bold;
margin: 5px 0px 5px 0px;
}

#postcomment input.text, textarea {
border: 1px solid #DDDDDD;
font-size: 12px;
}

input.text {
    width : 300px;
}

textarea {
    width : 300px;
    height : 200px;
}

#relatedlinks ul {
    list-style : none;
    margin-left : 10px;
    padding : 0px;
}

span.highlight
{
    background-color:Yellow;
}
.block_title{font-size:14px;font-weight:bold}
.code{float:left;width:80%;padding:10px;border:1px dotted #d9d9d9;background:#f4f4f4;}
.postFoot{clear:both;padding-top:6px}
br{clear:both;}

归类于： BlogSkin — dodo @ 7:44 pm 评论(10)

2005年05月30日

我喜欢DoNews新办公室

周日下午去了DoNews的新办公室.
之前看有牛友的BLOG说办公室内不穿鞋子,于是头一天晚上,洗脚特别仔细,以免嗅觉污染,影响到他人.
进到屋子里面,首先是大桌子,类似会议室,估计每次的编辑会议就是在这里开的.
直走进去是刘韧的办公室,一张大班台.一套沙发,我终于坐上了传说中的沙发,软软的,还有小机关可以弹出一个架脚的,坐在上面,2脚一架,喝着很特别的竹叶青(是茶叶,不是酒),惬意,小资不过如此.
外间是KESO的办公室,人没在,我1:40到的,据说他还在网上,还没睡觉,还没睡28号的觉,他办公室里最引人注目的是桌上一个烟灰缸,(KESO是刘韧特许可以在办公室吸烟,哈)
PS:
1.沙发一定要坐
2.脚一定要洗干净,一定别穿漏脚趾头的袜子,因为你坐在沙发架着腿的时候,双脚最显眼
3.竹叶青的茶一定要喝

归类于： 7788 — dodo @ 1:03 am 评论(13)

2005年05月25日

怎样在Donews Blog里面加入在线运行代码演示

这个是我写了一个JS处理的,能在线运行演示代码.这样的话,直观一点.令狐葱同学说SHARE一下,那就SHARE一下

JS代码:

<script language="javascript" type="text/javascript">
function rundemo(k){
var democode=document.getElementById(k).value
var demowin=window.open()

demowin.document.open();
demowin.document.write(democode)
demowin.document.close();
}
</script>

1.将这段代码放在公告栏里面,这样发文章的时候不用每次都引用
2,在发文章的时候,切换到"代码"编辑模式下,加入下面代码:

<textarea style="padding: 8px; width: 80%; height: 400px; font-size: 14px; line-height: 150%;" id="navmenu">

</textarea>

中间放置你的演示代码,.ID="navmenu"里面的navmenu你自己可以设置,不过要和下一步的ID对应一致

3.加入点击"运行演示"的连接,这个也要在代码模式下插入编辑
<a href="javascript:rundemo(‘navmenu’)" style="color: rgb(255, 102, 0); font-weight: bold;">在线运行演示</a>

run(‘navmenu’)中的navmenu要和上面对应,建议每次用不一样的ID.这样是为了避免在首页每篇文章都完全显示的时候,如果有多篇有运行演示的代码.ID重复

归类于： BlogSkin — dodo @ 11:10 pm 评论(8)

符合WEB标准的下拉导航菜单例子之一

阿捷(www.w3cn.org)发给我的,不错的东西
代码如下:

在线运行演示

<!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> <!– *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 180px; position: absolute; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } –> </style> <script type=text/javascript><!–//–><![CDATA[//><!-- function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; //–><!]]></script> </head> <body> <ul id="nav"> <li><a href="#">产品介绍</a> <ul> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> </ul> </li> <li><a href="#">服务介绍</a> <ul> <li><a href="#">服务二</a></li> <li><a href="#">服务二</a></li> <li><a href="#">服务二</a></li> <li><a href="#">服务二服务二</a></li> <li><a href="#">服务二服务二服务二</a></li> <li><a href="#">服务二</a></li> </ul> </li> <li><a href="#">成功案例</a> <ul> <li><a href="#">案例三</a></li> <li><a href="#">案例</a></li> <li><a href="#">案例三案例三</a></li> <li><a href="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#">关于我们</a> <ul> <li><a href="#">我们四</a></li> <li><a href="#">我们四</a></li> <li><a href="#">我们四</a></li> <li><a href="#">我们四111</a></li> </ul> </li> <li><a href="#">在线演示</a> <ul> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#">联系我们</a> <ul> <li><a href="#">联系联系联系联系联系</a></li> <li><a href="#">联系联系联系</a></li> <li><a href="#">联系</a></li> <li><a href="#">联系联系</a></li> <li><a href="#">联系联系</a></li> <li><a href="#">联系联系联系</a></li> <li><a href="#">联系联系联系</a></li> </ul> </li> </ul> </body> </html>

归类于： Web标准 — dodo @ 4:56 pm 评论(12)

2005年05月24日

怎样在Donews Blog里面加入GOOGLE的站内搜索

kenton留言说想在Donews Blog上加一个GOOGLE的站内搜索
我看了一下源码，页面body后面紧跟了一个form.所以如果直接加GOOGLE的代码的话，是FORM里面嵌套FORM，起不了作用。我用JS处理了一下，先分成了3个FORM，然后在最后一个留言提交的Form，用JS去获得第一个FORM 的ACTION。测试了一下，留言和站内检索都可以，不过也许还会有其他的问题

小宇发邮件来说在OPERA下页面乱了。我看了一下代码，是加了GOOGLE搜索以后导致的，OPERA对标签识别可能是按<a></a>这样的形式严格解释，IE和FF容错好一点。我写的这个GOOGLE站内搜索是打补丁形式来处理，页面标签结构控制不了。

在公告栏补加入以下代码：
代码中有2处www.donews.net/dodo记得换成你自己的，不然是搜索我这个BLOG

<script language="JavaScript">
<!–
document.write("</form><h3>本站站内搜索</h3><FORM method=GET action=\"http://www.google.com/search\">");
document.write("<INPUT TYPE=hidden name=ie value=utf-8>");
document.write("<INPUT TYPE=hidden name=oe value=utf-8>");
document.write("<INPUT TYPE=hidden name=\"hl\" value=\"zh-CN\">");
document.write("<TABLE style=’font-size:12px’><tr><td>");
document.write("<IMG SRC=\"http://www.google.com/logos/Logo_25wht.gif\" ");
document.write("border=\"0\" ALT=\"Google\" align=absmiddle> 提供");
document.write("</td></tr>");
document.write("<tr><td>");
document.write("<INPUT TYPE=text name=q size=20 maxlength=255 value=\"\"> ");
document.write("<INPUT TYPE=submit name=btnG VALUE=\"搜索\">");
document.write("");
document.write("<INPUT TYPE=hidden name=domains value=\"www.donews.net/dodo\"> ");
document.write("<INPUT TYPE=radio name=sitesearch value=\"\"> 搜索WWW ");
document.write("<INPUT TYPE=radio name=sitesearch value=\"www.donews.net/dodo\" checked> 搜索本站 ");
document.write("");
document.write("</td></tr></TABLE>");
document.write("</FORM><form method=post id=form2 name=form2 onsubmit=chggo()>");
document.write("<input type=\"hidden\" name=\"__VIEWSTATE\" value=\"\" />");
function chggo(){
document.getElementById("form2").action=document.getElementById("Form1").action
}
//–>
</script>

归类于： BlogSkin — dodo @ 4:13 pm 评论(28)

2005年05月23日

说2句

自打KESO写一篇我的烦恼，我忙了很多，感谢KESO让更多的人关注网页设计这个领域
之所以说2句，因为看了有些其他相关的文章
1。伸懒腰的秘密同学说我感慨怀“才”不遇，其实我那有什么才，所以无才也就无不遇之说。
2。我对我现在的工作状态很满意，无论是职位还是待遇，木有抱怨过什么
3。keso写这篇文章的标题其实应该是“美工的烦恼”，恰巧他认识我这么一个“美工”，于是我就成立他文章的例子。他写这篇文章的目的是让大家关注WEBUI在中国的发展，而不是我
4。至于DONEWS的新版，有很多不足的地方，希望大家能找BUG，提意见，让DONEWS越做越好

归类于： 7788 — dodo @ 2:17 pm 评论(6)

2005年05月20日

DIY DoNews Blog模板之五简约蓝色

做了一个简约的
还是选择Lighty模板，将代码复制到“自定义CSS”里面

body, html {
background:#f5f9fb;
    color: #787878;
    font-family:ms shell dlg;
    font-size:12px;
    margin: 0;
    line-height:150%;padding:0px

}
#nadframe{display:none}
form{
margin-right: auto;
margin-left: auto;
font-size:14px;
}

.pagelayout{
    margin: auto;
    padding:0px 0px 0px 0px;
    width: 100%;
    font-size:14px;

}
a:visited, a:active, a:link {
    color : #64b1d8;
    text-decoration : none;
}

a:hover {
    color: #64b1d8;
    text-decoration :none;padding:3px;
    border-bottom:1px dotted #333
}

blockquote {
    font-style : italic;
}

#header {
text-align:right;
color:#ffffff;
font-size:12px;
font-family:ms shell dlg;
padding-top:0px;
padding-right:20px;
height:110px ;background:#aaddff;border-bottom:6px solid #e4e4e4;
background:#aaddff url(http://www.donews.net/images/www_donews_net/dodo/54776/o_lanbj.gif) 0px 10px no-repeat;
}
#header span{float:left;padding-top:35px;text-align:right;width:100%;}
#header #Header1_HeaderTitle{
color: #000000;
font-size:14px;font-family:arial;line-height:120%;font-weight:bold;color:#fff
}
#main {float:left;padding: 10px 0px 0px 25px;width:75%;font-size:14px;line-height:160%;color:#666666;word-wrap:break-word;

}
#footer{clear:both;border-top:3px solid #c0c0c0;padding-top:10px;text-align:center;font-size:12px;width:100%}

#menu {clear:both;padding:0;
    float:left;
    width:17%;padding-top:10px;
word-wrap:break-word;
padding-right:5px;padding-left:5px;
background:#EBF7FF;border-right:1px dotted #c0c0c0;
}

#menu h1 {
    color:#666;padding:0px 0px 0px 18px;;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    height:20px;
    border-bottom:1px solid #d0f3fc;background:url(http://www.donews.net/images/www_donews_net/dodo/54776/o_flag_blue.gif) no-repeat;
}

#menu h3 {
color:#666;padding:0px 0px 0px 18px;;
    font-size: 14px;
    font-weight: bold;
    margin: 0px;
    height:20px;
    border-bottom:1px solid #d0f3fc;background:url(http://www.donews.net/images/www_donews_net/dodo/54776/o_flag_blue.gif) no-repeat;
}
#menu ul {
    list-style: none;
    padding: 0px;
    margin: 0px 0px 15px 5px;
    font-size: 12px;

}
#comments{font-size:12px;line-height:150%}
#comments a{font-weight:bold}
.postTitle{font-weight:bold;background:url(http://www.donews.net/images/www_donews_net/dodo/54776/o_em_38.gif) no-repeat;padding-left:25px}
.postTitle a,.postTitle a:link,.postTitle a:visited{color:#64b1d8;font-size:14px}
div,select,input{font-size:12px;word-wrap:break-word;}
div.block {
background-image: url(images/main_background.gif);
background-position: top left;
background-repeat: repeat-y;
font-size: 12px;
text-align: justify;
}

div.block_footer {
background-image: url(images/day_footer.gif);
background-position: top left;
background-repeat: no-repeat;
height: 67px;
}

div.post {
padding-left: 0px;
}
.dateTitle{background:url(http://www.donews.net/images/www_donews_net/dodo/54776/o_12.gif) no-repeat;padding-left:40px;font-size:12PX;color:#808080;line-height:250%;font-weight:bold}
div.posttitle {
color: #73AF1D;
    font-family: "ms shell dlg";
    font-size: 14px;
    font-weight: bold;
}
div.postText{line-height:150%;}
.posttitle a:visited, .posttitle a:active, .posttitle a:link {
    color:#64b1d8;
    text-decoration : none;
    padding:2px;
}

.posttitle a:hover {
    color: #64b1d8;
    text-decoration : none;padding:3px;
    border-bottom:1px dotted #64b1d8;
}
.postFoot{line-height:120%;border-bottom:1px dotted #808080;font-size:12px;}
div.itemdesc {
color: #808080;
font-size: 12px;
    text-transform: uppercase;
}

div.seperator {

background-position: top left;
background-repeat: no-repeat;
margin: 15px 0px 10px 0px;
}

div.entrylistitem {
padding-left: 20px;
padding-bottom: 10px;
}

a.entrylisttitle, a.entrylisttitle:visited, a.entrylisttitle:link, a.entrylisttitle:active {
color: #FF6600;
    font-size: 14px;
    font-weight: bold;
}

div.moreinfo {
font-size: 12px;
text-align: justify;
}

div.moreinfotitle {
    color: #FF2a00;
    font-size: 12px;
    font-weight: bold;
}

div.comments {
font-size: 12px
}

div.comment {
    background-color: #FBFBFB;font-size:12px;
border: 0px dotted #DDDDDD;
margin: 10px 0px 10px 0px;
padding: 10px;
}

div.comment_author {
margin: 5px 0px 5px 0px;font-size:12px;
}

div.comment_content {
margin: 5px 0px 5px 0px;font-size:12px;
}

#postcomment {
    border: 0px solid #DDDDDD;
    background-color: #FBFBFB;
font-size: 12px;
padding: 10px;
text-align: justify;
margin-top: 15px;
width: 435px;
}

#postcomment div {
    color: #808080;
font-size: 12px;
    font-weight: bold;
margin: 5px 0px 5px 0px;
}

#postcomment input.text, textarea {
border: 1px solid #DDDDDD;
font-size: 12px;
}

input.text {
    width : 300px;
}

textarea {
    width : 300px;
    height : 200px;
}

#relatedlinks ul {
    list-style : none;
    margin-left : 10px;
    padding : 0px;
}

span.highlight
{
    background-color:Yellow;
}
.block_title{font-size:14px;font-weight:bold}
.code{float:left;width:80%;padding:10px;border:1px dotted #d9d9d9;background:#f4f4f4;}
.postFoot{clear:both;padding-top:6px}
br{clear:both;}

归类于： BlogSkin — dodo @ 5:35 pm 评论(20)

让你的MSN头像动起来

MSN MESSENGER 7.0支持动画的头像，应该是FLASH格式的，试试MSN Content Installer 1.0吧，还可以鼠标右键还可以选择头像的心情，Standtard,Happy,Winking,Laughing,Sad,Angry

MSN Content Installer 1.0可提供﹕

130个 Winks
30个 Moods
30个 Packs
85个 Backgrounds
1300个 Emoticons

表情和背景就没必要了，点击软件界面的"Get Winks"和"Get Moods"就可以了

备注﹕

只支持MSN Messenger 7.0.0777
安裝MSN Content Installer 1.0时候请勿关闭MSN Messenger
要先安装Microsoft .NET Framework

相关下载﹕

不过如果能DIY就好了，装好以后也可以把.net Framework卸载掉

归类于： 7788 — dodo @ 11:54 am 评论(1)

2005年05月18日

怎样在线改变DoNews Blog的页面风格及自动获得最新DIY的风格皮肤

DoNews的这个BLOG只支持上传图片格式到相册，不支持上传其他文件，所以只好把CSS样式表放在自己的服务器空间里。期待韩磊后续版本中加入文件夹功能。

效果可以点击本页右边导航的 “切换页面样式”中的不同样式，网络不好时会有点慢，因为在调用相关图片等文件

下面说说怎么和我这里同步更新页面风格皮肤

怎样和本BLOG同步 donews Blog的页面风格（就是说我这里增加了新的风格，你那里也同时回显示）

1。首先进入“选项”－－“配置”

2。选择“皮肤”的样式为：Lighty

3。在"自定义CSS"那里输入一下代码：
/**/

4。在"公告栏"处输入一下代码：
<script language="JavaScript" src="http://www.iqoo.com/doblog/skin.js">
</script>
<script language="JavaScript">
<!–
setActiveStyleSheet("4")
//–>
</script>

第四步中的setActiveStyleSheet("4")的数字可以自己选择，目前为1－4，注意本BLOG的更新信息。

到此这样就可以了

如果你不是懒人的话，可以在第三步中贴上本BLOG DIY的任何一种风格皮肤的完全代码(具体见DIY donews Blog系列的文章中的代码)，然后将第四步中的<script language="JavaScript">
<!–
setActiveStyleSheet("4")
//–>
</script>，这段去掉，这样做的好处就是不会先出一个系统默认的皮肤

归类于： BlogSkin — dodo @ 10:52 pm 评论(30)

如何避免表格table被撑开变形的CSS

saivan留言问到这个问题，应该很多人都遇到过.
如何避免表格因为图片尺寸或者过长的英文字符而变形撑开，在CSS加入以下代码就可以防止，同时英文单词也会按单词断行，不是按字母

看了BINGU的留言，加一句，这个在CSS2.0是不支持，但是能解决一些实际问题。页面设计不是为了标准检验而设计，还是以用户使用为主，在目前有些WEB标准无法解决的一些问题上，我会采用一些非标准的方法处理，只要主流BROWSER如IE,Firefox,Netscape,Opera等上能正确显示，我会把通过WEB表准的校验放在次要位置，并且MS已经建议在CSS3。0中加入这个属性了，也许CSS3。0会支持。WEB标准也是在发展的，也许明天的标准就加入了这个属性，或者出现新的属性来解决。
看看这个连接吧
http://www.w3.org/TR/2003/CR-css3-text-20030514/#wordbreak-props

<style>

table {

table-layout: fixed;

word-wrap:break-word;

}

div {

word-wrap:break-word;

}

</style>

归类于： Web标准 — dodo @ 7:01 pm 评论(8)

Pages (2): 1 2 »

news

导航

分类

Blogs

Links

最新日志

存档

最新评论