用CSS实现HTML网页图文混排效果
2013-01-17 13:17
260 查看
在编写www.huylin.com网页的时候,我想在右侧站点介绍区域实现HTML图文混排功能,效果如下所示:
原来的HTML代码内容(因为模板取自别的网站,有点乱):
<div class="profile-datablock">
<div class="profile-content">
<div class="profile-img"><img src="http://www.24game.com.cn/photo.gif" alt="24点游戏爱好者的照片" width="80" />
<strong>24点游戏爱好者</strong>
</div>
<div class="profile-data">
<div class="profile-textblock">24点游戏是一个有趣的益智数学游戏, 24点大全网站提供24点游戏技巧、巧算24点、在线算24点、24点计算大比拼、24点手机app下载、24点趣谈、大量24点题目、24点难题、最难的24点等精彩内容。如果您要算24点题目,那么请一定收藏24点大全网站哦!
</div>
</div>
<div class="rssline1">
</div></div>
</div>
修改之后的HTML代码内容,做了很大的简化:
<div class="profile-datablock">
<div class="profile-content">
<img src="http://www.huylin.com/photo.gif" alt="24点游戏爱好者的照片" width="80" height="120" style="float:left;margin-right:8px;" />
24点游戏是一个有趣的益智数学游戏, 24点大全网站提供24点游戏技巧、巧算24点、在线算24点、24点计算大比拼、24点手机app下载、24点趣谈、大量24点题目、24点难题、最难的24点等精彩内容。如果您要算24点题目,那么请一定收藏24点大全网站哦!
</div>
</div>
在HTML中实现图文混排的关键点:设置float样式,比如 float:left。
因为默认情况下文字会紧贴着图片,所以要使用margin样式来调整,比如 margin-right:8px。
原文参考自站长网http://www.software8.co/wzjs/cssdiv/2696.html
PS:24点大全是我进行的一个网站SEO实验站点,目前已被百度和Google收录,它是一个关于24点游戏的站点,包括24点游戏介绍、24点题目、24点算法、24点计算器。
原来的HTML代码内容(因为模板取自别的网站,有点乱):
<div class="profile-datablock">
<div class="profile-content">
<div class="profile-img"><img src="http://www.24game.com.cn/photo.gif" alt="24点游戏爱好者的照片" width="80" />
<strong>24点游戏爱好者</strong>
</div>
<div class="profile-data">
<div class="profile-textblock">24点游戏是一个有趣的益智数学游戏, 24点大全网站提供24点游戏技巧、巧算24点、在线算24点、24点计算大比拼、24点手机app下载、24点趣谈、大量24点题目、24点难题、最难的24点等精彩内容。如果您要算24点题目,那么请一定收藏24点大全网站哦!
</div>
</div>
<div class="rssline1">
</div></div>
</div>
修改之后的HTML代码内容,做了很大的简化:
<div class="profile-datablock">
<div class="profile-content">
<img src="http://www.huylin.com/photo.gif" alt="24点游戏爱好者的照片" width="80" height="120" style="float:left;margin-right:8px;" />
24点游戏是一个有趣的益智数学游戏, 24点大全网站提供24点游戏技巧、巧算24点、在线算24点、24点计算大比拼、24点手机app下载、24点趣谈、大量24点题目、24点难题、最难的24点等精彩内容。如果您要算24点题目,那么请一定收藏24点大全网站哦!
</div>
</div>
在HTML中实现图文混排的关键点:设置float样式,比如 float:left。
因为默认情况下文字会紧贴着图片,所以要使用margin样式来调整,比如 margin-right:8px。
原文参考自站长网http://www.software8.co/wzjs/cssdiv/2696.html
PS:24点大全是我进行的一个网站SEO实验站点,目前已被百度和Google收录,它是一个关于24点游戏的站点,包括24点游戏介绍、24点题目、24点算法、24点计算器。
相关文章推荐
- 网页实现插入图片—css与html的区别
- php正则去除网页中所有的html,js,css,注释的实现方法
- JavaScript+Css+Html实现网页换皮肤功能
- 网页html/css为一行代码,怎么实现换行
- HTML 用 CSS 实现网页布局
- 【HTML &CSS】实现在一个网页内实现浏览图片
- html+css+js实现扁平风格网页计算器
- JavaWeb基础知识:Html和Css实战WebView实现手机显示网页
- CSS+HTML实现梅兰商贸网页设计
- html/css实现阴影蒙版覆盖原网页并显示浮框的功能
- 用简单的css实现html网页动态电子相册的功能
- HTML,CSS,JS实现网页聊天窗口
- 网页天幕代码!从css、html到js的完美实现(自执行函数加原型的完美应用)!!
- UL LI结构实现二级导航菜单(HTML+CSS+JS)
- jq+css+html简单实现导航下拉菜单
- [微信开发] 微信网页授权Java实现(https://www.cnblogs.com/lovebread/p/5513241.html)
- Batsing的网页编程规范(HTML/CSS/JS/PHP)
- 第二部分:html div+css(静态网页)(一)
- HTML中的table多余文字用省略号表示的CSS实现
- HTML+CSS实现图片下半部分遮罩文字效果(仿微信推送信息的图片文字效果)