在编写www.24game.com.cn网页的时候,我想在右侧站点介绍区域实现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.24game.com.cn/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。
PS:24点大全是我进行的一个网站SEO实验站点,目前已被百度和Google收录,它是一个关于24点游戏的站点,包括24点游戏介绍、24点题目、24点算法、24点计算器,有兴趣的童鞋可以访问一下www.24game.com.cn,欢迎提出宝贵意见。
- 源文【用CSS实现HTML网页图文混排效果】最新版,请访问:
http://www.vktone.com/articles/image-text-mixed-in-css.html
相关推荐
html+css写的美食介绍网页,包括tabs切换,css轮播图,一般是大一的期末作业
CSS图文混排是我们布局网页时经常要用到的布局方法,本实例就是一个典型的左图右文的常用布局,美观大方,方法简便,你可以运行一下代码,看下效果,是不是你想要的呢? 复制代码代码如下:<!DOCTYPE html PUBLIC ...
13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与XML的综合运用 14.1 XML基础 14.1.1 XML的特点 ...
8、案例 图文混排案例 ** 图片和文字在一起显示 9、案例 图像签名 ** 在图片上面显示文字 10、上午内容总结 1、css和html的四种结合方式(****) 2、css的基本选择器(****) * 标签选择器 使用标签名 * ...
13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与XML的综合运用 14.1 XML基础 ...
8.5 飘浮对象和图文混排 8.5.1 飘浮对象的定义 8.5.2 飘浮对象周围的文本的流动 8.6 巩固与自测 第9章 使用表格 9.1 了解表格 9.1.1 表格用来做什么 9.1.2 了解行、列和单元格 9.2 创建表格 9.2.1 创建表格的基本...
功能十分强大的文字效果代码类库。在UITextView上实现十分丰富的文字效果,包括文字大小、颜色、字体、下划线,链接,给文字加上图片、视频,文字任意间距...实现类似于CSS网页的文字效果。 注意:请在Mac下解压使用
2、搭建HTML网页结构 1、添加 文档类型声明 2、添加 html 根标记 2、<html> 标记 包含两对子元素 1、<head></head> 包含的子元素(2对) 1、<title>网页的标题</title> 2、<...