转型为 CCS 教材的豆知识

1、从 WP 同步登陆 phpBB。
项目需求 WordPress 博客和 phpBB 论坛的用户单点登录，
实现方式是利用插件 PHPBB Single Sign On，但该插件作者已经很久没有更新。
经测试需要用旧的 3.0 版本的 phpBB，然后根据插件指引进一步设置。

2、以 jpg/png 格式保存 Google Play 上的图片。
Google Play 上的介绍图片采用了自家的 WebP 格式，
但用 Google Images 却能搜出不同分辨率的 jpg。
原来该图片地址以类似“=h900-rw”的方式结尾，
只要去掉“-rw”之后再右键保存则会是 jpg/png 了。
至于“h900”则是高度（h=height），对应“1440×900”的分辨率，
可按需调整，200 到 2000 都没问题。
如果改成“w800”，则会变成“800×600”，对应宽度（w=width）。

3、处理元素高度由固定值变为自动的切换动画。
由 CSS3 的 transition 设定高度（height）的动画效果时，
唯有当高度值为固定时，切换才有动画效果。
如果其中一个状态的高度设为自动（auto）时 transition 则无法生效。
解决方法是用 max-height 取代 height，然后把 max-height 设得足够大。
固定高度那一方的状态则可以把 min-height 和 max-height 设为相同来处理。

div{
    min-height:148px;
    max-height:148px;
    transition:max-height 2s;
    overflow:hidden;
}
div:hover{
    max-height:600px;
    transition:max-height 0.5s;
}

4、更改列表前缀颜色。
由 CSS3 的 list-style 可以修改列表（ul/li）的前缀样式，但无法调整颜色。
借由强大的 :after 选择器则可以随心所欲地创造自己所需要的任何前缀样式，
颜色这种基础属性自然不在话下。

ul{
    list-style: none;  /*取消前缀样式*/
    padding:0;
    margin:0;
}
 
li{
    list-style:none;
    padding-left: 1em; /*模拟换行缩进*/
    text-indent:-1em;  /*模拟换行缩进*/
}
 
li:before{ /*插入自定义样式*/
    content:"•";
    color:#CC0033;
    margin-right:10px;
}

5、CSS 中元素垂直对齐。
元素的水平对齐比较简单，一句“text-align:center;”就可以解决大部分问题，
实在不济“margin:0 auto;”也能帮上忙。
但垂直对齐就要麻烦多了，“vertical-align:middle;”基本靠不住，
这里倒是有个通用的技巧：

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* 兼容性考虑请加前缀 */
}

同理可以拓展到其它 position 方式，当然水平对齐也没问题。

6、用 Awesome Font 替代 checkbox
最难看的默认页面元素中，checkbox 绝对能排上前三名，同时它也是最难用 CSS 美化的。
“appearance:none”还不被大多数浏览器所兼容，结合 label 来操作便是一种技巧。

<input id="box1" type="checkbox" />
<label for="box1">Checkbox</label><!-- for 可以使 label 操作 checkbox -->

input[type=checkbox] {
    display:none;     /* 隐藏 checkbox 本身 */
}
 
input[type=checkbox] + label:before {
    content: "\f096"; /* 设置 square-o 的 Unicode 值 */
    font-family: FontAwesome; /* 将 label 的 ::before 设为 FontAwesome */
}
 
input[type=checkbox]:checked + label:before {
    content: "\f046"; /* 设置勾选状态下 check-square-o 的 Unicode 值 */
}

7、SSH 批量修改文件/夹属性。

find -type d -exec chmod 757 {} \;
find -not -type d -exec chmod 757 {} \;

8、固定宽度溢出文本隐藏

.text{
	max-width:100px;
	overflow:hidden;
	text-overflow:ellipsis; /* 隐藏文字显示为 … */
	white-space:nowrap;     /* 增加中文支持 */
}

值得注意的是，以上仅针对单行文字。
如果通过高度（height）控制行数，则中文不支持“text-overflow”。

9、控制表单中输入框的回车行为。

$("input").keypress(function(event) {
    if (event.which == 13) {    /* 回车的 js 键值（key code）*/
        event.preventDefault(); /* 阻止默认行为 */
        $("form").submit()      /* 提交表单 */
    }
});

10、表格行间插入可控制显示的内容。
在 W3C 标准中，表格（table）内无法直接嵌套除了行（tr）以外的内容，
那么我们常用的容器 div 就无法放在行与行之间来控制内容了。（IE9 以下可以接受 p）
一种方式则是将每行拆分为单独的表格，
另一种方式是根据需要插入额外行，并通过控制每行的类来进行操作。

<table>
	<tr><td>aaa</td><td>bbb</td><td class="show-extra">show</td><tr>              <!-- 数据行 -->
	<tr class="extra-item" style="display:none;"><td colspan="3">extra1</td></tr> <!-- 行间插入内容，默认不显示 -->
	<tr class="extra-item" style="display:none;"><td colspan="3">extra2</td></tr> <!-- 行间插入内容，默认不显示 -->
	<tr><td>aaa</td><td>bbb</td><td class="show-extra">show</td><tr>              <!-- 数据行 -->
</table>

<script>
$(".show-extra").click(function(){
	var now = $(this).parent();                /* 取到行 tr */
	while (now.next().hasClass("extra-item")){ /* 向下循环 */
		now = now.next();
		if(now.hasClass("extra-active")){
			now.removeClass("extra-active");
			now.hide();
		} else {
			now.addClass("extra-active");
			now.show();
		}
	}
});
</script>

【相关资料】
1、beans◃.myhealthyeatinghabits

【相关博文】

发表评论 取消回复

发表评论取消回复