标题:背景用图片居中 做登录界面
只看楼主
veimi
Rank: 2
等 级:论坛游民
帖 子:12
专家分:25
注 册:2008-10-16
结帖率:0
 问题点数:0 回复次数:5 
背景用图片居中 做登录界面


如图。我需要将图片居中(水平,垂直),还需要在图片上加

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

确定  重置  (按钮)
搜索更多相关主题的帖子: 用户名 文本框 图片 密码 
2016-06-21 14:47
hu9jj
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:红土地
等 级:贵宾
威 望:396
帖 子:11713
专家分:43267
注 册:2006-5-13
得分:0 
将图片放置在背景中应该可以吧,文字和文本框就直接放在页面中。

活到老,学到老! http://www. E-mail:hu-jj@
2016-06-21 21:00
veimi
Rank: 2
等 级:论坛游民
帖 子:12
专家分:25
注 册:2008-10-16
得分:0 
回复 2楼 hu9jj
能给个CODE学习一下吗。 这块不是很懂。。
2016-06-22 11:16
adsdomain
Rank: 2
等 级:论坛游民
威 望:1
帖 子:127
专家分:54
注 册:2008-5-15
得分:0 
我简单示范一下,具体应用可以在修改,图片名称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>
———————————————————————————代码结束———————————————
2016-07-18 11:05
veimi
Rank: 2
等 级:论坛游民
帖 子:12
专家分:25
注 册:2008-10-16
得分:0 
回复 4楼 adsdomain


效果是这样的。
2016-08-10 15:38
ke爱的小tu子
Rank: 2
等 级:论坛游民
帖 子:51
专家分:20
注 册:2021-2-11
得分:0 

代码:
<!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>
2021-02-11 15:18



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-466196-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.069137 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved