css平时用到的样式

css平常用到的样式

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

图例：
css平时用到的样式

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>

相关推荐