[Web前端技术教学]图片与文字混排基础练习-1

来源：互联网发布：abigail mac 编辑：程序博客网时间：2024/09/21 09:03

实现目标

左上角是图片,段落文字环绕图片

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>练习1</title><style type="text/css">p{font-size:14px;line-height:1.5;}img{border:1px gray dashed;margin:10px 10px 10px 0;padding:2px;float:left;}</style></head><body><img  src="images/sheshou.jpg" /><p>在遥远古希腊的大草原中，驰骋着一批半人半兽的族群，这是一个生性凶猛的族群。“半人半兽”代表着理性与非理性、人性与兽性间的矛盾挣扎，这就是“人马族”。</p> <p>人马族里唯独的一个例外:奇伦。奇伦虽也是人马族的一员,但生性善良,对待朋友尤以坦率著称,所以奇伦在族里十分受人尊敬</p></body></html>

资源下载

上面代码所用的图片资源,可点击 sheshou.jpg 放大及另存下载.

效果预览

技术小结

图片采用左浮动,段落采用标准流,实现段落内容环绕图片.

0 0