2008.12 23

5个排版会用到的CSS基础

标签: , ,
资源共享

图文混排! 我想，你会想到这个。这里，准备给你介绍10个在文章的排版中会用到的CSS基础，当然，包括图文混排，是怎样做到的。准备好了吗? 那我们开始：

1. 首行缩进

你知道的，从小学，老师就教我们，段落的开头应该空两格。而你使用word的时候，也有首行缩进这个功能，但在html中你的空格键好像起不了作用了。当然，你可以用 来代替一个空格，但这不是理想的方式，用CSS吧，简单，有效：

<p style="text-indent:2em;">你的内容</p>

这样的话，这个有style="text-indent:2em;"段落就会显示两个字符的缩进了。缩进更多? 修改2em, 2表示2个字符，你可以相应增加或者减少。下面是一个示例，来自李白的诗：

紫阁连终南，青冥天倪色。凭崖望咸阳，宫阙罗北极。万井惊画出，九衢如弦直。渭水银河清，横天流不息。朝野盛文物，衣冠何翕赩。厩马散连山，军容威绝域。伊皋运元化，卫霍输筋力。歌钟乐未休，荣去老还逼。圆光过满缺，太阳移中昃。不散东海金，何争西飞匿。无作牛山悲，恻怆泪沾臆。

2. 图文混排

在word中，我们可以用环绕来让文字显示在图片周围，而CSS，中，我们可以用float，来让文字在没有清理浮动的时候，显示在图片以外的空白处。如下所示：

sofished君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金尊空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
…

在下面的代码中，把float设置成left，图片会显示在左边，而right则显示在右边，而margin-right是为了不让文字和图片贴在一起需要写的，如果你设置的是float:right;刚相应应该是把 margin-right改成margin-left：

<img style="float:left;margin-right:15px;" src="图片地址" alt="图片说明" />

3. 设置背景色

先来看一个示例，如果你有需要引用的内容，而主题中又没有设置，或者希望自己定制一下背景颜色，那么你可能会选择下面这样的显示方式：

床前明月光，疑是地上霜；
举头望明月，低头思故乡；
春天不洗澡，处处蚊子咬；
拿出敌敌畏，蚊子哪里跑。

代码如下，如果你不知道颜色是如何定义的，你可以看看web216安全，换上相用的颜色代号就可以了，比如#faf7e8表示上面的浅黄色：

<p style="background:#faf7e8;border-top:1px dotted #a3a3a3;border-bottom:1px dotted #a3a3a3;text-align:center;">

4. 让文字居中

如上例，只要在代码中加入text-align:center，就可以让文章在容器的宽度内水平居中。OH，容易哦?!

5. 显示一个边框

边框我们会用到border，添加一个边框，只要加上style="border:1px dotted #080;"1px代码边框的大小，而dotted是边框的样式，常用的样式用三个:solid(实边) dashed(虚线) dotted(点状虚线). 就像上面实例的边框中，我使用的是dotted边。

好吧，就写这5个比较常用的。更多的CSS基础知识，你可以到w3school中文学习，不需要很多时间，你就可以轻松排版了。感谢herb小朋友分享w3school教学的电子书：

W3school中文教程电子书：http://tinyurl.com/893p9a

收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »
首页 » 资源共享 »

52

  1. 2008.12.23 3:50 pm
    Zoll(visit): [回复]

    Twitter 是抢沙发的妙招 哈哈

  2. 2008.12.23 3:53 pm
    sfox(visit): [回复]

    很好玩的CSS Hacks呵~~

    sofa这么快就米了，倒。。

  3. 2008.12.23 3:55 pm
    feir(visit): [回复]

    我是绝对新手，学习哈:)

  4. 2008.12.23 3:57 pm
    Zoll(visit): [回复]

    第二种方法中，假如左侧有一列图片，右侧分别用文字解释。如果右侧文字没有排满图片的高度，那么，如何让第二张图片的描述与第二张图片的顶端齐平呢？？

  5. 2008.12.23 4:02 pm
    二手科学家(visit): [回复]

    很实用的代码

  6. 2008.12.23 4:26 pm
    iColor(visit): [回复]

    好.这个更实用,有时间再深入一些,多写几个常用的,或有用的,或很容易出效果的…哈哈哈

  7. 2008.12.23 4:48 pm
    一亿度(visit): [回复]

    很通俗易懂的文章，两边都float图片，中间是文字的好复杂，不知道怎么弄

  8. 2008.12.23 4:49 pm
    骷髅小鬼(visit): [回复]

    能否写一篇日志，详细讲一下怎么在博客中添加滑动门效果

  9. 2008.12.23 5:03 pm
    Betty(visit): [回复]

    果然是“基础”，呵呵

  10. 2008.12.23 5:37 pm
    颜小诗(visit): [回复]

    实用~~~ 不错

  11. 2008.12.23 5:44 pm
    阿福(visit): [回复]

    介个好，很实用。

  12. 2008.12.23 5:58 pm
    人类进化(visit): [回复]

    没有首字下沉@_@

  13. 2008.12.23 6:03 pm
    Tina(visit): [回复]

    菜鸟中滴菜鸟代表来了…很受用.

  14. 2008.12.23 6:07 pm
    David Lau(visit): [回复]

    哈哈～这个好学，很实用，谢过了！

  15. 2008.12.23 7:25 pm
    herb(visit): [回复]

    w3school中文的确不错….刚出来的时候我用oe把整站download下来做成了电子书，muhaha…..快速方便，节约带宽，正好在此地分享给大家伙?
    http://tinyurl.com/893p9a

  16. 2008.12.23 8:09 pm
    Poshi(visit): [回复]

    你引用的那个网站真的很好，像我平常都没有主动去找这种站的

  17. 2008.12.23 8:13 pm
    水灰色(visit): [回复]

    相当实用，收藏此文，以备不时之需，呵呵。

  18. 2008.12.23 8:17 pm
    Poshi(visit): [回复]

    其实之前没留意过XML的内容，刚好可以补一下，不过，话说这样一来SOFISH好像也可以以CSS为主题，写更多内容了

  19. 2008.12.23 8:23 pm
    理肤泉(visit): [回复]

    嘿, 理肤泉, 欢迎再次来到, 灌水或说说你独特的看法吧?
    风格换了哈

  20. 2008.12.23 8:40 pm
    woki(visit): [回复]

    @herb:学习了！

  21. 2008.12.23 8:45 pm
    sofish(visit): [回复]

    @Zoll: 确实是这样，哈哈…

    如果别一段还像前一段一样，只要清理上面的浮动就可以了，在下一下容器中加入
    clear:both;

    @sfox: 下次可以快点嘛，哈哈哈…

    @feir: 慢慢学。

    @二手科学家: 以后再写点别的。

    @iColor: 其实，我是没什么时间，写这此对我来说容易点，以后再添加一些别的吧。

    @一亿度: 那就两边float嘛。

    @骷髅小鬼: 其实这个并不难吧? 你自己查一下教程就有了，或者我有空就写吧，你多注意里面那个span就OK了，主要是切图方面的问题，CSS应该没什么。原理就是让两张图片显示成一张一样。

    @Betty: 嘿嘿，基础中的基础。

    @颜小诗: 好孩子。

    @阿福: 拿去，hoho…

    @人类进化: 首字下沉已经不是基础了，好像在IE6下有问题，哈哈。

    @Tina: 录完要准备给我d个沙发地址。

    @David Lau: 你应该熟知这些了吧，哈哈。

    @herb: thank you。我已经update在文章里面了。

    @Poshi: 哈哈，我之前就介绍过了。 写更多？哈哈，看情况吧，因为这几个基本上可以搞定常用的了。

    XML好像比较难，虽然有朋友说，不难，我自己也没看过。他还叫我看xslt…

    @水灰色: hiahia，THANKS。

    @理肤泉: 嗯，改进了一下嘛。竟然发现了，嘿嘿。

    @woki: 大家都来表扬一下herb的分享精神，哈哈。

    @all： 文章中已经更新的herb小朋友分享的w3school的教程电子书，哈哈。地址是：http://tinyurl.com/893p9a

  22. 2008.12.23 9:09 pm
    Yacca(visit): [回复]

    @sofish:这个回复列表的长度超过我的了…

  23. 2008.12.23 9:10 pm
    sofish(visit): [回复]

    @Yacca: 还是你留言多啊，怎么敢跟大家比留言? 哈哈…

  24. 2008.12.23 9:23 pm
    welee(visit): [回复]

    之前写文章都懒得放图片，因为 WP 的排版太烂了，这五个技巧很实用，感谢！

  25. 2008.12.23 9:40 pm
    bryant(visit): [回复]

    我也来学习一下..

  26. 2008.12.23 9:49 pm
    L对着老所(visit): [回复]

    九千？

  27. 2008.12.23 10:24 pm
    feicun(visit): [回复]

    现在学点css，等过年回家把皮修修～

  28. 2008.12.23 10:30 pm
    蓝浩力(visit): [回复]

    第一个我一直都不知道。惭愧啊。

  29. 2008.12.24 12:42 am
    chumsdock(visit): [回复]

    一般不推荐写inline CSS…

  30. 2008.12.24 12:32 pm
    花果山寨(visit): [回复]

    这个是直接加在代码的！第一个我加到CSS里没成功！

  31. 2008.12.24 1:59 pm
    sofish(visit): [回复]

    @chumsdock: inline CSS可以对feed生效哦。

    @花果山寨: 你在需要的元素加吧，比如想让文章生效，可以加上.entry-content p{text-indent:2em;}

  32. 2008.12.24 2:52 pm
    人类进化(visit): [回复]

    NGA.CC的内个首字下沉很华丽的说@_@

  33. 2008.12.25 1:35 pm
    NetPuter(visit): [回复]

    过来Copy代码而已..

  34. 2008.12.25 10:06 pm
    stephen(visit): [回复]

    昨天换上了自己做的主题，去指点一下吧。

  35. 2008.12.26 9:15 am
    小墨(visit): [回复]

    从来没试过文内加css
    css不够熟练，写的时候都要参考=_=!

  36. 2008.12.26 1:05 pm
    小侯(visit): [回复]

    对于新手来说确实十分有用

  37. 2008.12.27 5:40 pm
    林网博客(visit): [回复]

    小技巧，超级实用，严重赞扬！

  38. 2008.12.28 12:15 am
    xxx(visit): [回复]

    想请教老师，关于第二点图文混排，在日志里我想让图片显示在文字上边，并且居中。下边的文字不居左，不知道能不能实现， 我现在网站里是默认全部居中的。我不想文字居中。谢谢。

  39. 2008.12.28 10:34 pm
    akuii(visit): [回复]

    受教了。

  40. 2008.12.28 10:43 pm
    akuii(visit): [回复]

    前面的下载地址没了，可否发一份？

  41. 2008.12.30 10:00 pm
    老余(visit): [回复]

    非常好,简单实用,谢谢.

  42. 2009.01.04 3:42 pm
    hellodog(visit): [回复]

    有个问题请教下 我有个博客（wordpress）原来都是图文混排的每篇文章的图在左边（插图时选择的）。但是换了个主题后就不混排了，分离了，能不能在css加点什么让它继续混排啊——我不懂代码……

  43. 2009.01.07 8:37 am
    BoBoSkY(visit): [回复]

    占座学习中……

  44. 2009.01.07 6:23 pm
    adomit(visit): [回复]

    学习了.谢谢!

  45. 2009.01.09 4:05 am
    Bruce GAO(visit): [回复]

    多谢啦

  46. 2009.01.09 4:05 am
    Bruce GAO(visit): [回复]

    显示文件过期

  47. 2009.01.11 11:50 am
    wordpress啦(visit): [回复]

    首行缩进，图文并排都是经典的CSS方式

  48. 2009.02.25 1:48 pm
    Fang Leo(visit): [回复]

    很基础，也很实用，适合新手

  49. 2009.02.25 5:32 pm
    shally(visit): [回复]

    哈哈·····这些技巧说来简单，但是还是有部分同学碰到后不会解决哦····
    sofish同学可以说说标签的语义化麽··？

  50. 2009.03.11 12:17 pm
    Flyb(visit): [回复]

    这个文件就不要保存在哪些有保存期限的存储网站上啦……

    下载不了呢。

  51. 2009.03.30 10:30 am
    lutuzhi(visit): [回复]

    设置背景色这招很有用。我用wlw写博，引用文字的时候没法区别引用的段落

  52. 2010.04.29 4:28 pm
    够抠(visit): [回复]

    W3school中文教程电子书：http://tinyurl.com/893p9a 这个资源被删掉了 sofish来更新下吧 看我真够热心的O(∩_∩)O~

Additional comments powered by BackType