gpt4 book ai didi

css - 如何改变一个窗体的背景,使它看起来像两个窗体?

转载 作者:行者123 更新时间:2023-11-28 13:05:28 26 4
gpt4 key购买 nike

下面是我要实现的目标: enter image description here

这是我目前所拥有的: enter image description here我正在使用 Drupal 7。这是测试站点的链接:http://test-caal.gotpantheon.com/

这是一种形式,我想让它看起来像两种形式。有没有办法添加背景图像,使其看起来与我试图实现的目标相同?

感谢您的帮助!

和泉。

最佳答案

jsBin demo

enter image description here

表单允许您使用 <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;
}

关于css - 如何改变一个窗体的背景,使它看起来像两个窗体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20390051/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com