1. 插入图片
1.1.效果
我们将这张图片插入空白网页中
效果如下：
1.2.方法
首先我们把图片放到和我们所写的.html文件同一的文件目录下：
（注意图片以.jpg结尾）
接着如以下输入：
代码如下：
<img src="验证码.jpg" alt="Image">
（alt 属性用来为图像定义一串预备的可替换的文本，当浏览器无法成功载入图像时，则替换文本告诉使用者其失去的信息。此时，浏览器将显示这个替代性的文本。）
2.设置图片属性
2.1.效果
我们将上图的图片改变其大小、位置：
2.2.方法
如下输出：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>weiki</title>
</head>
<body>
<div class="textbox-with-image">
<img src="验证码.jpg" alt="Image">
</div>
</body>
</html>
<style>
.textbox-with-image {
position: relative;
display: inline-block;
}
.textbox-with-image img {
position: absolute;
/*调整图片宽度*/
width: 15px;
/*调整图片长度*/
height: 15px;
/*图片定位*/
top: 55%;
transform: translateY(-50%);
left: 1px;
}
</style>
3271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
