CSS_保哥笔记

隐藏第三方网站统计图标

有时为了页面美观，需要隐藏一些不需要展示的代码，而这些代码的功能却一定要生效，比如统计代码。下面提供两种方法隐藏：

第一种方法，将统计代码放在<div style=”display:none”>与</div>中间，如下所示：

<div style="display:none">
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1262021941'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/stat.php%3Fid%3D1262021941%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
</div>

</div>

第二种方法，如果是CNZZ站长统计的话，可以直接在统计代码中的%3Cspan和id=’cnzz_stat_icon的中间加上style=’display:none;’注意前后要加半角空格。如下所示：

<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1262021941'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/stat.php%3Fid%3D1262021941%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>

如果是51.LA统计的话，可以在代码里加上type=”hidden”实现隐藏，如下所示：

<script language="javascript" type="hidden" src="http://js.users.51.la/1212563.js"></script>

1	<script language="javascript" type="hidden" src="http://js.users.51.la/1212563.js"></script>

或进写入JS也行：

document.write ('<script language="javascript" type="hidden" src="http://js.users.51.la/1212563.js"></script>');

1	document.write ('<script language="javascript" type="hidden" src="http://js.users.51.la/1212563.js"></script>');

由于搜索引擎对<div>中含有style=”display:none”这种css隐藏方式不太友好，容易判为SEO作弊，所以建议都用第二种方法。

修改WordPress默认字体为微软雅黑

WordPress默认自带的模板主题以及一些国外的WordPress模板里的中文字体很模糊特别难看，不符合国人的审美，下面提供一行简单的CSS代码，即可解决整站字体，而且不影响Font awsome图标。

复制以下代码：

*:not([class*="icon"]):not(i) {font-family: Segoe UI, "Microsoft Yahei" !important;}

1	:not([class="icon"]):not(i) {font-family: Segoe UI, "Microsoft Yahei" !important;}

粘贴到主题自定义里面的额外CSS里，发布后即可生效，保哥笔记用的就是这段代码，只需一行，轻松搞定。

段落开头自动空两格CSS代码

网页内容中遇到大量的中文段落时，排版需要为每个段落前空两格或者往右缩进两格，以符合中文阅读的习惯，不会像豆腐块一样。只需要将文章“容器”样式中加上text-indent这个属性就可以了，如下代码所示：

.box{text-indent:2em;}

1	.box{text-indent:2em;}

或者

<div style="text-indent:2em;">你的文章内容！</div>

1	<div style="text-indent:2em;">你的文章内容！</div>

如果网页模板加了这个CSS代码的话，就不会傻到在编辑器里编辑内容时要每个段落前都键入两个全角空格。

图片自适应手机端并居中显示CSS样式

很多内容编辑器对图片的处理是居左显示的，如果是响应式的HTML5网站，还存在图片宽度太宽显示不全的问题。

这种情况，在后台上传图片时，图片宽度默认是图片的真实宽度，可以把宽度设置为100%，或留空不填，高度也留空不填。

内容页写法

<div class="detail"> 这里是内容及图片</div>

1	<div class="detail"> 这里是内容及图片</div>

CSS样式可以如下写法，如果担心在电脑上浏览时，图片过大撑破页面，可以增加一个类似这种样式max-width:650px

.detail img{

display:block;margin:0 auto;padding:10px; /* max-width:650px */

}

/*以下为兼容手机代码*/

@media(max-width:760px){

.detail img{max-width: 100%;height: auto;width: auto\9;}

}

.detail img{

display:block;margin:0 auto;padding:10px; /* max-width:650px */

}

/*以下为兼容手机代码*/

@media(max-width:760px){

.detail img{max-width: 100%;height: auto;width: auto\9;}

}

CSS强制文字不换行对超出文字隐藏并显示省略号

文字超出隐藏并显示省略号

text-overflow在使用ellipsis属性时，必须与overflow:hidden; white-space:nowrap; width:150px;这三个样式共同存在时，才会出现省略号的效果，其中overflow: hidden;是自动隐藏文字，text-overflow: ellipsis;是文字隐藏后添加省略号，white-space: nowrap;是强制不换行，width宽度属性根据你的实际宽度需要填写，其它样式是固定的。

在CSS中加入样式：

.test {
overflow: hidden;/*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
width:150px;/*超过指定宽度时隐藏*/
}

.test {

overflow: hidden;/*自动隐藏文字*/

text-overflow: ellipsis;/*文字隐藏后添加省略号*/

white-space: nowrap;/*强制不换行*/

width:150px;/*超过指定宽度时隐藏*/

}

或者直接在html中引用样式：

<style type="text/css">
.test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;}
</style>

<div class="test">CSS强制文字不换行对超出部分隐藏并显示省略号</div>

.test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;}

</style>

<div class="test">CSS强制文字不换行对超出部分隐藏并显示省略号</div>