设为首页  
联系我们  
加入收藏  
网页制作 冲浪宝典 图形图像 操作系统 软件教学 编程开发 认证考试 安全技术 站长专区 文学驿站 娱乐天地 游戏天地 办公软件
文章搜索
您的位置: 首页 >> 文章首页 >> 网页制作 >> HTML >> 用HTML和CSS写出漂亮正规的BLOG
精品推荐
HTML点击TOP10
·网页初学者的参考:HTML标记手册
·html教学+HTML语法大全
·打印网页的html代码
·HTML标记大全参考手册
·设为首页-加入收藏-联系我们的代码
·新浪首页全屏显示广告代码
·HTML的表单
·页面两侧对联广告代码效果
·HTML网页制作基础教程(1):认识HTML
·HTML中DOCTYPE的定义及用法
网页制作点击TOP10
·菜鸟架设动网论坛全教程
·网页模板的使用方法 (教程)
·网页对联广告代码效果大全
·用JavaScript实现文件图片滚动效果
·常用CSS大全
·天极网软件频道的用JS实现的图片切换特效
·网页排版CSS教学
·初学者入门:如何学习网页制作?
·图片循环滚动完美解决
·如何做才能成为一名优秀的网页设计师
精选专题

用HTML和CSS写出漂亮正规的BLOG

作者: 来源:http://www.xgdown.com/ 时间:2007-8-16 13:15:10

用HTML和CSS写出漂亮正规的BLOG(1) 正确使用a标签

超链接是blog中用的最多的html标签,它用来链接到其他的文章或者站点链接,建议大家用a标签时将下列属性都添加上:

href:设置链接的url地址或锚点
target:设置鼠标点击链接后的目标窗口或框架页面,一般常用的是target="_blank",表示新开一个窗口打开链接,向在当前页面打开链接就不用加这个属性了
title:设置鼠标移动到链接上时显示的提示信息
rel:这个是最近才开始流行的新属性。rel="nofollow"表示禁止搜索引擎从这个站点链接过去而造成链接网址的pagerank值变化,常用来防止spam link;rel="tag"这是为technorati设置让其以这个链接的文字作为该页面的tag标记
示例:<a href=http://www.xgdown.com/ target="_blank" title="星光下载" rel="nofollow">星光下载</a>
显示:星光下载

文章中的链接不可过多,太多的链接会让读者阅读时有压抑感和紧张感,如果链接的颜色和文本颜色反差过大,也会让人看起来有眼花缭乱的感觉。最好的链接效果是淡淡的颜色反差或加上下划线,并填写title属性,标明这个链接的内容是什么或者为什么要链接。有时候也可以在文章末尾列表的方式附上本文相关的链接并加以注释。

养成文章分段的好习惯

写blog不可能像古龙小说那样一句话一个段落,所以按照学生时代老师所教的写作风格写blog是毫无争议的。建议用p标签给文章分段,代码如是:<p>文章正文</p>。
值得一提的是很多blogger都没有首行缩进的习惯,有的最多也是在编辑器下敲几个空格,这里给出用CSS技巧">CSS的text-indent属性实现的首行缩进代码:<p style="text-indent:2em;">文章正文</p>,缩进单位我用的2em,表示两个汉字,勿用百分比或者px,pt等其他单位长度,用em可以在页面字体和版式缩放的情况下保持两个汉字的缩进。
对于一些喜欢在文章中挂上图片的blogger在这里我推荐用img标签的align属性设置为left或right就可以轻松实现图片的悬挂和正文的绕排。也可以用div标签的float属性来进行左右的悬挂实现文字环绕,更棒的是可以实现如Google Adsense广告的左右悬挂,代码:<div style="height:100%;width:150px;float:right;">这里可以放图片链接,或者像国外的blog那样放入google adsense代码</div>。实现效果见本文中的Google广告。

用list进行列表,用line-height设置行高

用样式表list的<ul><ol><li>等标签进行一些子标题条目的罗列,代码:<ul><li>问题一</li><li>问题二</li></ul>
正文字体大小可按个人喜爱设置,我一般用的是blog系统默认的(13pt, 宋体和courier new),如果正文需要一段大字体时而你的文字出现过大而堆砌,可在段落的<p>上加上样式:line-height:120%;这表示行高是字体的1.2倍

超长正文的排版技巧

虽然我们在写blog时都知道文章最好是短小精悍为佳,但也避免不了一些特殊性质的文章需要长篇幅,这个时候建议你用<h1><h2>...<h6>等不同级别设置子标题,并且在文章顶部用<dir><dl><dt><dd>这四个定义列表标签,显示的效果就如同Word中的目录/索引那种样式,这样可增加文章的阅读性和条理性,微软的MSDN里的很多文章都是这样进行编排。要想实现链接跳转功能可用<a name="">这个锚点标签修饰具体的子标题实现,代码:<a name="list1"><h1>标题一</h1></a>

共2页 9 7 [1] [28 :>

用HTML和CSS写出漂亮正规的BLOG 相关文章:
用HTML和CSS写出漂亮正规的BLOG 相关软件:
特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
转载请注明来源:http://www.xgdown.com