CSS基础（12.background综合实例）

最新推荐文章于 2023-10-12 21:03:03 发布

__XYQ

最新推荐文章于 2023-10-12 21:03:03 发布

阅读量215

点赞数

分类专栏：前端基础知识文章标签： css

本文链接：https://blog.csdn.net/qq_41144008/article/details/78787026

版权

前端基础知识专栏收录该内容

41 篇文章 0 订阅

订阅专栏

这里几乎综合了学过的所有，做出一个简单的输入界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<div style="height: 35px; width: 400px; position: relative">
    <input type="text" style="height: 35px; width: 370px; padding-right: 30px"/>
    <span style="position: absolute; right: 6px; top: 10px; background-image:url(i_name.jpg); height: 16px;
    width: 16px; display:inline-block;"></span>
</div>
</body>
</html>

首先分析下:
1.最外层设置一个div使用relative和内层span的absolute配合，这里就能方便的设置span内容
2.background-image是使用图片做背景，我的图片在当前目录下，一个输入界面的普通图标
3.input的输入框左半部分和外层div重合，直接用一个输入框无法做到在框的右边加入一个图标
4.由于span标签本身是inline（行内）属性的，无法对它过多操作，所以用display将它转型
5.span里面的height和width为小图标的大小，使span恰好容下图标，right和top设置它相对最外层div的位置



然后做成一个带有小图标的输入界面，看似简单，却用到了不少知识。

__XYQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础（12.background综合实例）

这里几乎综合了学过的所有，做出一个简单的输入界面html>lang="en"> charset="UTF-8"> Titlestyle="height: 35px; width: 400px; position: relative"> type="text" style="height: 35px; width: 370px; padding-right:
复制链接

扫一扫