注册 登录
编程论坛 → ASP技术论坛

背景用图片居中 做登录界面

veimi 发布于 2016-06-21 14:47， 5200 次点击
只有本站会员才能查看附件，请 登录


如图。我需要将图片居中（水平，垂直），还需要在图片上加

用户名：文本框
密码：文本框

确定  重置  （按钮）
5 回复
#2
hu9jj2016-06-21 21:00
将图片放置在背景中应该可以吧，文字和文本框就直接放在页面中。
#3
veimi2016-06-22 11:16
回复 2楼 hu9jj
能给个CODE学习一下吗。 这块不是很懂。。
#4
adsdomain2016-07-18 11:05
我简单示范一下，具体应用可以在修改，图片名称bg-exam.jpg
————————————————————代码如下——————————————————————
<html>
<head>
<style type="text/css">
<!--
.STYLE2 {font-size: 16px; }
-->
</style>
</head>
<body >
<table width="800" height="533" border="0" align="center" background="bg-exam.jpg">
  <tr>
    <td width="262">&nbsp;</td>
    <td width="184">&nbsp;</td>
    <td width="340">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="middle"><div align="right" class="STYLE2">用户名</div></td>
    <td valign="middle"><form id="form1" name="form1" method="post" action="">
      <label>
        <input type="text" name="textfield" />
        </label>
    </form>    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="middle"><div align="right" class="STYLE2">密码</div></td>
    <td valign="middle"><form id="form2" name="form2" method="post" action="">
      <label>
        <input type="text" name="textfield2" />
        </label>
    </form>    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><form id="form3" name="form3" method="post" action="">
      <label>
        <input type="reset" name="Submit" value="重置" />
        </label>
      <label>
      <input type="submit" name="Submit2" value="提交" />
      </label>
    </form>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
———————————————————————————代码结束———————————————
#5
veimi2016-08-10 15:38
回复 4楼 adsdomain
只有本站会员才能查看附件，请 登录


效果是这样的。
#6
ke爱的小tu子2021-02-11 15:18
只有本站会员才能查看附件，请 登录

代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>测试</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
*{
margin:0;
padding:0
}
#myform{
width:100%;
height:calc(100vh);
background:url("123.jpg");
background-size:100% 100%;
display:flex;
justify-content:center;
align-items:center;
}
#formbox{
width:20%;
height:calc(12vh);
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-content:space-between;
}
#formbox span{
display:block;
width:25%;
}
#formbox input{
width:73%;
}
#formbox button{
margin:0 50px 0 50px;
}
</style>
</head>
<body>
<form id="myform">
    <div id="formbox">
        <span>用户名</span>
        <input type="text" name="yhm">
        <span>密码</span>
        <input type="text" name="mima">
        <button type="button">重置</button>
        <button type="button">提交</button>
    </div>
</form>
</body>
</html>
1
©2025, BC-CN.NET
电脑版