css探密学习（六）

/*侧边栏所显示的自己回复*/
.divRecentComment {
line-height:22px;
padding-right:20px;
}
/*侧边栏的无序列表项的样式*/
#sideBar ul li {
border-bottom:1px #c0c0c0 solid;
line-height:22px;
padding-left:15px;
background:url(http://images.cnblogs.com/cnblogs_com/binyong/z-bullet.gif) no-repeat 5px 8px;
}
#sideBar ul li a:link,#sideBar ul li a:visited {}
#sideBar ul li a:hover {
text-decoration:underline;
color:#000;
}
/*阅读文章时的文章整体所占区属性*/
#topics {
margin-left:30px;
margin-top:30px;
border-right:1px #c0c0c0 solid;
padding-right:30px;
padding-bottom:10px;
}
/*文章内容中P标记的属性*/
.postBody p {
line-height:30px;
text-indent:2em;
font-size:15px;
}
/*文章标题栏*/
.postTitle {
height:40px;
line-height:40px;
text-align:center;
border:none;
background:url(http://images.cnblogs.com/cnblogs_com/tongxi/189210/o_%e6%96%87%e7%ab%a0%e6%a0%87%e9%a2%98.png) repeat-x left top;
}
/*文章标题*/
#AjaxHolder_ctl01_TitleUrl {
color:#fff;
height:40px;
line-height:40px;
}
/*文章板块下的评论板块*/
#AjaxHolder_UpdatePanel1 {
margin-left:30px;
width:86.8%;
border-right:1px #c0c0c0 solid;
border-top:1px #c0c0c0 solid;
padding-right:30px;
overflow:hidden;
}
/*评论板块的title*/
.feedback_area_title {
height:40px;
line-height:40px;
text-align:center;
border:none;
background:url(http://images.cnblogs.com/cnblogs_com/tongxi/189210/o_%e6%96%87%e7%ab%a0%e6%a0%87%e9%a2%98.png) repeat-x left top;
color:#fff;
font-weight:bold;
font-size:14px;
}
/*评论板整体内容*/
.feedbackItem {
border-left:1px #c0c0c0 solid;
border-right:1px #c0c0c0 solid;
}
/*单个评论上的操作栏*/
.feedbackManage {
border-bottom:1px #c0c0c0 solid;
border-top:1px #c0c0c0 solid;
background:#CCCCCC;
}
.feedbackManage a:link,.feedbackManage a:visited {
color:#287C9B; 
text-decoration:underline;
}
/*评论板块的页脚操作栏*/
#divRefreshComments {
border:1px #c0c0c0 solid;
margin-right:0;
width:594px;
background:#CCCCCC;
}
#divRefreshComments a {
color:#287C9B; 
text-decoration:underline;
}
/*评论上的操作栏和内容Con:content*/
.feedbackManage,.feedbackCon {
padding-left:10px;
}
.feedbackCon span {
line-height:26px;
}
/*评论下面区域*/
.commentform {
border:none;
background:url(http://images.cnblogs.com/cnblogs_com/tongxi/189210/o_%e6%96%87%e7%ab%a0%e6%a0%87%e9%a2%98.png) repeat-x left top;
padding-top:40px;
width:596px;
overflow:hidden;
}
/*这里设置了一些不显示的版块，IT新闻，相关文章，谷歌广告，站内导航，评论面板,站内热点链接*/
.itnews,#relative_posts,.CommentBoxNav,#google_ads_div_cnblogs_blogpost_bottom,#AjaxHolder_PostComment_panelAD,.div_a4_ads {
display:none;
}
#AjaxHolder_PostComment_panelAD {
border:1px orange solid;
background:red;
}
/*主页最下面的“仅列出标题“*/
.topicListFooter {
clear:both;
width:95%;
height:30px;
line-height:30px;
}
/*评论输入框*/
#AjaxHolder_PostComment_tbComment {
width:592px;
height:100px;
border:1px #c0c0c0 solid;
}
/*Ctrl+Enter键提示栏*/
.CtrlEnter {
display:block;
width:100%;
height:30px;
line-height:30px;
border-bottom:1px #c0c0c0 solid;
margin-bottom:10px;
background:#ccc;
color:red;
padding-left:20px;
}
/*侧边栏谷歌搜索的ul标签，本站的博客搜索*/
#sideBar .google_search ul,.div_my_zzk {
margin-top:10px;
margin-bottom:10px;
padding-left:20px;
}
#sideBar .google_search ul li {
border-bottom:0;
padding-left:0px;
background:none; 
position:relative;
height:30px;
}
/*谷歌搜索的ul里的li里的input标签和搜索栏找找看按钮的属性*/
.google_search ul li input,#btnZzk {
border:none;
width:55px;
height:26px;
line-height:26px;
float:left;
color:#fff;
background:url(http://images.cnblogs.com/cnblogs_com/binyong/z-btnsearch.gif) no-repeat left top;
text-indent:-9999px; 
position:absolute;
top:2px;
left:140px;
}
/*这里主要设置了两个搜索的输入框*/
.google_search ul li #google_q,.input_my_zzk {
height:25px;
line-height:25px;
padding-left:5px;
width:135px;
float:left;
background:url(http://images.cnblogs.com/cnblogs_com/binyong/z-inputbg.gif) no-repeat left top;
absolute;top:0;
left:0;
text-indent:0;
color:#000;
overflow:hidden;
}
/*找找看的内容区*/
.div_my_zzk {
position:relative;
height:30px;
}
/*找找看的按钮*/
#btnZzk {
background:url (http://images.cnblogs.com/cnblogs_com/binyong/z-btnsearch1.gif) no-repeat left top;
left:160px;
}
/*找找看输入框*/
.input_my_zzk {
width:130px;
border:none;
}
/*右侧评论栏里的文章标题*/
.divRecentCommentAticle .listitem {
font-weight:bold;
font-size:12px;
color:#287C9B;
}
/*最新评论块标题里的a标签属性*/
.catListComment .catListTitle a {
position:relative;
top:-27px;
left:100px;
display:block;
height:10px;
width:26px;
overflow:hidden;
}
.catListComment .catListTitle a img {
position:absolute;
top:0px;
left:0px;
}
/*右侧评论栏里的文章标题区*/
.catListComment .divRecentCommentAticle {
padding-left:10px;
}
/*右侧评论栏里的评论内容区*/
.catListComment .divRecentComment {
padding-left:15px;
}
/*公告区*/
.newsItem {
top:30px;
}
.newsItem p {
line-height:22px;
margin:0;
padding-left:20px;
font-weight:bold;
} 
/*点开分类后的显示区*/
.entrylist {
width:90%;
float:right;
border-bottom:2px #AE5022 solid;
margin:10px auto 0;
padding-bottom:10px;
padding-right:0px;
position:relative;
}
.entrylistTitle {
height:40px;
line-height:40px;
text-align:center;
border:none;
background:url(http://images.cnblogs.com/cnblogs_com/tongxi/189210/o_%e6%96%87%e7%ab%a0%e6%a0%87%e9%a2%98.png) repeat-x left top;
color:#D96000;
font-size:15px;
font-weight:bold;
}
/*分类内容介绍*/
.entrylistDescription {
border:1px #c0c0c0 solid;
line-height:22px;
padding:15px;
margin-bottom:10px;
border-top:none;
}
/*分类各标题*/
.entrylistPosttitle {
height:40px;
line-height:40px;
text-align:center;
border:none;
background:url(http://images.cnblogs.com/cnblogs_com/tongxi/189210/o_%e6%96%87%e7%ab%a0%e6%a0%87%e9%a2%98.png) repeat-x left top;
}
.entrylistPosttitle a:link,.entrylistPosttitle a:visited {
color:#fff;
height:40px;
line-height:40px;
font-size:14px;
font-weight:bold;
}
/*分类摘要*/
.entrylistPostSummary {
border-left:1px #c0c0c0 solid;
border-right:1px #c0c0c0 solid;
line-height:22px;
padding:15px;
overflow:hidden;
}
/*分类下面的信息栏*/
.entrylistItemPostDesc {
line-height:26px;
border:1px #c0c0c0 solid;
font-weight:bold;
color:#287C9B;
padding-left:20px;
}
.entrylistItemPostDesc a:link,.entrylistItemPostDesc a:visited {
font-weight:normal;
color:#287C9B; 
text-decoration:underline;
}
/*我的随笔栏目题*/
.PostListTitle {
width:90%;
float:right;
height:40px;
line-height:40px;
text-align:center;
border:none;
background:url(http://images.cnblogs.com/cnblogs_com/tongxi/189210/o_%e6%96%87%e7%ab%a0%e6%a0%87%e9%a2%98.png) repeat-x left top;
color:#fff;
font-size:15px;
font-weight:bold;
margin-top:10px;
}
.PostListTitle a:link,.PostListTitle a:visited {
color:#fff;
font-size:15px;
font-weight:bold;
}
/*所有随笔标题列表所在区*/
#myposts {
width:90%;
float:right;
border-bottom:2px #AE5022 solid;
margin:10px auto 0;
padding-bottom:10px;
padding-right:0px;
position:relative;
}
/*文章标题区*/
.postTitl2 {
padding-left:20px;
font-size:12px;
font-weight:bold;
}
.postTitl2 a:link,.postTitl2 a:visited {
height:30px;
line-height:30px;
font-size:12px;
font-weight:bold;
}
/*文章信息*/
.postDesc2 {
text-align:right;
border-top:1px #c0c0c0 dashed;
border-bottom:1px #c0c0c0 solid;
line-height:26px;
height:26px;
padding-right:30px;
color:#287C9B;
}
/*标题间间隔的区域*/
.postText2 {
padding:20px;
line-height:22px;
}
/*摘要图片*/
.desc_img {
float:left;
margin-top:0;
}
/*代码运行框样式*/
.codetext {
border:1px #c0c0c0 solid;
font-size:12px;
width:594px;
}
.button {
border-left:1px #FF8534 solid;
border-top:1px #FFB17E solid;
border-right:1px #A3470B solid;
border-bottom:1px #943B00 solid;
background:#FF6600;
color:#fff;
font-size:12px;
font-family: ,"verdana","ms song","Arial","Helvetica","sans-serif";
}
/*插入的代码框样式*/
.cnblogs_code {
border:1px #c0c0c0 solid;
background:#fcfcfc;
}
/*摘要图片*/
.desc_img {
float:none;
margin:0 auto;
}
/*相册内容主体*/
.gallery {
	margin:10px 57px 10px 57px;
	}
/*单个缩略图*/
.divPhoto {
	height: 123px;
	width: 123px; 
	border: 1px solid #ccc;
	padding: atuo;
	margin:0px 8px 8px 0;
		display:table-cell;
		vertical-align:middle;
		text-align:center;
		*display: block;
		*font-size: 90px;
        *font-family:Arial;
}
/*相册描述*/
.thumbDescription {
	color: transparent;
	text-align: right;/*vertical-align的使用*/
	padding-top: 4px;
	padding-bottom: 4px;
	padding-right: 4px;
	margin-bottom: 10px;
}
/*pre标签可以自动换行*/
pre {
white-space:pre-wrap;/*white-space的使用*/
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;/*word-wrap的使用*/
}

vertical-align

作用： 设置元素的垂直排列
说明： 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
语法： vertical-align : baseline |sub |super |top |text-top |middle |bottom |text-bottom |length
参数：
baseline : 默认值。将支持 valign 特性的对象的内容与基线对齐
sub : 垂直对齐文本的下标
super : 垂直对齐文本的上标
top : 将支持 valign 特性的对象的内容对象顶端对齐
text-top : 将支持 valign 特性的对象的文本与对象顶端对齐
middle : 将支持 valign 特性的对象的内容与对象中部对齐
bottom : 将支持 valign 特性的对象的内容与对象底端对齐
text-bottom : 将支持 valign 特性的对象的文本与对象顶端对齐
length : 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0，对于百分数来说就是0%。请参阅长度单位。
默认值： baseline

white-space

作用： 设置如何处理元素内的空白及换行。
语法： white-space : normal |pre |nowrap |pre-wrap |pre-line
参数：
normal : 默认。空白会被浏览器忽略。
pre : 空白会被浏览器保留。其行为方式类似 HTML 中的<pre>标签。
nowrap : 文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。
pre-wrap : 保留空白符序列，但是正常地进行换行。
pre-line : 合并空白符序列，但是保留换行符。
默认值： normal
继承：可继承
注释： 值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

word-wrap

作用： 设置或检索当当前行超过指定容器的边界时是否断开转行。
说明： 此属性仅作用于有布局的对象，如块对象。内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。
语法： word-wrap : normal |break-word
参数：
normal : 默认值。允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要，词内换行( word-break )也将发生
默认值： normal
继承：可继承
注释： 貌似到css2.1就没了，应该是用word-wrap代替了吧,有时为了兼容IE6，估计还得加上

posted on 2009-06-16 11:09 Tongxi 阅读(417) 评论(0) 收藏举报

刷新页面返回顶部

煮酒问源

css探密学习（六）

目录

vertical-align

white-space

word-wrap

vertical-align

white-space

word-wrap

公告

导航