增加一些排版格式

My Blog - Site News | 发布时间

Date:2008-04-27 | 浏览次数

好的排版能让文章看起来更有条理，让阅读者阅读更有乐趣，看到一些JOOMLA模板自带了一些排版格式，我也给自己的站加了些。做起来很简单，直接加进CSS，写文章的时候加进html就行了！

下面贴一些示例:

代码示例： <pre> 或 <div class="code">

pre, .code {
margin: 15px 0;
padding: 15px 25px 15px 30px;
background: url(../images/tp-code.gif) no-repeat top left #F7F7F7
font: 1em/1.5 monospace;}

列表：

This is a sample Check list. Interdum Vestibulum Sed Lorem eu felis leo Nunc dui id feugiat.
Dolor Curabitur Nam Nulla augue id iaculis a nec Cum at.
Lorem et nunc congue pede auctor condimentum habitasse rutrum nunc Mauris. Gravida id Aenean id condimentum nibh vitae montes sagittis malesuada et.
Nunc cursus sem et pretium sapien eget.

对话气泡示例.使用方法： <div class="bubble1"> <div> <div> <div> <div> 对话内容! </div> </div> </div> </div>作者 </div>

作者

对话气泡示例二.使用方法：<div class="bubble2"> <div> 对话内容! </div>作者 </div>

作者

对话气泡示例三.使用方法：<div class="bubble3"> <div> <div> <div> <div> 对话内容! </div> </div> </div> </div>作者 </div>

作者

对话气泡示例四.使用方法：<div class="bubble4"> <div>对话内容! </div>作者 </div>

作者

This is a sample sticky note. Use <p class="stickynote">Your sticky note goes here!</p> to form a sticky note!

This is a sample pin note. Use <p class="pinnote">Your clip note goes here!</p> to form a clip note!

This is a sample newspaper note. Use <p class="clipnote">Your clip note goes here!</p> to form a clip note!

引用示例. 使用代码： <blockquote>引用内容!</blockquote>

引用示例二. 试用代码<div class="blockquote"><blockquote>引用内容!</blockquote></div>

1数字列表示例. 使用代码 <p class="blocknumber"><span class="bignumber">1</span>内容!</p>

2数字列表示例. 使用代码 <p class="blocknumber"><span class="bignumber">2</span>内容!</p>

3数字列表示例. 使用代码 <p class="blocknumber"><span class="bignumber">3</span>内容!</p>

错误信息示例. 使用代码 <p class="error">错误信息内容!</p>.

信息示例. 使用代码 <p class="message">信息内容!</p>.

提示信息示例. 使用代码 <p class="tips">提示信息!</p>.

视频链接示例： 查看视频! 使用代码 <span class="video"><a href="#" title="视频名称">查看视频</a></span>.

高亮文字示例：高亮文字. 使用代码 <span class="highlight">高亮文字!</span>.

This is a Magazine Style Drop Cap. The first letter in this paragraph is big. JA Teline bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words.

Use <p class="box-grey">Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p>

Use <p class="box-hilite">Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.</p>

Caption Box Adv This is a sample Caption Box Use. <div class="caption"><h3>Caption Box</h3>Your content go there!</div>

Caption Box

This is a sample Caption Box Use. <div class="captionBox"><h3>Caption Box</h3>Your content go there!</div>

Caption Box Highlight

This is a sample Caption Box Use. <div class="captionBox-hilite"><h3>Caption Box Highlight</h3>Your content go there!</div>

Story High Light

This is a sample Caption Box Use. <div class="story-hilite"><h3>Story Highlight</h3>Your content go there!</div>

安静读书的地方:玉宇书域|book.yutheme.cn上线 2008-10-28
joomla的细节seo优化 2008-06-28
增加网站聚合书签工具Add This! 2008-02-22

网摘:

我要评论

发表评论

评论内容中的链接自动增加rel="nofollow"，搜索引擎不会收录，请不要利用评论来做广告，此类话题将被删除。 rel="nofollow" in use - do not spam, do not advertise! un-related or spam comments will be deleted.
姓名:
评论:
验证码：*