× 886字 × 2阅

文字加边框

本来Cyan童鞋想做个公告框一样的东西放在首页上,效果大概像这样:

走自己的路难免会崴脚。

于是Cyan就谷搜了给文字加边框的方法,竟然不是件容易的差事!Cyan震惊了,于是决定记笔记。
(最近更博忒勤快,到了更博发春期了呀。)

| 最先找到的是一种比较简单的给文字加边框加背景的方法。之前Cyan在玩msn space的时候有涉及过,还依稀记得这种方法与直接高亮文字的差别。那么先介绍下这个方法。以下内容参考自给文字加边框的代码 | 阿秋的BLOG

走自己的路难免会崴脚。

以上文字边框代码如下:

<p style="text-align:center;background-color: #eeeeee; border: 1px solid #dddddd;">
走自己的路难免会崴脚。</p>

通式:

<p style="text-align: 文字排列; background-color: 背景颜色; border: 边框粗细 边框形态 边框颜色;">文字内容</p>

解释:
文字排列:居左-left | 居中-center | 居右-right,默认居左
背景颜色:填对应颜色代码
边框粗细:填数字,如1px,2px等等
边框形态:实线-solid | 虚线-dashed | 点线-dotted | 双线-double
边框颜色:填对应颜色代码

例:

实线
<div style="text-align:center;background-color: #eeeeee; border: 1px solid #000;">实线</div>
虚线
<div style="text-align:center;background-color: #eeeeee; border: 1px dashed #000;">虚线</div>
点线
<div style="text-align:center;background-color: #eeeeee; border: 1px dotted #000;">点线</div>
双线
<div style="text-align:center;background-color: #eeeeee; border: 3px double #000;">双线</div>

另外还有一种样式,不能用通式解,就单独放出来:

外凸
<div style="text-align:center; border-style: outset; border-width: 1px;">外凸</div>

| 上面的方法简单易懂,但是对于Cyan有个致命伤,就是没法自定义宽度(Cyan找不到Cyan不会Cyan傻),所以Cyan继续努力找到了一个复杂点的,同时功能也更强大的方法。最后的效果就如开头所述一样,代码如下:

走自己的路难免会崴脚。
<div align="center">
<table cellspacing="0" style="background-color: #eeeeee; border: 1px solid #dddddd;">
<tbody>
<tr>
<td>走自己的路难免会崴脚。</td>
</tr>
</tbody>
</table>
</div>

基本格式就是 <table><tbody><tr><td></td></tr></tbody></table>。如果想表中表,就把这行代码复制插入 <td></td> 之间。具体可参见怎样用代码做外边框和内边框 | 佳恒博客


2013-7-2补充:现在回头看以前这些问题才意识到两年间我还是有些进步的。

其实就是 css 中的边框属性,具体可见 w3cschools,不同线型效果测试
除了 outset,当然还有 inset。

而自定义宽度不需要用到表格,css 也能解决:

走自己的路难免会崴脚。
<div style="text-align:center; width:300px;background-color:#eee;border:1px solid #ddd;">走自己的路难免会崴脚。</div>

继续努力吧!

之前Cyan删掉了自己的旧帐户,因为注册了一个新帐户。结果发现有个博客关联着旧帐户,现在拯救不出来。谷歌了一下发现谷歌的特殊癖好:删除的帐户名不再开放注册。网上很多说法,有人说好有人说太不人性化。不过Cyan无所谓,只是想着为什么没有个恢复帐户的期限,比如yahoo帐户删除XX天内就能恢复。谷歌也有自己的道理吧。而且毕竟是Cyan自己选择义无反顾地删除了帐户。 为了拯救出旧帐户,Cyan做了很多工作,在谷歌论坛里也浸泡了好久,最后找到的唯一方法是发送表单给谷歌,让他们的工作人员鉴定是否能把这个帐户给你。虽然这种方法成功率极低(特别是在帐户主对自己帐户不甚了解的情况下),但也算“申诉有门”。 来这里填写表单。(链接失效,请联系谷歌帮助。)这时候你才发现“好记性不如烂笔头”。Cyan昨天尽量详尽地填了一份,今天得到的回复,看完以后Cyan就只想用仨字表达:很遗憾。同时,这也提高了Cyan的......
点击加载Disqus评论