Question

我正在设计一个登录页面，其中的要求是使用背景图像而不是CSS样式表。我已经将登录页面设计的图像放置在中间，现在我想在图像上方设置文本框和登录按钮。我确实做到了，但是每当浏览器尺寸更改时，文本字段也会移动。即使在任何设备上打开它，也要如何解决。

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .container {
      position: relative;
    }
    .text-block {
      position: absolute;
      top: 238px;
      left: 307px;
      color: white;
    }
  </style>
</head>
<body>
  <div align="center" class="container">
    <div class="text-block">
      <input type="text" style="width: 300px;">
    </div>
    <img src="g1.png" align="middle">
  </div>
</body>
</html>

Answer 1

<!doctype html>
<html>
    <head>
        <title>TextBox with Search Icon in HTML and CSS - Tutorial from www.codeofaninja.com</title>
<style>
#search-text-input{
    border-top:thin solid  #e5e5e5;
    border-right:thin solid #e5e5e5;
    border-bottom:0;
    border-left:thin solid  #e5e5e5;
    box-shadow:0px 1px 1px 1px #e5e5e5;
    float:left;
    height:17px;
    margin:.8em 0 0 .5em; 
    outline:0;
    padding:.4em 0 .4em .6em; 
    width:183px; 
}

#button-holder{
    background-color:#f1f1f1;
    border-top:thin solid #e5e5e5;
    box-shadow:1px 1px 1px 1px #e5e5e5;
    cursor:pointer;
    float:left;
    height:27px;
    margin:11px 0 0 0;
    text-align:center;
    width:50px;
}

#button-holder img{
    margin:4px;
    width:20px; 
}
</style>
    </head>
<body>
   <input type='text' placeholder='Search...' id='search-text-input' />
<div id='button-holder'>
    <img src='magnifying_glass.png' />
</div>
</body>
</html>

以上代码可为您提供帮助。

图片上方的文本框

1 个答案: