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

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

code:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5         <title></title>
 6     </head>
 7     <body>
 8         <img src="images/picture.jpg" border="2" width="200">
 9
10         <!--
11           图片路径        src(相对路径)
12           宽度            width
13           高度            height
14           边框粗细        border
15           水平对齐方式    align   left/center/right
16           -->
17         <!--如果想要等比例缩放,就只能给宽或高,二者中的一个-->
18
19         <!--img align="center" 不可以实现图片居中的-->
20         <!--div做桥,将图片放在div中,然后设置div中的内容居中-->
21         <div style="text-align:center;">
22             <img src="images/picture.jpg" align="left"/>
23         </div>
24     </body>
25 </html>

result:

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

时间: 2024-10-22 09:45:29

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

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

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

Python3基础 字符串 center 左右填充空格,达到指定长度,使文本居中

镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.------------------------------------------ code: myStr='HELLO' myNewStr=myStr.center(20) #左右填充空格,使新的字符串长度=20,使文本居中 print(myStr) # 原字符串并未改变 print(myNewStr) result: ============= RESTART: C:

div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)

在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让图片不变形又按比例缩放,如何解决?CSS图片缩小不变形,图片自动缩小,图片按比例等比例缩小不变形解决. 解决方法有两种: 第一种,让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形. 比如淘宝,要求店铺主上传

设置表格td宽度

CSS布局,表格宽度不听使唤的实例.想把表格第一例宽度设为20,其他自适应.但CSS中宽度是等宽的.只设这一行也不起作用.但是在实际应用中总是等宽处理,并不按照样式来走. XML/HTML代码 <table width="100%"> <tr> <td colspan="6" align="center"><strong>少 儿 瑜 伽 课 程 </strong></td>

JavaScript基础 每1.5秒钟在网页中出现一个太阳的图片 整齐排列

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

解决DEDE防止图片撑破页面,文章内容中的图片自适应宽度

许多使用过DEDE建网站的朋友,可能都会碰到过这样的情况,当我们在一个网站里发表一篇文章时,如果我们使用的图片,其宽度超过内容区域大小,图片就会将表格撑大,同时使得页面布局变得混乱起来.当然,如果懂CSS,我们可以利用css来定义,让超出的部分隐藏起来.不过,这样做的话,图片的美观性就很差,显示不出来超出的部分. 解决这个问题,还有一些朋友,会利用css,使图片在过大后,自动将图片缩小,不过,值得注意的是,由于CSS对各个浏览器存在兼容问题,所以就拿IE6浏览器来说,其作用就不大. 今天,软件直

图片宽度和高度都大于div,实现图片在div中居中

<style type="text/css"> #out{height:100px; width:150px; position:relative; overflow:hidden;} #mid{position:absolute;top:50%; left:50%; width:1000px; margin-left:-500px; text-align:center;} #in{ position:relative; top:-50%;} </style>

为什么没法设置span的宽度和高度

为什么没法设置span的宽度和高度: 很多刚开始学习div+css布局的时候可能会碰到这样的问题,使用CSS代码无法设置span的高度和宽度,尽管CSS代码没有错误,却无法生效.例如 <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/"

firefox ie 设置单元格宽度 td width 有bug,不能正常工作。以下方式可以解决

1. firefox ie 设置单元格宽度 td width 有bug,不能正常工作.以下方式可以解决 jqElement.css({ 'min-width': srcth1.width() + "px", 'width': srcth1.width() + "px" }); 2.不要使用CellSpacing  CellPadding,要不效果错误.