首 页 网络编程
网页制作 图形图象 操作系统 冲浪宝典
软件教学 认证考试

网络安全 网络办公 行业资讯 评测对比
您当前位置:站长天空 -> 网页制作-> 心得技巧
用html和css写出漂亮正规的blog_心得技巧教程
作者:网友供稿 点击:0
推荐
西部数码-全国虚拟主机10强!20余项虚拟主机管理功能,全国领先!第6代双线路虚拟主机,南北访问畅通无阻!可在线rar解压,自动数据恢复设置虚拟目录等.免费赠送访问统计,企业邮局.Cn域名注册10元/年,自助建站480元起,免费试用7天,满意再付款!P4主机租用799元/月.月付免压金
站内搜索
文章页数:[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.knowsky.com target="_blank" title="动态网站制作指南" rel="nofollow">动态网站制作指南</a>
显示:动态网站制作指南

文章中的链接不可过多,太多的链接会让读者阅读时有压抑感和紧张感,如果链接的颜色和文本颜色反差过大,也会让人看起来有眼花缭乱的感觉。最好的链接效果是淡淡的颜色反差或加上下划线,并填写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>。实现效果见本文中的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>

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

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

显示:

这是一个引用样式的例子
字体的html代码大家可能相对熟悉些,如加粗用<b>、斜体用<i>、下划线用<u>、字体颜色大小等用<font>,你也可以用<span style="">的方式或许更方便和更美观,代码:<span style="font-weight:bold;font-style:italic;text-decoration:underline;font-color:blue;">加粗、斜体、下划线、蓝色字体</span>
想实现正文显示html代码的最简单的方法就是加入<xmp>标签,如:<xmp><a href="http://www.knowsky.com">动态网站制作指南</a></xmp>


文章整理:站长天空 网址:http://www.z6688.com/
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

文章页数:[1] 


放大字体显示 缩小字体显示 打印文章 推荐给朋友
热门文章
·Java 调用存储过程-JSP教程,Java技巧及代码
·JSP中文乱码问题的解决.-JSP教程,Java技巧及代码
·Java的网络编程:用Java实现Web服务器-JSP教程,Java技巧及代码
·asp.net连接Access数据库-.NET教程,Asp.Net开发
·VC++.NET 2005 几个比较难缠的问题及其解决方法-.NET教程,.NET Framework
·DropDownList 控件 DataTextField 和 DataValueField 分开绑定-ASP教程,数据库相关
·.Net PetShop 4.0的分布式数据库设计-.NET教程,.NET Framework
·用Asp.net实现新闻分页-.NET教程,Asp.Net开发
·在.NET 2.0 中发送Email-.NET教程,E-mail专题
·逆变桥功率开关管门极关断箝位电路
最新文章
·经典收藏:网页页面常用的特殊符号_心得技巧教程
·用html和css写出漂亮正规的blog_心得技巧教程
·用photoshop优化美眉照片的眼部特写_photoshop教程
·网站页面的均衡规划与选择_心得技巧教程
·关闭远程差分压缩给windows vista拷贝提速_windows vista
·谈google广告的单价与点击-smart_网赚技巧
·用photoshop消除照片中的杂色条纹_photoshop教程
·一个网友观点:两年以来使用div排版的经验_心得技巧教程
·开始使用google adsense_google推广
·google官方讲解noindex、nofollow、noarchive及nosnippet等meta标签用法_google推广
相关主题
  • 用html格式发送邮件_邮件服务器
  • 用html给flash加链接_html教程
  • 用HTML格式发送邮件-ASP教程,邮件相关
  • 用HTML格式发送邮件-ASP教程,邮件相关
  • 用HTML META标签和ASP来作定时迟时信息-ASP教程,ASP技巧
  • 西部数码虚拟主机

    友情链接
    CNNIC 西部数码
    万网 自助建站
    虚拟主机 asp空间
    域名注册 域名
    域名申请 主页空间
    论坛空间 网站空间
    国际域名 虚拟空间
    空间租用 DDOS防火墙
    成都主机托管 四川主机托管
    主机租用 服务器租用
    网站目录 自助建站
    虚拟主机 网址大全
    软件下载
    自助链接
    虚拟主机资讯 特价虚拟主机
    版权申明:本站文章均来自网络,如有侵权,请联系我们,我们收到后立即删除,谢谢!
    关于我们:站长天空:专业提供最新的站长资讯、在线教程、虚拟主机权威评测、虚拟主机性能对比、网站制作教程,开发教程,站长工具。包括网页制作教程、冲浪宝典、编程参考、操作系统、软件教学、行业动态等。
    特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。
    发表评论 打印  刷新     关闭