打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
HTML学习笔记★日志加线框背景色
HTML学习笔记★日志加线框背景色
吉祥如意988编辑
撰写日志时将文字、图片、动画、音乐组合,如果添加日志线框和背景色,阅读时令人赏心悦目。
运用代码和编辑器为日志加框线和背景色能得到意想不到的效果。
文字内容
代码:
<div style="border: 1px dashed #000000;background-color:#FFFFE0"> 文字内容</div>
代码解析:
border: 1px dashed #000000   线框的宽度、虚线、颜色
background-color:#FFFFE0     背景的颜色
当从“代码编辑”去除勾选到“页面编辑”查看后,再次勾选“代码编辑”时,编辑器自动将上述代码转换为:
<DIV style="BORDER-RIGHT: #000000 1px dashed; BORDER-TOP: #000000 1px dashed; BORDER-LEFT: #000000 1px dashed; BORDER-BOTTOM: #000000 1px dashed; BACKGROUND-COLOR: #ffffe0">文字内容</DIV>
转换后增加的代码解析:
BORDER-RIGHT: #000000 1px dashed 右边线框的颜色、宽度、虚线
TOP 顶部、LEFT 左边、BOTTOM 底部
◆边框线样式可选:
dotted=点虚线型  dashed=线虚线型  solid=实线型       double=双线型
groove=沟槽状     ridge=3D脊状        inset=3D内嵌式  outset=3D外嵌式
在页面编辑时每按一次“回车”,自动加一行(第二段),如下图:
文字内容
以上第一段的底部和第二段的顶部重合,为美观第二段的TOP的宽度修改为0px。
如下图:
文字内容
以后,编辑时当按“回车”,自动加一行(第n段),且该段的TOP也自动修改为0px。
如下图:
文字内容(第一段)
文字内容(第二段)
文字内容(第n段)
上述示例加了各段的背景色,参考代码如下:
<DIV style="BORDER-RIGHT: #000000 1px dashed; BORDER-TOP: #000000 1px dashed; BORDER-LEFT: #000000 1px dashed; BORDER-BOTTOM: #000000 1px dashed; BACKGROUND-COLOR: #ffffe0">文字内容(第一段)</DIV>
<DIV style="BORDER-RIGHT: #000000 1px dashed; BORDER-TOP: #000000 0px dashed; BORDER-LEFT: #000000 1px dashed; BORDER-BOTTOM: #000000 1px dashed; BACKGROUND-COLOR: #eeeee0">文字内容(第二段)</DIV>
<DIV style="BORDER-RIGHT: #000000 1px dashed; BORDER-TOP: #000000 0px dashed; BORDER-LEFT: #000000 1px dashed; BORDER-BOTTOM: #000000 1px dashed; BACKGROUND-COLOR: #dddde1">文字内容(第n段)</DIV>
http://jxry988.360doc.com 吉祥如意988-360doc个人图书馆
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
常用代码全包括,全全全!!! - 主页交流论坛 - 育儿论坛 - 育儿网
立体彩色边框代码之制作闪动边框的代码
日志的外围边框
【博客教程】多款虚线框代码及如何制作虚线框
日志边框代码
网易留言贴图的代码和方法
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服