一个文章排版样式:
在一篇文章中,怎么让一段引用的文字有一个独立的区块,好让排版效果更美观呢?下面就是示例:
文章排版示例;方法也不难,就在文章的CSS样式中加入下面代码,然后每次在写文章时,将引用文字放在<blockquote></blockquote>之间
从 BLogger Buzz看到的效果;
借鉴一下;
有兴趣就试一下。
.post blockquote {margin:1em 20px;padding-left:8px;border-left:3px solid #cff5ff;background:#e6e6e6;}
在文章中插入代码:
在模版添加CSS样式:插入代码排版:CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}
然后将要加入代码的地方放在<code></code>中间(在html编辑模式下)
部分内容引用自: [筆記]在文章裡顯示優質的程式碼區
这种方法好像有个问题,就是要替换括号,左括号用 <,右括号用 >,这样的话,只适合插入括号不多的代码。如果要插入的代码是一大段,有很多括号的话,可以下下面的方法,完全不用有任何改动,就可以直接在网页插入代码。但就是在发表时,要选择强行发表,多按两下鼠标。
想在一篇文章中插入一些htm代码,只要将代码放在textarea中间就行了(注意要在Html模式下),如下:
<textarea>在此插入代码</textarea>
当然,要让其版式漂亮点,还要在模版的CSS样式中加入下面代码:
textarea {margin:1em 20px;padding-left:8px;border-style: solid; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(153,153, 153); border-width: 1px 1px 1px 8px; margin: 1px; padding: 3px; background: rgb(244, 244, 244) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(0, 0, 0); font-family: Verdana,Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 13px; line-height: normal; font-size-adjust: none; font-stretch: normal;}
小小地实例:
ul li样式的横排和竖排效果,及代码。效果如下:将如下的style样式代码放在head中间,做好相关的链接:
<style type="text/css">#test1 li {display: inline;line-height: 200%;list-style: none;text-align: center;}#test2 li {display: table;line-height: 200%;list-style: none;text-align: center;}</style>
在文章中加入视频文件:
想在自己的博客中加入视频文件,很简单,只要将下面代码拷贝,并将其中路径"http://xxxxxx"改成自己的视频文件路径:
<embed style="width: 400px; height: 326px;" id="VideoPlayback" type="application/x-shockwave-flash" src=" http://xxxxxx" flashvars="">
在文章中加入MP3文件:
<object height="40" width="290"><param name="movie" value=" http://www.blogthissong.com/player.swf?soundFile=http://xxxxxx"><param name="wmode" value="transparent"><br /><embed src=" http://www.blogthissong.com/player.swf?soundFile=http://xxxxxx" type="application/x-shockwave-flash" wmode="transparent" height="40" width="290"></object>
在文章中加入Flash文件:
<object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">
几种页面插入方法:
在静态的网页中插入页面,有以下几种方法:
1、Object形式,这种就类似在网页中插入图片,比较直观,但没有垂直条和水平条;
2、IFrame形式,与单页效果类似,有垂直条和水平条,但容易给一些网页拦截器过滤;
<object height="40" width="290"></object><iframe src="http: www.YourDomain.com" marginwidth="0" marginheight="0" frameborder="0" height="30" scrolling="no" width="100%"></iframe>