HTML 图片

1、*.html 文件跟 *.jpg 文件(f盘)在不同目录下：

<img src="file:///f:/*.jpg" width="300" height="120"/>

2、*.html 文件跟 *.jpg 图片在相同目录下：

<img src="*.jpg" width="300" height="120"/>

3、*.html 文件跟 *.jpg 图片在不同目录下：

a、图片 *.jpg 在 image 文件夹中，*.html 跟 image 在同一目录下：

<img src="image/*.jpg/"width="300" height="120"/>

b、图片 *.jpg 在 image 文件夹中，*.html 在 connage 文件夹中，image 跟 connage 在同一目录下：

<img src="../image/*.jpg/"width="300" height="120"/>

4、如果图片来源于网络，那么写绝对路径：

<img src="http://static.runoob.com/images/runoob-logo.png" width="300" height="120"/>

 

为图像添加边框和边距并浮动到段落的右侧

img
{
float:right;//靠右侧
border:1px dotted black;//边框宽 类型  颜色
margin:0px 0px 15px 20px;//间距
}

 

标题和图片向右侧浮动

div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}

在上面的段落中,div元素是120像素宽,它包含了图像。 div元素会向右浮动。 Margins 被添加到div使得文本远离div。 Borders和padding被添加到div框架的图片和标题中

 

段落的第一个字浮动在左侧

span
{
float:left;
width:1.2em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}

在上面的段落中, 第一个字嵌入在span 元素中。 这个 span 元素的宽度是当前字体大小的1.2倍。 这个 span 元素是当前字体的400%(相当大)， line-height 为80%。 文字的字体为"Algerian"。