DIV布局中用纯CSS制作小三角
在网页中经常会遇到在新闻等列表前面加一些小三角图标，通常我们都采用图片做背景来完成，今天我们介绍另一种方法：用纯CSS写一个出来。
设计思路：
我们先来看一下盒模型
我们先画一个矩形(.list-li)出来,把它的高度和宽度设为0，再设这个矩形的左边框、上边框、下边框各设为50像素，再给与不同的颜色
（红、蓝、绿）盒模型如下图：
实现代码如下：
<!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>
<title>CSS小三角的做法</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/*zishu.cn*/
*{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:1.8; list-style:none;}
#info,#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;}
#info div{background:#FF0000; width:0px; height:0px; overflow:hidden; margin-bottom:10px;}
/*一些三角的写法*/
#com_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}
#com_b{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}
#com_c{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;border-left:10px solid #FF3300;}
#com_d{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_e{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;}
#com_f{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-left:10px solid #FFFFCC;}
#com_g{ border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_h{ border-top:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_i{ border-top:10px solid #FF3300;border-right:10px solid #FF3300;border-bot
相关文档：
99款高质量免费(X)HTML/CSS模板
版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://iamsam.blogbus.com/logs/49215789.html
大家都清楚一个网站象征着你和你的品牌，这取决于你如何构建自己的网站。正因为Wordpress越来越受到互联网设计群体的关注，它并不代表最基本的(X)HTML/CSS很丑、很� ......
<style type="text/css">
.worksbox{width:114px;height:114px;position:relative;}
.worksbox a{border:1px solid #F0F0E8;background-color:#FFF;padding:6px;display:block;}
.worksbox a:hover{border:1px solid #000;background-color:#333;text-decoration: none;}
.worksbox a span{display:none; text-al ......
text-overflow : ellipsis;
white-space : nowrap;
overflow : hidden;
解释一下：
text-overflow ：ellipsis; //让截断的文字显示为点点。还有一个值是clip意思是截断不显示点点
white-space : nowrap; //让文字不换行
overflow : hidden; //超出要隐藏
要显示为点点，3个缺一不可，还有，除了firefox,opera其他浏 ......
可以在博客的配置页面的自定义css栏中填入css样式代码来自定也blog的风格
csdn blog的页面架构基本是由div实现的，整个页面主要由三个div组成，它们的id分别是:
csdnblog_header,
csdnblog_sidebar, csdnblog_content。
所以，定义它们的主体样式可以这样:
#csdnblog_header
{
//头部的风格 ......
发文章中，图片把div撑破了的解决办法
原来图片自适应宽度一般都是通过Javascript来解决的，但是多少还是比较麻烦。还有一种通过设置外层容器overflow:hidden属性来解决，但是这样会导致图片显示不全的问题。今天看到了一种新的解决办法，通过CSS来解决这个问题。
CSS代码
img{
max-width:500px;&nbs ......
