gpt4 book ai didi

html - 带有英雄图片、html 表单和文本的 div

转载 作者:太空宇宙 更新时间:2023-11-04 03:36:09 28 4
gpt4 key购买 nike

我想要一个带有背景图片的 div,右端是一个注册表单,左边是一个带有 h1 标签的 div。

HTML代码:

<html>
<title> GoToMy PC </title>
<head> <link rel="stylesheet" type="text/css" href="blah.css" /> </head>
<body>


<section class="imageform">

<div>
<h1> Heading text goes here </h1>
<h2> Sub text goes here </h2>
</div>

<form class="signup_form">


<label class="holder-text"> Your Name </label><br/><input class="field_height" type="text" name="firstname" placeholder="First Name"> <input class="lastname" type="text" name="lastname" placeholder="Last Name"><br/>
<label class="holder-text">E-mail address</label><br/><input class="field_width_height" type="email" name="user_email"> <br/>
<label class="holder-text">Password</label><br/><input class="field_width_height" type="password" name="password" ><br/>
<label class="holder-text"> At least 8 characters with both letters and numbers </label><br/>


</form>

</section> <!--End of imageform section -->

表单显示在页面中但不向右浮动,带有h1标签的div在页面底部,背景图像仅在屏幕宽度太小时显示。

非常感谢任何解决此问题的帮助。

JSfiddle 链接:http://jsfiddle.net/fwkqos0c/

最佳答案

我修正了你的代码。您正在实现大量垃圾 CSS。比如height: auto就不需要调用了。您还调用了 margins 来定位而不是 float。

我在 div 中添加了一个类,以使标题易于阅读:

.title{
float: left;
display: block;
width: 50%;
color: white;
}

查看代码,如果您对我为什么特别使用某些东西有任何疑问,请告诉我。

背景也可以很容易地用渐变而不是图像来完成。

http://jsfiddle.net/fwkqos0c/2/

关于html - 带有英雄图片、html 表单和文本的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25538005/

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