以下是我想要实现的目标:
这是我到目前为止所做的: 我正在使用Drupal 7.这是测试网站的链接:http://test-caal.gotpantheon.com/
这是我想要制作的两种形式。有没有办法添加背景图像,使其看起来与我试图实现的相同?
感谢您的帮助!
和泉。
答案 0 :(得分:1)
表单允许您使用<fieldset></fieldset>
标记。
类似
<form id="" action="" method="">
<fieldset>
<!-- inputs here -->
</fieldset>
<fieldset>
<!-- inputs here -->
</fieldset>
</form>
并相应地设计,可能是你正在寻找的。请看上面的演示链接。
<form id="" action="" method="">
<fieldset>
<h3>Member Login</h3>
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
</fieldset>
<fieldset>
<h3>Partner Login</h3>
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
</fieldset>
</form>
基本CSS:
form h3{
color:#fff;
font-family:Helvetica, Arial, sans-serif;
font-size:1.4em;
padding:10px 0;
border-top:2px solid #fff;
border-bottom:1px solid #fff;
}
fieldset{
background:#589FCF;
border: 5px solid #2E2E2E;
width:180px;
display:block;
float:left;
margin:0;
}
form input[type=text]{
border:0;
padding:10px;
margin-bottom:2px;
}
答案 1 :(得分:1)
对于您要实现的目标,可以选择两种不同的形式,因为您有两个不同的sign in
按钮。做这样的事情:
<div id="forms">
<form id="form1">
/*Form stuff goes here*/
</form>
<form id="form2">
/*Other form goes here*/
</form>
</div>
对于你的CSS,只需将forms
的背景设置为黑色,将其他表格元素的背景设置为蓝色,或任何你想要的颜色,这里,给定的颜色是图片中的颜色。
#forms{
background-color:black;
}
#form1 #form2{
background-color:rgb(69,136,203);
}