css 怎么做那些白色的纽扣盒子

tjvv9vkg  于 2023-01-22  发布在  其他
关注(0)|答案(3)|浏览(118)

我想以某种方式使这些框和使用按钮,但我无法做到这一点,请帮助我这样做。
我尝试使用不透明,但它明确的按钮输入,并不是我所期待的!

acruukt9

acruukt91#

Bootstrap是一个CSS框架,您可以使用它轻松地编写窗体和其他布局的代码
https://getbootstrap.com/docs/4.0/components/forms/
也有其他的线框,如布尔玛,但我发现引导最容易的工作

lc8prwob

lc8prwob2#

我觉得那些白色的框有一个透明的背景色和一个透明的边框色。所以,这些框的CSS将沿着以下路线:

background-color:rgba(255,255,255,0.2);
border:2px solid rgba(255,255,255,0.6);
laik7k3q

laik7k3q3#

我不确定我是否理解您的问题,您是否希望按钮位于白色输入框中?在输入框中不可能有按钮。
要创建这些白色输入框,需要使用<input type="text">来输入小文本,而要创建较大的输入(如 Address),则需要使用CSS来增大输入框的大小。
当然,要给这些输入框添加白色和曲线边缘的样式,您需要在 input 标签中添加一个class="your-css-class"标签助手。例如,CSS类需要有color:white;border-radius:5%;来添加样式。
要在输入框中创建默认文本,可以在<input>标记中使用标记帮助器value="Enter your adress here..."
要获取这些绿色框中的每个输入标签和输入框,您应该使用 flexbox。这是一个简单的框架,请在此处阅读更多内容https://css-tricks.com/snippets/css/a-guide-to-flexbox/这些绿色框可以是一个<div>标签,其中包含标签和输入标签。并且所有绿色框一起应当包含在<div>标签中。每个绿色框的各个<div>标记可以共享一个类,该类使用flexbox属性(如flex-direction:row;)来设置它们的样式,以使标签和输入在水平方向上彼此相邻。可以使用flexbox属性flex-direction:column;来设置包含所有这些较小框的<div>标记的样式,以使绿色框垂直显示。
要添加flexbox,请将CSS属性display:flex;添加到包含所有绿色框/<div>的总<div>标记以及代表各个绿色框的各个<div>标记。
希望这个有用。

相关问题