css网页布局方式 css布局的几种方式

html-css013

css网页布局方式 css布局的几种方式,第1张

1、一列布局:一般都是固定的宽高,设置margin : 0 auto来水平居中,用于界面显著标题的展示等。

2、两列布局:说起两列布局,最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动。

3、三列布局:两侧定宽中间自适应,首先设置父级元素的宽度,可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动,设置margin,调整间距。同样注意清除浮动的影响。

4、混合布局:在一列布局的基础上,保留top和foot部分,将中间的main部分改造成两列或三列布局,小的模块可以再逐级同理划分。

<html>

<head>

<style type="text/css">

img

{

float:right

}

</style>

</head>

<body>

<p>在下面的段落中,我们添加了一个样式为 <b>float:right</b>的图像。结果是这个图像会浮动到段落的右侧。</p>

<p>

<img src="/i/eg_cute.gif" />

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

</p>

</body>

</html>

按照下面这种代码格式,就可以设置成你想要的效果,css根据需要设置段落格式,图片大小也可以通过里面的div设置

<div>

<div><img></div>文字

</div>