刚才在写《现居住的房子 》时，在后台编辑图片用到了caption这个标签，发布后发觉图片没有了在后台时看到的效果。于是乎查找了一番，终于找到了那段CSS，看看下图效果，还有圆角： 其实靠的就是下面这段css： .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; } 上面代码中红色部分并不是标准的CSS代码，在W3C CSS 校验器中会报错，但那部分正是实现圆角的关键所在。加不加就看你了。据说这是wordpress2.6的新功能 ，叫做图片标题（Image [...]
Captions, css, Image, theme, wordpress
Stylecrunch是一个提供展示和分享优秀CSS设计网站的平台。这里汇聚了很多优秀的网络设计，你可以在这里发现很多优秀的网站设计，你可以对这些网站设计评分，发表评论等等。 Stylecrunch去年10月才上线，不过已经收集几百个很不错的网络设计，你可以网站分类浏览： Spanish (47) English (253) Weblogs (134) Companies (140) Portfolios (126) Tools (35) 此外，如果你知道很不错的网站设计，可以投递网站，不过投递的网站必须用CSS设计并且符合web标准，不是基于flash的站点，不是基于原有主题的改进（要原创的吧），另外网页不能含有色情内容。 Stylecrunch主页 链接：http://www.stylecrunch.com/ 原文：http://www.web20share.com/2007/01/stylecrunchcss.html
css, stylecrunch, 设计
2008年3月9日
资源共享
1,054 views
链接：http://www.bestwebgallery.com/ 网站分类：Flash (83)；CSS (63)；Portfolio (77)；Blog (54)；Illustration (14)；Corporate (24)；Resources (26)；Entertainment (22)；Design (38)；Ajax (10) 链接：http://www.cssbloom.com/ 网站分类：9rules member (19)；Ajax (1)；Blogspot (2)；Business (82)；CSS Gallery (1089)；DotClear (4)；Entertainment (17)；Expression Engine (5)；Forum (2)；Great Header (9)；Great Menu (1)；LifeType (1)；Movable Type (6)；Nice Colors (2)；Portfolio (351)；ReBoot (38)；Symphony (3)；Textpattern (11)；Unique Design (7)；Weblog-Journal (176)；WordPress (122)；XHTML (1) 链接：http://www.csscoosite.com/ 链接：http://www.csselite.com/ 网站分类： Clean；Blog；Dark；Colorful；Designer；Unique；Corporate；Navigation；Colleges & Universities 链接：http://www.cssheaven.com/ 链接：http://www.cssmania.com/ 网站分类：Weblogs (1385)；Technology (967)；Companies [...]
css, css gallery, 设计
CSSArtillery是一个提供优秀CSS设计网站分享和交流的平台。在这里你可以浏览很多优秀的网络设计，给相应的设计评分，发表评论；也可以提交你喜欢的或者你自己的优秀的CSS设计作品。 目前 CSSArtillery上面收集的优秀的CSS设计网站主要分为以下几类： Associations (3) Blogging (19) Business (17) CMS (30) Colors (69) Entertainment (14) Featured (3) Institutions (3) Media (3) Portal (1) Web Design (38) More Categories 如果你喜欢这个收集优秀网站设计的网站，你可以通过RSS Subscribe 和 Twitter了解其最新的情况。 链接：http://www.cssartillery.com/ 原文：http://www.web20share.com/2007/11/cssartillery.html
css, cssartillery, 设计网站
Cssclip是一个提供优秀CSS设计网站分享和交流的平台。在这里你可以浏览很多优秀的网络设计，给相应的设计评分，发表评论；也可以提交你喜欢的或者你自己的优秀的CSS设计作品。 除了按照分类，和投票数来进行浏览Cssclip上面列出的网站之外，Cssclip提供了一种很不错的浏览上面网站的方法。就是你可以通过颜色来分类浏览不同的色系的CSS设计。网站右上方提供了十二种颜色，最后一种为混合色，点击任何一种颜色，你就可以浏览相应颜色下的网站设计。 链接：http://www.cssclip.com/ 原帖地址：http://www.web20share.com/category/design
css, cssclip, 设计
2007年11月21日
网站建设
784 views
复杂的列表布局是我最为头痛的。往往在测试时会乱得不堪入目，而且不能兼容IE和FireFox。这个问题困扰了我几个晚上，今天终于搞定了。在IE和FireFox中测试几乎一模一样。 源码下载： 附件:复杂列表演示.zip 先看效果图：这是模仿闪客帝国的作品爬行榜。 实现代码： XML/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>步步为营，实战div+css系列教程–</title> </head> <style tpye=“text/css”> <!– a{color:#349DEF;text-decoration:none;} a:hover{color:#F1B246;text-decoration: underline} h2 a {color:#ff0000;} .t1 h1{color:#ff0000;} #paihang{width:220px;background-color:#EDF0F3;padding:10px 5px;} [xmlns] #paihang{height:300px;width:230px;} /*此处运用了css hack技术：对象前加[xmlns]只被非IE浏览器识别*/ .tit_bg{position:relative;left:10px; background-repeat:no-repeat;float:left;} .tit_txt{float:left;padding-left:20px;font-size:15px;font-weight:bold;color:#5442C0;} .more{float:right;padding:1px;} #top10{float:left;margin:0px;padding:10px 5px 0px 5px;background-color:#fff;list-style-type:none;width:220px;}/*对于ul对象，一定要设定宽度*/ #top10 .topimg{float:left;padding-left:2px;margin:0px;}/*此处类前不能加li,否则不正常，涉及到列表与div的关系*/ #top10 h1,#top10 h3{font-size:12px;font-weight:normal;float:left;} #top10 h2{font-size:12px;} #top10 li.t1 h1{clear:right;width:126px;border-bottom:1px #33ccff dashed;margin:0px;padding:8px 5px 3px 5px;font-weight:bold;} #top10 li.t1 h2{float:left;display:block;margin:10px 5px;;font-weight:normal;width:90px;} #top10 li.t1 h3{float:left;display:block;color:#ff0000;clear:right;margin:10px 0px;padding-left:5px;border-left:2px solid #ff0000;} #top10 li.t2,#top10 li.t3,#top10 li.t4{float:left;border-top:1px dashed #349DEE;background-image:url(arrow_t1.gif);background-repeat:no-repeat;background-position:0px 65%; margin:0px 0px 0px 5px;line-height:22px;} #top10 li.t2 h1,#top10 li.t3 h1,#top10 li.t4 h1{float:left;color:#349DEF;clear:left;width:155px;padding-left:25px;margin:0px;} #top10 li.t2 h3,#top10 li.t3 h3,#top10 li.t4 h3{float:left;color:#349DEF;padding-left:5px;margin:0px 0px 0px 0px ;} –> </style> <body> <div id=“paihang”> <div class=“title”> <span class=“tit_bg”><img src=“tit_bg.gif” /></span> <span class=“tit_txt”>中国娱乐排行榜</span> <span class=“more”><img src=“tit_more.gif” alt=“浏览更多信息” [...]
css, css教程, div
2007年11月21日
网站建设
885 views
1、列表形式由于展示形式整齐直观，在网站设计中占有很大的比重。早期的列表都是由表格实现的，在代码上过于繁杂，设计和可读性较差。这一节我们重点探讨无序列表ul及有序列表ol元素的使用。 看XHTML代码很简单： XML/HTML代码 <ul> <li>布局概述</li> <li>页面元素入门</li> <li>高级技巧</li> <li>高级技巧</li> </ul> <ol> <li>布局概述</li> <li>页面元素入门</li> <li>高级技巧</li> <li>高级技巧</li> </ol> 以上对比效果见图左： 2、针对ul的项目列表符号有以下几种： CSS代码 ul{list-style-type:none} /*不显示项目符号*/ ul{list-style-type:disc} /*实心圆点，默认的*/ ul{list-style-type:ncircle} /*空心圆点*/ ul{list-style-type:square} /*实心方块*/ 针对ol的项目列表符号有以下几种：none（没有）;decimal（实心圆点，默认的）;circle（空心圆点），square（小方块）； CSS代码 ol{list-style-type:none} /*不显示项目符号*/ ol{list-style-type:decimal} /*阿拉伯数字*/ ol{list-style-type:lower-roman} /*小写罗马数字*/ ol{list-style-type:upper-roman} /*大写罗马数字*/ ol{list-style-type:lower-alpha} /*小写英文字母*/ ol{list-style-type:upper-alpha} /*大写英文字母*/ 3、使用图片自定义项目符号 CSS代码 ul{list-style-image:url(arrow.gif);border:1px #33ccff solid;list-style-position:inside;} 其中：list-style-position:inside;的意义是设置列表项位置位于内部，inside与outside是这一句的属性值，对比效果如上图右侧。 其实用过这种方法的朋友会发现，使用这种方法固然简单，但定位起来比较麻烦，而且在效果上也有很大的局限性，下面我们采用背景图片的方法来实现项目列表样式： css代码如下： CSS代码 ul{list-style-type:none;}/*去掉项目符号*/ li{background:url(arrow.gif) no-repeat 0px 3px; padding-left:20px;} [...]
css, css教程, div
2007年11月21日
网站建设
1,021 views
以下为下拉式多级菜单样式实现： 已测试好，欢迎下载使用，超简捷的代码！ XML/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>下拉多级菜单-css系列教程</title> <script type="text/Javascript"><!–//–><![CDATA[//><!-- startList = function() { if (document.all&&document.getElementById){ navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length;i++){ node =navRoot.childNodes[i]; if(node.nodeName=="LI"){ node.onmouseover=function() { this.className+="over"; } node.onmouseout=function() { this.className=this.className.replace("over",""); } } } } } window.onload=startList; //–><!]]></script> <style> ul { padding:0; margin:0; list-style:none;} li { float:left; width:100px;} ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decoration:none; color:#777;} ul li a:hover { background-color:#ddd;} li ul { display:none; top:20px;} [...]
css, css教程, div
2007年11月20日
网站建设
786 views
XML/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> <style type="text/css"> body { text-align:center;} a { color:#CCCCCC;} *{ margin:0; padding:0; border:0;} #flag { width:600px; text-align:left; position:absolute; top:50%; left:50%; margin-left:-300px; margin-top:-200px;height:400px; background-color:#FF0000; color:#FFFF00;} div { font-size:45px;} .bigStar { float:left; height:340px; width:140px; display:inline; font-size:120px; margin-top:60px; margin-left:25px;} .starBox { float:left; margin-top:5px; margin-left:-10px;} .star1 { padding-top:20px;} .star2 , .star3 { padding-left:50px;} .star3 { margin-top:7px;} .star1 ,.star2 ,.star3 ,.star4 { margin-left:10px;} .star1 { margin-top:10px;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>猪肉涨价了方便面涨价了什么都涨了就工资不涨，党啊，可怜一下我们这些普通的人民吧！</title> </head> <body> <div id="flag"> <div class="bigStar">★</div> <div class="starBox"> <div class="star1">★</div> <div class="star2">★</div> <div class="star3">★</div> [...]
css
2007年11月20日
网站建设
2,098 views
IE下面的写法: CSS代码 overflow:hidden; text-overflow:ellipsis; whitewhite-space:nowrap; FF下面的写法： 使用 :after 伪类来实现… CSS代码 <div class="ellipsis"> <span>A very, very, very, very, very, very, very, very, very long text</span> </div> We should have this css stylesheet : .ellipsis span { whitewhite-space:nowrap; text-overflow:ellipsis; /* for internet explorer */ overflow:hidden; width:190px; display:block; } html>body .ellipsis { clear:both; } html>body .ellipsis span:after { content: "…"; } html>body .ellipsis span { max-width:180px; width:auto !important; float:left;
css, firefox, ie
Recent Comments