抹杀
网易部落html编辑文本进阶技巧…zt
| 发表日期：2008-08-21 | 摄影器材： | 点击数：… 投票数：… |
相信不少板油已经发现，网易部落对HTML语言具有相当强大的支持能力…虽然处理日志时，个人主页只提供给我们简单的几个文字处理功能…但如果你在写日志时选择html编辑文本，那么您的日志将大不同…通过对文本一定的代码处理，编辑完毕后选择“设计”预览一下，你会惊奇的发现原来我们的日志可以如此的绚烂多彩…可以根据个人的喜好任意编辑文本…能让浏览您日志的网友更好的体会您写日志的心情…提供一个让人轻松漂亮的阅读环境是对他人的尊重哈…下面我们就言归正题吧……
先张贴一下编辑文本必备的颜色代码：
1 白色 #FFFFFF 2 红色 #FF0000 3 绿色 #00FF00 4 蓝色 #0000FF
5 牡丹红 #FF00FF 6 青色 #00FFFF 7 黄色 #FFFF00 8 黑色 #000000
9 海蓝 #70DB93 10 巧克力色 #5C3317 11 蓝紫色 #9F5F9F 12 黄铜色 #B5A642
13 亮金色 #D9D919 14 棕色 #A67D3D 15 青铜色 #8C7853 16 2号青铜色 #A67D3D
17 士官服蓝色#5F9F9F 18 冷铜色 #D98719 19 铜色 #B87333 20 珊瑚红 #FF7F00
21 紫蓝色 #42426F 22 深棕 #5C4033 23 深绿 #2F4F2F 24 深铜绿色 #4A766E
25 深橄榄绿 #4F4F2F 26 深兰花色 #9932CD 27 深紫色 #871F78 28 深石板蓝 #6B238E
29 深铅灰色 #2F4F4F 30 深棕褐色 #97694F 32 深绿松石色 #7093DB 33 暗木色 #855E42
34 淡灰色 #545454 35 土灰玫瑰红色#856363 36 长石色 #D19275 37 火砖色 #8E2323
38 森林绿 #238E23 39 金色 #CD7F32 40 鲜黄色 #DBDB70 41 灰色 #C0C0C0
42 铜绿色 #527F76 43 青黄色 #93DB70 44 猎人绿 #215E21 45 印度红 #4E2F2F
46 土黄色 #9F9F5F 47 浅蓝色 #C0D9D9 48 浅灰色 #A8A8A8 49 浅钢蓝色 #8F8FBD
59 浅木色 #E9C2A6 60 石灰绿色 #32CD32 61 桔黄色 #E47833 62 褐红色 #8E236B
63 中海蓝色 #32CD99 64 中蓝色 #3232CD 65 中森林绿 #6B8E23 66 中鲜黄色 #EAEAAE
67 中兰花色 #9370DB 68 中海绿色 #426F42 69 中石板蓝色#7F00FF 70 中春绿色 #7FFF00
71 中绿松石色 #70DBDB 72 中紫红色 #DB7093 73 中木色 #A68064 74 深藏青色 #2F2F4F
75 海军蓝 #23238E 76 霓虹篮 #4D4DFF 77 霓虹粉红 #FF6EC7 78 新深藏青色#00009C
79 新棕褐色 #EBC79E 80 暗金黄色 #CFB53B 81 橙色 #FF7F00 82 橙红色 #FF2400
83 淡紫色 #DB70DB 84 浅绿色 #8FBC8F 85 粉红色 #BC8F8F 86 李子色 #EAADEA
87 石英色 #D9D9F3 88 艳蓝色 #5959AB 89 鲑鱼色 #6F4242 90 猩红色 #BC1717
91 海绿色 #238E68 92 半甜巧克力色#6B4226 93 赭色 #8E6B23 94 银色 #E6E8FA
95 天蓝 #3299CC 96 石板蓝 #007FFF 97 艳粉红色 #FF1CAE 98 春绿色 #00FF7F
99 钢蓝色 #236B8E 100亮天蓝色 #38B0DE 101棕褐色 #DB9370 102紫红色 #D8BFD8
103石板蓝色 #ADEAEA 104浓深棕色 #5C4033 105淡浅灰色 #CDCDCD 106紫罗兰色 #4F2F4F
107紫罗兰红色 #CC3299 108麦黄色 #D8D8BF 109黄绿色 #99CC32
如果想自定义配色请☞进入： 自动配色
再添加一些可爱的图标，凭个人喜好可以添加进日志的文本或者标题…
ⓛⓞⓥⓔ ╬ 『 』∴ ☀ ｡◕‿◕｡ ♫ ♬ ♩ ♭ ♪ ☆ ∷ ﹌ の ★ ◎ ▶☺ ☻ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ↘ ☼ ▀ ▄ █ ▌░ ▒ ▬ ♦ ◊ ◦ ♠ ♣ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ☆♂♀ ♥ ♡ ☜ ☞ ☎ ☏ ⊙ ✎ ˉˇ¨〃々「」『』〖〗【】±＋－×÷∧∨∑∏∪∩∈√⊥∥∠⌒⊙∫∮≡≌≈∽∝≠≮≯≤≥∞ ℃ ＄ ¤ ￠￡‰§№☆ ★ 〇 ○●◎◇◆ 回 □ ■△▽⊿▲▼◣◤◢◥▁ ▂ ▃ ▄ ▅ ▆ ▇ █ ▉ ™
←→↘↙〓┣┓┏┫×╰ノ◢◣◥◤ΩжфюЮ━╃╄━卍┛┗【】¤∞㊝≡✖™乀♈◖◗♋Café灬⺌⺗≈◈Шǎˇиζ￡℡❣·•●∈⊹⊱⋛⋋⋌⋚⊰⊹彡◕‿◕✌✍✡✓✔✕べòべあ〠〄╬ⓛⓞⓥⓔ╬『 』ღ㊀㊁㊂㊃㊄㊅﹌⺻;⺻*.:｡✿*ﾟ’ﾟ･✿✐❉✪εo✗✘✚✪✣✤
☆︷☜❤☞♥♡☎☏☺☻♨☼♭♪の￡❤♂♀♠♣•♪♬♧→∴∷〓×〖ஐ✲❈✿✲➹◕‿-｡☀oO＃ψ▓►◄√╮╭╯╰ァ┱┲★♫♭♪▶△▲γō凸∩∪╦╩⊙◎▀▁▂▃▄▅▆▇█┋︻︼¤▽ㄒ︶︿ε＞＜┘┌∵︹︺₪☃☄☇☈☉☊✥✦✧✩✫✬✭✚✪✣✤✥✦❉❦❧❃❂❁❀✄
☋☌☍☑☒☢☸☹☺☻☼☽☾♠♢♣♤♦♧♨♩✙✈✉✌✁✎✐❀✰❁❤❥❦❧➳➽〠〄㍿♝♞➳➴➵㊚㊛℗♯♩♮☎☪❉❊❋❖⓪①②③④⑤⑥▧▨♨◐◑↔↕▫☼♦░▒▬♦◊◦☼♠♣▣▤▥▦▩◘◙➸❝❞☁Þ✱௫μo(‧'''‧)oべòべあぃ╋ω㊣§■ΘIし↑↓✱✲✳❃❂❁
发表日志前请进入自己的个人主页点击“发表文章”进行…如下图：
好咯…我们可以随心的编辑我们的文本了哈…
第一章 缤纷色彩背景
部落其实提供非我们一个“背景色”按钮…但为了使我们的日志文本更具冲击力，我们还是有个代码来实现的…让日志随我们的心情而变换不同的色彩吧……
输入文本
在上面的语句
和
之间试着打几个字，然后点击“设计”按钮，可以看到日志的背景颜色已经改变。当你想更改不同色彩的时候，只需将#990000这个颜色编码的数值加以调整就行了…可以参考上面的色卡，也可以进入上面的自动配色在HTML编辑状态你会发现，处理起文字来可是有些困难，当然对高手来说，区区几个语句就能解决问题，但我们普通大众可没这本事和耐心。怎么办？很好办！重新起用“设计”按钮，即取消HTML语法编辑状态就可以了。这时你会发现，我们重新进入了文本编辑模式，但这里已不是一片空白，而是多了一个色彩背景，在色彩背景内对文字的编辑就是轻车熟路了……一个色彩还不够丰富，我想要五颜六色的生活!没问题…重新回到HTML语法编辑状态，在你想使用其他色彩的文字前再加入上面HTML语句，然后调整色彩值。这里还需注意两点：一是仍然注意要把文字部分嵌套在上述语句中，二是为达到最佳效果必须调整提供不同色彩的HTML语句中的高度比值，至于什么值比较合适，就得根据文字内容的长短了，你可以边调整…边预览之……
第二章 立体彩色边框
拥有了缤纷色彩背景的日志显得生动活泼了许多哈…那现在我们让日志更加活泼一点…编辑文本日志时我们也可以采用立体彩色边框代码，因其涉及到的CSS边框属性语法是以后制作立体效果边框的基础形式…记住下面这段语法哦…
它会在你的日志文字外生成一个红色边框，border-width控制边框的粗细，border-color调整边框的颜色…而border-style则控制边框的效果，当使用“solid”则为单一颜色的线形简单边框…如果自己想调整颜色…就按照上面的方法做…我就不重复了哈……
接下来我们再将上述语法扩展一下，就可以获得具有立体效果的彩色边框。那么从何下手呢？其实就是在border-style后面使用不同的语法描述:
Solid 简单线形边框 Double 简单双线边框 Groove 沟线立体效果边框 Ridge 脊线立体效果边框 Inset 嵌入线立体效果边框 Outset 浮出线立体效果边框
通过定制边框的方法再将上一教程添加色彩的语法嵌套其中，你就可以创造出具有立体效果的彩色日志背景。
例如：
使用上述语法将会为你呈现一个黄底色红边框的浮出线效果背景，其实上述语法还有其他形式的简化写法，这里不再赘述…只采用上述较直接易理解形式……
对于背景边框的四个边你也可以按自己的需要进行调整，以左边框为例，你可以使用下述语法：
Border-left-style:solid (double, groove, ridge, inset, outset)定制边框样式
Border-left-color: #xxxxxx定制边框颜色
Border-left-width: xpt 定制边框粗细
其他三个边框只要分别使用Right, Top, Bottom就可以了。将下面的语法放到你的日志中预览一下，看一看是什么效果：
展示效果： 你可以按照自己的想法随意调整四个边框的式样，以便创造与众不同的效果，记住一点，不同的属性描述之间用 ; 隔开。值得注意的是你可能会注意到，当你设置完边框返回到日志文本“设计”编辑模式，在键入文字过程中如果使用回车键，就会又出现一个边框，从而影响文字的连贯性，很不美观…别怕哈…这是因为HTML语法中不支持硬回车…解决很简单，返回到HTML编辑模式，在需要回车的地方键入 ，一个 等于两个 第三章 添加背景音乐 其实背景音乐的添加还是很简单的…有多种语法能够实现…我就不多介绍了…记住下面这个语句，由于载入音频文件需要时间，再您第一次打开日志后需要一定时间的加载…所以请大家最好选择较小的wma格式…放弃mp3格式… 这段语法唯一需要你更改的就是Loop，它控制着循环播放的次数，当为infinite时是无限循环，为0时是不循环，其他循环次数只需键入相应数字即可…你想播放几次就几次哈…是不是很简单呀…要注意的是音频的地址一般都是容易更改的（除非您有自己的存放空间），如果有一天您听不到音乐了，可能是你选择的wma已经更改，很简单呀，那就重新找一首您喜爱的歌曲…替换一下面的地址即可…咔咔…… 第四章 添加视频流媒体 也很简单呀…和第三章一样很简洁的语法，如下： IMG后的Height和Width分别控制视频画面的高度和宽度，你可以根据需要自行调整，如果这里你都设置成0的话，那么就只有音乐看不到图像，这也等同于插入背景音乐的效果。Loop控制循环次数… 对于页面中视频位置的控制，可通过加入下述语法实现视频与文字的完美结合。如下： align=left 文字置于视频的右边，并与其紧密结合 这里关键是流媒体文件的获取，正常的流媒体文件以asf，wmv，或mov等为后缀，这是最直接的形式；也有以asx为后缀的，这种文件格式隐藏了流媒体的真正地址，但没有关系，你一样可以将带有asx后缀的链接放到你的语法中。目前网上多数流媒体文件都隐藏了其链接，很难通过直接的方法来查看，有关这方面的破解技巧网上多有提供，大家可以试试…… 第五章 添加计数器和QQ在线交流指示器以及MSN在线交流指示器… 计数器和QQ在线交流指示器是两个比较叫实用的工具…前者你可以了解自己的blog 受欢迎程度…后者又为来访者提供了你目前IM的在线信息，方便与您及时联系。很遗憾popo未能支持在线交流工具…希望popo部门及时跟进…… 先说计数器吧…提供这种服务的网站很多…在搜索引擎中键入“Free Web Counter”会查找到很多结果，向大家推荐http://www.amazingcounters.com/。这个网站提供350多种计数器，款式繁杂，花色多样，童叟无欺……绝对满足你的需要……申请时需要注册…过程很简单，一般只需要提供少量的个人信息即可。注册成功后你就可以选择心仪的计数器了，然后再输入你个人网站的信息，你将获得一段在线生成的HTML页面代码。某些网站还会提供给你简单的在线编辑功能，让你进一步对计数器的外观作简单的修改，以更好的适合你的需要。将获取的代码拷贝…然后转到你需要插入计数器的部落日志里面，还是按照html按钮输入那段代码…再选择“设计”预览…调整一下计数器的位置…发表日志就ok了…当然您也可以把计数器安装在您的个人介绍下面…象我的如图： 如果你想获得有关你的空间流量的具体信息，诸如单位时间内的访问量，来访者停留时间，来访者IP及所在国家等等众多专业统计结果，上述网站就不能满足你的需要了。推荐你到这个网站申请此项服务：http://www.statcounter.com/，它提供了极其强大且稳定可靠的统计功能，几乎面面俱到（至少对于我们这个水平是足够了），而且众多信息均以图形或表格的方式予以呈现，直观明了（Tucow五星推荐）。所有这些服务均为免费，除非你的月访问量超过20万。唯一的缺点就是提供的计数器样式过于简单，可供选择的余地也不大。。它的申请过程很简单，成功后会先让你选择计数器样式（你可以进行简单的定值），然后设定某些参数，诸如通过Cookie功能将你自己的登陆排除在统计数字之外等，之后你可以在Install Code页面获取HTML代码，需要注意的是，它会为不同类型的页面生成不同的代码，因此你要在“Statcounter Code Option”里选择“Html Only Code”，通过这个命令生成的代码才可用于网易部落，获取代码后的操作就和上面已降解的方式一样了。由于是海外的服务商，所以页面信息全部是英文，这对于不谙E文的朋友可能有些麻烦… MSN在线交流指示器，到下面这个网站http://snind.gotdns.com:8080/ 在“Messenger”下拉菜单里选择MSN，当然如果你有Yahoo，或AOL等提供的及时通讯工具，也可以为其申请相应的指示器。输入你的MSN Messenger用户名，网站很快会为你生成一段代码，这段代码显示的是一个图标，通过其颜色的变化来显示你的Messenger的不同状态，直接将此代码按上述方法添加到日志中就可以了。有两个问题需要注意：该状态指示不会实时更新，它显示的状态是访问者登陆你的空间时你的在线状态，如果你在此期间上线或离线，指示器不会实时同步做出反应，除非刷新页面才会看出变化。另外显示的状态和真实状态可能会有稍许延迟，但不严重。还有一种情况也可能会发生，就是服务商的Server关机，那么指示器就无法正确显示任何状态了… QQ在线交流指示器也很简单，代码如下： http://wpa.qq.com/msgrd?V=1&Uin=8779558&Site=kimiblog&Menu=yes" target=blank> 替换一下当中的QQ号码即可……展示如下： 第六章 文字效果及卷轴滚动文本框以及文字竖排 光晕效果代码很多，我也不多介绍了，随便搜索一下就一大把…下面这些是kimi常用的代码… color=#ff6600为颜色代码，可以自行修改。 ☞例：：color=#FF00FF的效果如下：灯笼海棠红 ☞例：color=#FF0000的效果如下：纯红 8：阴影、发光、模糊的代码： kimi阴影字体常用…… ……欢迎光临kimiblog…… 卷轴滚动文本框，有时候我们的日志文本内容太多，为了不占用太多空间，就可以采用卷轴滚动文本框，告诉大家两种格式，当然您可以根据自己的喜好调整卷轴滚动文本框的颜色大小等等哈…… 常用卷轴：
，需要几次回车就键入几个
，也可以键入
…然后再返回到文本“设计”模式，你就会发现边框背景内已经是您想要的效果了哈……
align=right文字置于视频的右边，并与其紧密结合
align=top 文字队齐视频顶端
align=middle 文字队齐视频中部
align=bottom 文字队齐视频底端
http://wpa.qq.com/pa?p=1:8779558:1" width=74 border=0>
点击上面图标可以直接进入给我留言，不管我在不在线…当你的QQ登陆状态时上面的图标为亮色…反之则为暗色…也需要注意：该状态指示不会实时更新，它显示的状态是访问者登陆你的空间时你的在线状态，如果你在此期间上线或离线，指示器不会实时同步做出反应，除非刷新页面才会看出变化…显示的状态和真实状态可能会有稍许延迟，但不严重……
阴影： 阴影字体常用…… 发光： 输入文本 模糊： 输入文本
自定卷轴：
style='
color: #6B238E;
background-color: #FFFFFF;
border: solid 2px black;
width: 472px;
height: 300px;
overflow: scroll;
scrollbar-face-color: #6B238E;
scrollbar-shadow-color: #32CD32;
scrollbar-highlight-color: #70DBDB;
scrollbar-3dlight-color: #EAADEA;
scrollbar-darkshadow-color: #85989C;
scrollbar-track-color: #95A6AA;
scrollbar-arrow-color: #38B0DE;
'>输入文本
文字竖排可以起到意想不到的效果…代码如下：
临阶下马蹋人床
不通姓字粗豪甚
指点银瓶素酒尝.
代码
临阶下马蹋人床
不通姓字粗豪甚
指点银瓶素酒尝.
2, 利用writing-mode实现文字竖排
先看效果
马上谁家白面郎
临阶下马蹋人床
不通姓字粗豪甚
指点银瓶素酒尝.
代码:
马上谁家白面郎
临阶下马蹋人床
不通姓字粗豪甚
指点银瓶素酒尝.
背景日志…470*350…文本…400，让您的日志有张漂亮的脸蛋哈…代码如下…
http://img302.echo.cx/img302/7969/14lt.jpg" width=472 align=right>
输入文本
(opacity=100, finishOpacity=10,style=3); WIDTH: 472px; HEIGHT: 330px" 红色为替换背景图片地址… http://img144.echo.cx/img144/3981/longxia3mq.jpg 龙虾 http://img144.echo.cx/img144/8919/candou3ct.jpg 蚕豆 ========================================== 文本字与字之间距离控制…代码如下： Letter-spacing控制字母间的间距，对于中文就是字与字之间的间距，如果想实现英文单词之间间距的变化则使用word-spacing：；line-height控制行间距，无论编辑英文还是中文均使用此命令…… ============================================== 文字和图片位置设置： 左文本右图片 左图片右文本 如果上面图片需要弹出超链请用下面语法替代： http://bulo.163.com/-001F.html" target=_blank> 其中border=2代表为超链图片有无边框，0为无边框…数字越大，边框越明显…… 图片超链弹出替换格式替换如下： " target=_blank> 左文本右图片 =============================================== 对文本当中的某一短语或者短句进行强调代码如下： 所要强调的文本 注意：BACKGROUND-COLOR:#FF1CAE"底色 color="#FFFFFF"文本颜色 ======================================================= 回复版也就是象日记本一样的背景…大家可以试试哈，代码如下… 兰色为阴影色码…… ==================================== 1：单线框 2：上下双线框 ============================================================== 外虚线内嵌色加线文本提示框，对日志内容的某一段文字进行引用或者说强调…这个语法还是很常用的…代码如下： 效果： ==================================================== 图片超链 新窗口弹出超链 http://www.163.com" target="_blank">网易 http://photo.163.com/" target=_blank>http://photo.163.com/ 改变超链字体,颜色,大小 http://www.163.com"> ============================================= v 首字符放大下沉 【演示】 首字符放大下沉示例。首字符放大下沉示例。首字符放大下沉示例。首字符放大下沉示例。首字符放大下沉示例。首字符放大下沉示例。首字符放大下沉示例。首字符放大下沉示例。 【HTML代码】 ============================================== v 左侧滚动条 【演示】 这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。 这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。 这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。 【HTML代码】 这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。 这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。 这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。这是一个左侧滚动条的例子。 ==================================================== 我的日志文本分割图片： 常用分割图片： 运动足球分割图片： 绚丽草莓分割图片： 可爱橘子分割图片： 轻松音乐分割图片： 几张不错的搭配片片：
决定背景图片的大小……
决定文本文字的范围……
finishOpacity=10
决定背景图片边框的深浅
style=3
决定背景图片的颜色的深浅 http://img144.echo.cx/img144/8919/candou3ct.jpg" width=93 align="right">
关键就在于align="right" :图靠右 align="left" :图靠左http://img144.echo.cx/img144/8919/candou3ct.jpg" width=93 align="right">
http://img144.echo.cx/img144/3981/longxia3mq.jpg" width=93 align="left">
http://img144.echo.cx/img144/3981/longxia3mq.jpg" width=200 align=right border=2>
http://img144.echo.cx/img144/3981/longxia3mq.jpg" width=200 align=right border=2>
http://www.sohu.com">
首字符放大下沉示例。首字符放大下沉示例。首字符放大下沉示例。首字符放大下沉示例。首字符放大下沉示例。首字符放大下沉示例。首字符放大下沉示例。首字符放大下沉示例。
http://img250.echo.cx/img250/4030/popo3ra.gif" alt="Image Hosted by ImageShack.us" />
http://img152.echo.cx/img152/1839/19ez1.gif" alt="Image Hosted by ImageShack.us" />
http://img153.echo.cx/img153/2772/zuqiufenge6ey.gif" alt="Image Hosted by ImageShack.us" />
http://img153.echo.cx/img153/4494/caimeifenge3la.gif" alt="Image Hosted by ImageShack.us" />
http://img153.echo.cx/img153/1403/juzifenge3tj.gif" alt="Image Hosted by ImageShack.us" />
http://img153.echo.cx/img153/6807/yinyuefenge5ji.gif" alt="Image Hosted by ImageShack.us" />
http://img286.echo.cx/img286/2817/aixin5iu.gif" alt="Image Hosted by ImageShack.us" />
http://img286.echo.cx/img286/9689/liuxing7hl.gif" alt="Image Hosted by ImageShack.us" />
http://img286.echo.cx/img286/3447/lvye4si.gif" alt="Image Hosted by ImageShack.us" />
http://img286.echo.cx/img286/8946/mohuan9am.gif" alt="Image Hosted by ImageShack.us" />
http://img286.echo.cx/img286/5057/qiqiu4au.gif" alt="Image Hosted by ImageShack.us" />
http://img286.echo.cx/img286/8776/shenqi4nh.gif" alt="Image Hosted by ImageShack.us" />
好了，今天就先介绍上面的六个章节…时间有限…以后再继续添加…喜欢此类编辑日志的朋友随便看，大胆试哈……
下一篇：没有了
最 新：评论
访问空间
![http://images.sohu.com/logo1.gif">](http://images.sohu.com/logo1.gif"></a){kind=link}