html基础 设置img的align属性,left,right 实现图文混排的效果

镇场诗:
    清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
    学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————

ex1:

  code:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <meta charset="utf-8" />
 7 </head>
 8 <body>
 9     <!--通过设置img的align属性,left,right 实现图文混排的效果-->
10     <img src="images/picture.jpg" align="left"/>
11         <p>
12 水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。
13 予谓菊,花之隐逸者也;牡丹,花之富贵者也;莲,花之君子者也。噫!菊之爱,陶后鲜有闻。莲之爱,同予者何人?牡丹之爱,宜乎众矣!
14         </p>
15
16 </body>
17 </html>

  result:

ex2:

  code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <img src="images/picture.jpg" align="right"/>
        <p>
水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。
予谓菊,花之隐逸者也;牡丹,花之富贵者也;莲,花之君子者也。噫!菊之爱,陶后鲜有闻。莲之爱,同予者何人?牡丹之爱,宜乎众矣!
        </p>
</body>
</html>

  

  result:

——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。编辑器 VS2015,浏览器 Firefox。
html+css+js,强,值得努力学习。我是跟着 传智播客的PHP基础视频_html+css+js 视频教程学习的,推荐。
我是一个新手,所以如果博文的内容有可以改进的地方,甚至有错误的地方,请留下评论,我一定努力改正,争取成就一个良心博客。
注:此文仅作为科研学习,如果我无意中侵犯了您的权益,请务必及时告知,我会做出改正。

时间: 2024-10-10 02:57:15

html基础 设置img的align属性,left,right 实现图文混排的效果的相关文章

CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效

学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接.今天就来做几个简单的实例展示现在 流行的DIV+CSS布局的方便好用之处.顺便也说一下CSS3新增的样式属性box-shadow和属性transform. 一图文混排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

(一一一)图文混排基础 -利用正则分割和拼接属性字符串

很多时候需要用到图文混排,例如聊天气泡中的表情,空间.微博中的表情,例如下图: 红心和文字在一起. 比较复杂的情况是表情夹杂在文字之间. 要实现这种功能,首先要介绍iOS中用于显示属性文字的类. 用于文字显示的类除了text属性之外,还有attributedText属性,这个属性是NSAttributedString类型,通过这个属性可以实现不同文字的不同字体.颜色甚至把图片作为文字显示的功能. 下面介绍这个字符串的使用. 以一条微博内容为应用场景,介绍如何从中找出表情.话题等内容,其中表情替换

iOS火焰动画效果、图文混排框架、StackView效果、偏好设置、底部手势等源码

iOS精选源码 高性能图文混排框架,构架顺滑的iOS应用. 使用OpenGLE覆盖阿尔法通道视频动画播放器视图. 可选最大日期截至当日日期的日期轮选器ChooseDatePicker 简单轻量的图片浏览器YCPhotoBrower 使用偏好设置.属性列表.归档解档保存数据.恢复数据 页面底部手势交互滚动UITableView 使用CoreAnimation来模拟iOS中的StackView. 盒子可以更具长宽高变化的动画 iOS优质博客 iOS导航栏使用总结 目录:一.设置导航栏样式二.自定义导

img里的align属性能保证图文的混排效果以及vspace和hspace

(1)如果不实用align,那么img标签只是行内标签占据一行,图文混排效果如下: (2)使用了align属性: <img src="1.jpg" alt="这是xx图片" width="200" align="left"/> (3)主要注意的是,如果需要等比例缩放图片,一般只设置宽,或者只设置高.两个都设置就真按照你写的数字来缩放了. (4)还有一个图片边距的属性,这几个属性平时使用频率并不高,但是十分使用.尤其

0821基础控件(UILabel常用属性)

一.UILabel常用属性1--实例化和设置文字 // 实例化UILabel并指定其边框 UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0.0, 210.0, 320.0, 40.0)]; // 设置label显示的文本 [label setText:@"Hello World"]; // 设置字体和字体大小 [label setFont:[UIFont fontWithName:@"Helvetica-B

0821基础控件(UIButton常用属性)

一.可以通过代码的方式创建UIButton 1.通用实例化对象方法: UIButton *button = [[UIButton alloc] initWithFrame:rect]; 2.快速实例化对象方法: UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect]; 提示: 在OC开发中,实例化任何类型的非自定义对象,都请首先尝试一下是否存在快速定义方法.如果存在快速定义方法,就尽量不要使用init之类的方法实例

安卓布局修改基础常识篇之TextView属性

[天使]安卓布局修改基础常识篇之TextView属性 在修改布局xml文件时需要熟练掌握一些属性,以下是TextView也就是文本的属性:android:autoLink 是否自动链接网址或邮箱地址:android:autoText 自动检测错误:android:bufferType 决定getText()返回的类型android:capitalize 指定使用类型android:cursorVisible 光标是否可见android:digits 数字输入android:drawableBot

20_Shell语言———VIM编辑器基础知识三之窗口属性定制、配置文件及查找替换功能

Vim编辑器可以让用户按照需求来定制一些使用属性. 一.窗口属性定义 1)显示行号 行号不是内容,只是用来帮助用户确认文本所在的行.在vim编辑器中,如果要显示行号,可以在末行模式下输入: set number 如果想关闭,则可以在功能名称前面加上no,即: set nonumber 命令可以被简写,如set number 可以简写为 set nu:set nonumber 可以简写为 set nonu. 注意,上述设定仅对当前vim的进程有效,一旦当前进程关闭,这些设定就会失效,如果要使设定永

微软私有云分享(R2)22 计算机配置文件与基础设置

计算机配置文件是完全为了裸金属安装准备的.所以如果不准备使用裸金属安装,硬件配置文件在SCVMM2012 R2中也可以不用配置. 本章操作完全用图来表示(其实我准备文字了,但是貌似文字丢了----),创建该文件没什么注意事项,但是需要注意的是,这种创建方法其实是利用到了一种虚拟化的技术,将操作系统安装在了VHD上,老实说这种架构本身其实是对性能有一定影响的. 对于将虚拟机放置在本地磁盘的做法来说,影响应该还蛮大的,如果是群集主机,存储是独立的,那问题不大. 微软私有云高端顶级群[23680456