转型为 CCS 教材的豆知识

beans

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

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

3、处理元素高度由固定值变为自动的切换动画
3 的 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、更改列表前缀颜色
3 的 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 绝对能排上前三名,同时它也是最难用 美化的。
“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

无觅相关文章插件,快速提升流量

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Time limit is exhausted. Please reload CAPTCHA.