网站公告列表     变态下载新版:http://down.biantai.net  [admin  2008年1月16日]        
加入收藏
设为首页
联系站长
站长学院 网页制作 网络编程 图形图象 数据库类 服务器类 操作系统
站长供求 网站交易 域名交易 程序交易 服务器空间 下载反馈 软件报错
网站运营 搜索优化 建站心得 业界新闻 网站推广 普通留言
精品源码 ASP源码 PHP源码 .NET源码 JSP源码 建站素材 建站书籍
软件下载 站长软件 常用软件 系统辅助 电影游戏 站长工具 QQ素材站
字体下载 中文字体 英文字体 图形字体 其他字体 变态论坛 变态下载07版
桌面壁纸 系统壁纸 动植物类 游戏卡通 女性主题 高清壁纸 其他壁纸
您现在的位置: 变态下载 >> 站长学院 >> 网页制作 >> 正文
  用HTML和CSS写出漂亮正规的BLOG            【字体:
用HTML和CSS写出漂亮正规的BLOG
作者:佚名    文章来源:不详    点击数:    更新时间:2008-1-16    

    Blog的全名应该是Web log,中文意思是“网络日志”,后来缩写为Blog,而博客(Blogger)就是写Blog的人。从理解上讲,博客是“一种表达个人思想、网络链接、内容,按照时间顺序排列,并且不断更新的出版方式”。简单的说博客是一类人,这类人习惯于在网上写日记。 如何应用HTML和CSS写出漂亮正规的BLOG:

      正确使用a标签

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

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

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

     养成文章分段的好习惯

     写blog不可能像古龙小说那样一句话一个段落,所以按照学生时代老师所教的写作风格写blog是毫无争议的。建议用p标签给文章分段,代码如是:<p>文章正文</p>。
值得一提的是很多blogger都没有首行缩进的习惯,有的最多也是在编辑器下敲几个空格,这里给出用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>。

     用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>。

     其他一些在日志中常用的html

     引用他人文章的片段推荐用<blockquote>标签,这个标签可以自动实现页面左右两端的缩排,一般默认缩排40像素,例如:<blockquote style="background-color:#f7f7f7;border:1px dotted #dedbde;padding:10px;">这是一个引用样式的例子</blockquote>

 

文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最新热点 最新推荐 相关文章
    用Phtoshop制作卷边老照片效…
    教你用phtotshop绘制商业包装…
    中国站长第一门户:WWW.CHIN…
    如何将XHTML+CSS页面转换为打…
    常用的XHTML标签的使用技巧介…
    HTML元素语义的分类
    新手入门:XHTML DHTML SHTML…
    如何开发基于HTML格式的电子…
    构建自己的HTML工具
    HTML向XHTML转化
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    变态下载 2006-2008 保留网站解释权利。感谢网友对本站的支持,我们一直在努力!

    鲁ICP备06027999号 站长:韩江波