<table>
<tr align="center">
<td>文字</td>
<td><img src="image/1.png" width="90" height="90" alt=""></td>
</tr>
</table>
这样写,是可以保证图片和文字同派且文字与图片是居中显示的,而不是文字在图片下方
网页中有时也需要像word那样实现图文混排。那么如何通过CSS实现网页图文混排。
工具/原料
Dreamweaver CS5
方法/步骤
用下面这段话做测试:“百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做",重在解决实际问题。在架构上,整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章,通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分,其中步骤/方法详细的描述了达到目的的 *** 作过程,便于学习和模仿。经验一般含有丰富的图片(如果必要),和简明的文字,通常和现实生活联系紧密,能帮助人们解决实际问题。”如何实现图文混排。
网页在没有实现图文混排前的效果,先做CSS样式,看以下代码:
#title{
font-size:19px /* 字号大小 */
font-weight:bold /* 粗体 */
text-align:center /* 居中 */
}
#content{
font-size:16px /* 字号大小*/
}
这段样式就是对文字作一个简单的设置。
然后就是通过测试段落做测试:
<body>
<div id="title">百度经验</div>
<div id="content">
<img src="baidu.png" border="0">
百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做",重在解决实际问题。在架构上,整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章,通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分,其中步骤/方法详细的描述了达到目的的 *** 作过程,便于学习和模仿。经验一般含有丰富的图片(如果必要),和简明的文字,通常和现实生活联系紧密,能帮助人们解决实际问题。</div>
</body>
运行后如下所示
文字上方空出一大片,既占空间,也不美观,因此想像word那样实现图文混排,那就要对图片进行控制。
<style type="text/css">
</style>
中加入:
img{
float:left
}
即控制图片进行左浮动。
以下是可以实现图文混排的完整的代码:
<html>
<head>
<title>图文混排</title>
<style type="text/css">
#title{
font-size:19px /* 字号 */
font-weight:bold /* 粗体 */
text-align:center /* 居中 */
}
#content{
font-size:16px /* 字号 */
}
img{
float:left /* 图文混排 */
}
</style>
</head>
<body>
<div id="title">百度经验</div>
<div id="content">
<img src="baidu.png" border="0">
百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户"具体怎样做",重在解决实际问题。在架构上,整合了百度知道的问题和百度百科的格式标准。经验是一篇能指导人们达到某种目的的文章,通常包括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分,其中步骤/方法详细的描述了达到目的的 *** 作过程,便于学习和模仿。经验一般含有丰富的图片(如果必要),和简明的文字,通常和现实生活联系紧密,能帮助人们解决实际问题。</div>
</body>
</html>
运用后效果显示:
最简单的方法是使用浮动。
1、可以用一个最大的div层 包裹住,左边一个div 左浮动,右边一个div右浮动,左边的就是一个logo图,主要处理在右边。
2、右边的div定义好之后,在细分为上中下,三个大div,最上面的div 可以左右浮动,左边一个span标签放定位,右边可以用 ul li标签 来进行分配。
3、中间的div同理。左右div浮动,进行处理。
4、最后的导航用 ul li 实现。如图只是做了一个大体的框架,具体实现需要做一些调整。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)