【代码学习】五种实用的首页导航代码

                                  
一、文字式（简洁）
代码：

效果：健康生活┆时尚潮流┆

二、标签式
代码：

·题目

·题目

·题目

·题目

说明:
把自己日志中的地址和题目替换代码中的地址和题目，最多可加到2000个字符，然后填加到首页自定义模块里。
效果:
?题目
?题目
?题目
?题目

三、表格式1

---

我的日志导航

我的心情故事

两性之门

博客学堂

标题

标题

标题

标题

标题

标题

标题

标题

标题

---

说明:
1、width="33.3%"是横格，100%分成三份。如是四个横格，就是25%。以此类推。
2、height=20 每格的高度。将代码中的“地址”和“标题”换成自己文章的地址和标题。

---

是上下蓝色条代码，可换上自己喜欢的颜色。
3、Color=#ffffcc 颜色可调。
4、如想增加表格 按上面代码的规律可继续填加。
效果：
我的日志导航
标题 标题 标题
标题 标题 标题
标题 标题标题
 
四、表格式2
代码：

你的文字	你的文字	你的文字
你的文字	你的文字	你的文字
你的文字	你的文字	你的文字
你的文字	你的文字	你的文字
你的文字	你的文字	你的文字
你的文字	你的文字	你的文字

效果：你的文字你的文字你的文字
你的文字 你的文字 你的文字
你的文字 你的文字 你的文字
你的文字 你的文字 你的文字
你的文字 你的文字 你的文字
你的文字 你的文字 你的文字
 
五、图片导航类
三列代码：

此处是导航的名称

此处是导航的名称

此处是导航的名称

两列代码：

想我不相忘的收藏

开怀大笑

说明：
1、导航地址即是你的日志地址。必须去日志后的/edit/，否则就答非所问了。
2、borderColor是图片外框线颜色，可调。
3、bgColor是背景颜色，可调。
4、color=#ff0000是字体颜色，可调。
5、width="80%是边框大小，可以根据自己模块大小调节。
6、从美观的角度看，其余的项目可以不用调。
效果：
收藏

开怀大笑
★彩色边框代码★日志文字
它会在你的文字外围生成一个红色边框，效果如框内显示。 border-style则控制边框的效果 border-width控制边框的粗细， border-color调整边框的颜色，这里你仍然可以使用如#xxxxxx的颜色数值，而当使用“solid”则为单一颜色的线形简单边框。实线
★双线框代码★文字
效果如框内，是带背景色（熏衣草色）的简单双线框。文字
显示的效果是背景色为桃色的简单双线框。效果如框内所示，边框的颜色是橙红色#ff4500，框内背景色为桃色#ffdab9。文字
显示的效果是背景色为NAVAJO白的简单双线框。效果如框内所示，边框的颜色是橙红色#ff4500，框内背景色为桃色#ffdead。文字
背景颜色为淡黄色#FFFFE0，效果如框内所示。文字
这种双线框的效果有若隐若现的感觉，框的颜色是淡珊瑚色#f08080，框内背景的颜色是NAVAJO白#FFdead。效果如框内所示。文字
这种双线框的效果有若隐若现的感觉，框的颜色是淡珊瑚色#f08080，框内背景的颜色是淡黄色#FFFFE0。效果如框内所示。 ★立体线框代码★文字
效果如框内所示，是带背景色（熏衣草色）的浮出立体线框，代码中的#E6E6FA是背景的颜色（熏衣草色）文字
背景为粉红色，效果如框内所示。文字
背景为桃色，效果如框内所示。立体效果的彩色边框是在border-style后面使用不同的语法描述： Solid 简单线形边框 Double 简单双线边框 Groove 沟线立体效果边框 Ridge 脊线立体效果边框 Inset 嵌入线立体效果边框 Outset 浮出线立体效果边框。通过定制边框的方法再将上一教程添加色彩的语法嵌套其中，你就可以创造出具有立体效果的彩色日志背景。如：日志文字
使用上述语法将会为你呈现一个NAVAJO白底色红边框的浮出线效果背景，效果如框内显示。日志文字
显示的效果是背景色为桃色的立体线框。效果如框内所示，框内背景色为桃色#ffdab9。对于背景边框的四个边你也可以按自己的需要进行调整，以左边框为例，你可以使用下述语法： Border-left-style:solid (double, groove, ridge, inset, outset)定制边框样式 Border-left-color: #xxxxxx定制边框颜色 Border-left-width: xpt 定制边框粗细 其他三个边框只要分别使用Right, Top, Bottom就可以了。将下面的语法放到你的日志中预览一下，看一看是什么效果：（效果这里就不给出来了，有兴趣的可以回去试一下。）你可以按照自己的想法随意调整四个边框的式样，以便创造与众不同的效果，记住一点，不同的属性描述之间用 ; 隔开。另外，你可能会注意到，当你设置完边框返回到日志文本编辑模式，在键入文字过程中如果使用回车键，就会又出现一个边框，从而影响文字的连贯性，这是因为HTML语法中不支持硬回车。要解决这个问题，必须返回到HTML编辑模式，在需要回车的地方键入
，需要几次回车就键入几个
，然后再返回到文本编辑模式，你就会发现边框背景内已经为你加入了回车后的效果。 ★滚动文本框代码★ 把代码拷贝后可直接双击文本框就可以在里面输入文字和粘贴图片，而且文本框的大小可以随意调整。日志文字
代码实现的文本框是浅黄色的背景，粗略效果如文本框内所示。（注释：附语法语句的解释： //层开始标记，对中对齐 :日志文字
★文字竖排代码★ 接下来说说文字竖排是如何实现的。
日志文字
这个语法中唯一的亮点就是Writing-Mode这个参数，其后的tb代表文字排列从上到下，rl代表从右到左。效果如下所示： ************************************************************************* 基本上文字竖排是没有任何作用的，但为了实践一下，还是把效果贴出来给各位参考吧！~：） ★实线、双线、外凸、虚线代码★ 美化您的网络日志－强调显示 ... style="BACKGROUND-COLOR:#FF00000：底色－红色 color="#FFFFFF"：文字颜色－白色 是该面对自己的时候了，一直逃避也不是办法。 美化您的网络日志－加线框...
1px：框线宽度－ 1 点 dashed：框线式样－虚线 #000000：框线式样－黑色 background-color:#FFFFE0：背景颜色－淡黄 　可是　有时候　寂寞如海啸般袭来　令人窒息　无处可躲　　　深陷孤单的深渊中　无助　无力　只剩寒冷　黑暗　　一个人承担　一个人等待阳光…实线
外凸
双线
虚线
文字
效果是框线颜色为淡珊瑚色#f08080，宽度为1，背景色为桃色#ffdab9的虚线框。文字
效果是框线颜色为橙红色#ff4500，宽度为3，背景色为桃色#ffdab9的虚线框。文字
效果是框线颜色为淡珊瑚色#f08080，宽度为3，背景色为淡黄色#FFFFE0的虚线框。实线
效果是框线宽度为3颜色为桃色#ffdab9，背景色为淡黄色#FFFFE0的实线框。外凸
背景色为淡黄色的外凸效果 再补充几个分行分列的 (这里可放入图片、文字、播放器等) (内容) (内容) (这里可放入图片、文字、播放器等) (这里可放入图片、文字、播放器等) (内容) (内容) (这里可放入图片、文字、播放器等)
(这里可放入图片、文字、播放器等) (内容) (内容) (这里可放入图片、文字、播放器等) (这里可放入图片、文字、播放器等) (内容) (内容) (这里可放入图片、文字、播放器等)
以上代码分解：表格WIDTH:宽度450 HEIGHT高度250 borderColor=#000000黑色边框线(本来在内侧还有一条细线，这系统不显) cellSpacing=2粗线与细线的距离 cellPadding=3边框与内容的边距(现在没内容，所以暂时不能体现) bgColor=#b3f7b3内腔颜色 border=5边框线粗细 这些咚咚就叫属性，其中属值(数值)可自定义调整。OK！就这么简单。古朴背景制作方法：１.右键点下面边框中自己喜欢的小图片，点属性，取得图片地址gif格式２.进入编辑后台，在＂查看ＨＴＭＬ源代码＂前的小方块里打勾，把下面的边框模板代码全部复制粘贴进去．３.用取得的gif地址替换代码中红色的原图片地址．４.把＂查看ＨＴＭＬ源代码＂前的小方块里的勾去掉，一个简约古朴的边框就做成了，你可以在里面添加文字和音乐了． 边框模板代码1：

完 边框模板代码2：

标题

■ 文/
正文