css探密学习（五）

目录

text-overflow

float

/*主体内容和侧边栏*/
#main {
width:981px;
margin:0px auto;
background:transparent url(http://images.cnblogs.com/cnblogs_com/tongxi/189210/o_%e8%83%8c%e6%99%af1.png) repeat center 15px;
}
/*主体内容*/
#mainContent {
padding-top:20px;
}
/*侧边栏*/
#sideBar {
width:18%;	
-o-text-overflow: ellipsis;/*在text-overflow中讲解*/
text-overflow: ellipsis;/*text-overflow的使用*/
word-break: break-all;	
float:right;/*float的使用*/
padding-top:40px;
padding-right:45px;
padding-bottom:30px;
margin-top:0px;
overflow:hidden;	
}
/*主体内容*/
#mainContent {
float:left;
width:70%;
margin-top:10px;
overflow:hidden;
background:transparent url() repeat-y 16px 12px;
}
/*页脚*/
#footer {
width:981px;
height:191px;
line-height:251px;
*line-height:190px;
background:url(http://images.cnblogs.com/cnblogs_com/tongxi/189210/o_tongxifooter.png) no-repeat left bottom;
text-align:center;
margin:0 auto;
margin-top:-100px; 
text-indent:-9999px;
}
/*每日文章列表容器*/
.day {
width:556px;
float:right;
border-bottom:15px #000 solid;
margin:10px auto 0;
padding-left:75px;
padding-bottom:10px;
padding-right:0px;
position:relative;
}
/*日期归类标题*/
.dayTitle {
width:66px;
height:65px;
line-height:50px;
background:url(http://images.cnblogs.com/cnblogs_com/tongxi/189210/o_%e6%97%b6%e9%97%b4%e6%a0%87%e9%a2%98.png) no-repeat left top;
overflow:hidden;
color:#fff;
font-weight:bold;
position:absolute;
top:0px;
left:0px;
padding-top:5px;
}
.dayTitle a {
display:block;
padding:10px 6px;
}
/*文章标题*/
.postTitle {
height:30px;
line-height:30px;
border:1px #c0c0c0 solid;
text-indent:1em;
font-weight:bold;
}
.postTitle a:link,.postTitle a:visited {
color:#fff;
font-size:14px;
height:40px;
line-height:40px;
}
/*文章摘要*/
.postCon {
border:1px #c0c0c0 solid;
width:94.1%;
line-height:22px;
padding:15px;
overflow:hidden;
float:left;
border-top:none;
}
/*文章附加信息*/
.postDesc {
line-height:26px;
border:1px #c0c0c0 solid;
font-weight:bold;
color:#287C9B;
padding-left:20px;
}
.postDesc a:link,.postDesc a:visited {
font-weight:normal;
color:#287C9B; 
text-decoration:underline;
}
/*一日内多篇文章分割区域*/
.postSeparator {
height:5px;
font-size:0;
background:#fff;
}
/*最下面的“仅列出标题“*/
.topicListFooter {
position:relative;
width:100%;
margin-bottom:100px;
}
.topicListFooter a:link,.topicListFooter a:visited {
position:relative;
z-index:20;
}
/*侧边栏标题*/
.catListTitle {
width:100%;
height:39px;
line-height:39px;
font-size:12px;
font-weight:bold;
color:#000;
text-align:left;
text-indent:3em;
background:url(http://images.cnblogs.com/cnblogs_com/binyong/z-titlebg.gif) repeat-x left -39px;
}
/*下面分别定义了侧边栏中：公告块，留言簿块，随笔档案块，谷歌搜索块，评论排行榜块，的属性*/
.newsItem .catListTitle,.catListNoteBook .catListTitle,.catListPostArchive .catListTitle,.google_search .catListTitle,.catListFeedback .catListTitle {
background:url(http://images.cnblogs.com/cnblogs_com/binyong/z-titlebg.gif) repeat-x left top;
}
/*下面分别定义了侧边栏中：与我联系块，我的团队块，的属性*/
.catListInteraction .catListTitle,.catListMyTeams .catListTitle {
background:url(http://images.cnblogs.com/cnblogs_com/binyong/z-titlebg.gif) repeat-x left -39px;
}
/*下面分别定义了侧边栏中：搜索块，我的标签块，好友链接块，最新评论块，的属性*/
.mySearch .catListTitle,.catListTag .catListTitle,.catList好友链接.catListTitle,.catListComment .catListTitle {
background:url(http://images.cnblogs.com/cnblogs_com/binyong/z-titlebg.gif) repeat-x left -78px;
}
/*下面分别定义了侧边栏中：常用链接块，随笔分类块，最新随笔块，的属性*/
.catListLink .catListTitle,.catListPostCategory .catListTitle,.catListEssay .catListTitle {
background:url(http://images.cnblogs.com/cnblogs_com/binyong/z-titlebg.gif) repeat-x left -117px;
}

text-overflow

• 作用： 设置是否使用省略标记...
• 说明： 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
  如：LI中内容超过长度后以省略号显示的方法：
  li {
  width:200px;
  white-space:nowrap;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  overflow: hidden;
  }
• 语法： text-overflow : clip |ellipsis
• 参数： clip : 默认值。不显示省略标记(...)，而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记(...)
• 默认值： clip
• 注释：
  貌似是IE6+的专有属性，在通用的css2.1介绍中没有此属性
  前面加上-o-就是以Presto为引擎的Opera专有的，也就是说只有Opera和IE6+支持省略标记(...)
  在幻想之中：-icab-是iCab私有的，-khtml-就是以KHTML为引擎的浏览器（如Konqueror Safari）、-moz-就是以mozilla的Gecko为引擎的浏览器（如Firefox，mozilla）、-webkit-就是以Webkit 渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）。
  当一个浏览器的开发人员决定在浏览器支持一种还没得到公认的属性时，一般都会在属性的前面加上-xxx-这种，表明这种是属于该浏览器私有的属性，当然，这些属性多数来自CSS3的，使用这样的写法在浏览器升级后也许才有作用。

float

• 作用： 设置元素在哪个方向浮动。
• 说明： 在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。浮动非替换元素要指定一个明确的宽度；否则，它们会尽可能地窄。
• 语法： float : none |left |right
• 参数：
  none : 默认。文本或图像会显示于它在文档中出现的位置。
  left : 文本或图像会移至父元素中的左侧。
  right : 文本或图像会移至父元素中的右侧。
• 默认值： none
• 注释： 假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。