网页中有时也需要像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>
运用后效果显示：
<img src="......." id="img1" /><img src="......." id="img2" />
<img id="img3" /> var img1 = document.getElementById("img1"),
img2 = document.getElementById("img2"),
img3 = document.getElementById("img3")
var canvas = document.createElement("canvas"),
context = canvas.getContext("2d")
canvas.width = img1.naturalWidth + img2.naturalWidth
canvas.height = Math.max(img1.naturalHeight,img2.naturalHeight)
// 将 img1 加入画布
context.drawImage(img1,0,0,img1.naturalWidth,img1.naturalHeight)
// 将 img2 加入画布
context.drawImage(img1,img2.naturalWidth,0,img2.naturalWidth,img2.naturalHeight)
// 将画布内容导出
var src = canvas.toDataURL()
img3.src = src <p>drawImage 的使用方法可以去这里看一下</p>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage" />
1、首先素材准备，基本框架的建立。这里让一个有字的图片从左到右运动起来。
2、将图片素材引入网页，定义canvas标签，获取canvas的上下文。定义一个画图片的函数，使用canavs绘图API里面的drawImage来完成。
3、写一个更新的函数，因为我们要让他动起来，所以每时刻绘制的地方都不一样。注意：这里要用clearRect，这个函数，主要是为了清空画布。
4、写定时函数，每隔0.2秒就更新一次，重新绘制。
5、最后来看看最终的效果，就完成了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）