图老师设计创意栏目是一个分享最好最实用的教程的社区，我们拥有最用心的各种教程，今天就给大家分享CSS基础教程:网页图文混排的10个技巧的教程，热爱PS的朋友们快点看过来吧！
【 tulaoshi.com - Web开发 】
图文混排! 我想，你会想到这个。这里，准备给你介绍10个在文章的排版中会用到的CSS基础，当然，包括图文混排，是怎样做到的。准备好了吗？ 那我们开始：
1. 首行缩进你知道的，从小学，老师就教我们，段落的开头应该空两格。而你使用word的时候，也有首行缩进这个功能，但在html中你的空格键好像起不了作用了。当然，你可以用来代替一个空格，但这不是理想的方式，用CSS吧，简单，有效：
p style="text-indent:2em;"你的内容/p
这样的话，这个有段落就会显示两个字符的缩进了。缩进更多？ 修改, 2表示2个字符，你可以相应增加或者减少。下面是一个示例，来自李白的诗：
紫阁连终南，青冥天倪色。凭崖望咸阳，宫阙罗北极。万井惊画出，九衢如弦直。渭水银河清，横天流不息。朝野盛文物，衣冠何翕赩。厩马散连山，军容威绝域。伊皋运元化，卫霍输筋力。歌钟乐未休，荣去老还逼。圆光过满缺，太阳移中昃。不散东海金，何争西飞匿。无作牛山悲，恻怆泪沾臆。
2. 图文混排在word中，我们可以用环绕来让文字显示在图片周围，而CSS，中，我们可以用float，来让文字在没有清理浮动的时候，显示在图片以外的空白处。如下所示：
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金尊空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
在下面的代码中，把float设置成left，图片会显示在左边，而right则显示在右边，而是为了不让文字和图片贴在一起需要写的，如果你设置的是刚相应应该是把 改成：
img style="float:left;margin-right:15px;" src="图片地址" alt="图片说明" /
先来看一个示例，如果你有需要引用的内容，而主题中又没有设置，或者希望自己定制一下背景颜色，那么你可能会选择下面这样的显示方式：
床前明月光，疑是地上霜；
举头望明月，低头思故乡；
春天不洗澡，处处蚊子咬；
拿出敌敌畏，蚊子哪里跑。
代码如下，如果你不知道颜色是如何定义的，你可以看看web216安全，换上相用的颜色代号就可以了，比如#faf7e8表示上面的浅黄色：
p style="background:#faf7e8;border-top:1px dotted #a3a3a3;border-bottom:1px dotted #a3a3a3;text-align:center;"
如上例，只要在代码中加入，就可以让文章在容器的宽度内水平居中。OH，容易哦？!
边框我们会用到border，添加一个边框，只要加上style="border:1px dotted #080;"1px代码边框的大小，而dotted是边框的样式，常用的样式用三个:solid(实边) dashed(虚线) dotted(点状虚线). 就像上面实例的边框中，我使用的是dotted边。
来源:https://www.tulaoshi.com/n/20160219/1630910.html
看过《CSS基础教程:网页图文混排的10个技巧》的人还看了以下文章 更多>>
