html基础 img标记 设置图片与上下/左右之间的距离

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

ex1:

  code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <!--
        图片与左右文字之间的距离 hspace
        图片与上下文字之间的距离 vspace
      -->

            <p>
                <img src="images/picture.jpg" hspace="20" vspace="20" align="left">
                阿难白佛言:世尊,我亦闻佛,与文殊等诸法王子,谈实相时,世尊亦言,心不在内,亦不在外。如我思惟,内无所见,外不相知。内无知故,在内不成。身心相知,在外非义。今相知故,复内无见,当在中间。佛言:汝言中间,中必不迷,非无所在。今汝推中,中何为在。为复在处。为当在身。若在身者,在边非中,在中同内。若在处者,为有所表,为无所表。无表同无。表则无定。何以故。如人以表,表为中时,东看则西,南观成北。表体既混,心应杂乱。阿难言:我所说中,非此二种。如世尊言,眼色为缘,生于眼识。眼有分别,色尘无知。识生其中,则为心在。佛言:汝心若在根尘之中,此之心体,为复兼二,为不兼二。若兼二者,物体杂乱。物非体知,成敌两立,云何为中。兼二不成,非知不知,即无体性,中何为相。是故应知,当在中间,无有是处。
            </p>
</body>
</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>
            <p>
                <img src="images/picture.jpg" hspace="20" vspace="20" align="right">
                阿难白佛言:世尊,我亦闻佛,与文殊等诸法王子,谈实相时,世尊亦言,心不在内,亦不在外。如我思惟,内无所见,外不相知。内无知故,在内不成。身心相知,在外非义。今相知故,复内无见,当在中间。佛言:汝言中间,中必不迷,非无所在。今汝推中,中何为在。为复在处。为当在身。若在身者,在边非中,在中同内。若在处者,为有所表,为无所表。无表同无。表则无定。何以故。如人以表,表为中时,东看则西,南观成北。表体既混,心应杂乱。阿难言:我所说中,非此二种。如世尊言,眼色为缘,生于眼识。眼有分别,色尘无知。识生其中,则为心在。佛言:汝心若在根尘之中,此之心体,为复兼二,为不兼二。若兼二者,物体杂乱。物非体知,成敌两立,云何为中。兼二不成,非知不知,即无体性,中何为相。是故应知,当在中间,无有是处。
            </p>
</body>
</html>

  

  result:

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

时间: 2024-12-24 03:51:04

html基础 img标记 设置图片与上下/左右之间的距离的相关文章

html基础 img标记 设置图片的宽度和边框 利用div使图片居中显示

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut

【2017-3-22】HTML基础 文字标记、图片标记、空格、换行、表格、超链接

(一) 1.HTML: 网站(站点) - 网页 HTML作为文件后缀名,可以把文件变为网页 HTML是一门编程语言的名字:超文本标记语言超越了文字的范畴,除了文字还可以有图片.视频.音频.动画特效等其它内容,由标记<>组成的一门计算机编程语言 HTML语言的作用:做网页 2.基本格式: <html><head></head><body> </body></html> 3.标签 文字标记+ 加粗.倾斜.下划线 <b&g

动态设置图片的宽度和高度

动态设置图片控件的宽度和高度: imageView.getLayoutParams().width=600;imageView.getLayoutParams().height=400; 设置图片(src): imageView.setImageResource(resId); android获得屏幕高度和宽度: 1.WindowManager wm = (WindowManager) getContext()                     .getSystemService(Cont

css设置图片水平及垂直居中

.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/ width:200px;

IOS基础UI之(二)图片预览

实现效果: (1)点击按钮,更改显示的图片,描述和页码 (2)当显示第一张图片时,左按钮不能点击.最后一张时,右按钮不能点击(变灰) 掌握知识: (1)学会获取plist资源. (2)学会懒加载的使用. 效果如下: 实现思路: (1)拖去相应的控件到界面,布局界面. (2)拖线设置控件的属性和绑定按钮方法 (3)编写业务逻辑代码 首先我们设置好plist文件,plist文件作用是存放一定规则的数据.懂得java的同学应该知道,这家伙有点像xml文件,但是解析的时候比xml简单多了. 下面看看pl

Android 设置图片倒影效果

首先,贴出效果图: 1.布局文件main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_p

防盗链Nginx设置图片防盗链,设置无效的请仔细看红字

*******************************************************************切记,替换的图片地址要使用没有防盗链的网站图片,否则由于替换的图片其实也处于防盗链情况下,会造成仍旧无法显示设置的图片.******************************************************************* 一.全站图片防盗链 在/usr/local/nginx/conf/nginx.conf文件要添加防盗链的ser

Android:ScaleType设置图片

设置例子:ImageViewId.setScaleType(ScaleType.CENTER); ScaleType:设置图片显示方式 效果预览: Android:ScaleType设置图片,布布扣,bubuko.com

CSS代码如何设置图片周围字体环绕

实现文字环绕效果需要先设定float的参数,如果图片需要左对齐设为left,若右对齐则为:right.此外,我们还可以根据需要设置图片和文字间隔的空间,同样适用CSS的padding. <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>文字环绕</title> <style> div {