css平常用到的样式

最新推荐文章于 2022-07-28 15:34:37 发布

yixinhu

最新推荐文章于 2022-07-28 15:34:37 发布

阅读量181

点赞数

分类专栏：前端文章标签： css样式

本文链接：https://blog.csdn.net/yixinhu/article/details/84712664

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

设置图片浮在控件上面，绝对定位

图例：

css代码：

.input_wrap {
    margin: 10px; // 像左和上移动10个像素
    position: relative;
    font-size: 16px;
}

.g_input {
    width: 50%;
    height: 40px;
}

.input_wrap .g_input {
    padding-right: 20px;// 控制文本输入框像右偏移多少像素
    position: relative;
}

.input_wrap .close {
    position: absolute;
    width: 100%; // g_input样式百分比增加或减少，对应的百分比是需要调整
    height: 45px;
    right: 0;
    top: 0;
    background: url(icons-close.png) no-repeat center center;
    background-size: 26px auto;
}

html样例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
	<link rel="stylesheet" href="index.css"/>
</head>
<body>
	<div class="input_wrap">
      <input type="text" class="g_input">
	  <a href="javascript:void(0)" id="close" class="close"></a>
	</div>
</body>
</html>

yixinhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css平常用到的样式

设置图片浮在控件上面，绝对定位图例：css代码： .input_wrap { margin: 10px; // 像左和上移动10个像素 position: relative; font-size: 16px;}.g_input { width: 50%; height: 40px;}.input_wra...
复制链接

扫一扫