gpt4 book ai didi

html - 将 HTML 页面分成两个或更多部分

转载 作者:搜寻专家 更新时间:2023-10-31 08:47:33 26 4
gpt4 key购买 nike

如何将网页分成两个或更多部分?例如,我想在左侧放一些图片,在右侧放一个联系表。我找不到办法做到这一点。我试着用 div 来做,但没有用。下面是我正在尝试做的示例代码。

<html>
<head>
<title>Test</title>
</head>
<body>
<div class="page">
<div class="header">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="projects.html">Projects</a></li>
<li class="selected"><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="body">
<div id="pictures">
<h1>Picture</h1>
</div>
<div id="contacform">
<h1>
<form action="mail.php" method="POST">
<p>Name</p> <input type="text" name="name">
<p>Email</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>
</h1>
</div>
</div>
<div class="footer">
<p>Test Footer</p>
</div>
</div>
</body>

最佳答案

我不会挑出你应该使用的所有 CSS,所以下面的代码示例向你展示了如何将两个 div 标签平均分开。请不要在您的 css 中使用#id 选择器,因为它会杀死小猫。

您的 HTML:

<div class="body">
<div id="pictures" class="column half>
<h1>Picture</h1>
</div>
<div id="contactform" class="column last>
<h1>
<form action="mail.php" method="POST">
<p>Name</p> <input type="text" name="name">
<p>Email</p> <input type="text" name="email">
<p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
<input type="submit" value="Send"><input type="reset" value="Clear">
</form>
</h1>
</div>
</div>

CSS:

.body { overflow: hidden; }
.column { float: left; }
.half { width: 50%; }
.last { float: none; width: auto; }

我建议阅读有关 CSS 网格系统的内容。

关于html - 将 HTML 页面分成两个或更多部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14492237/

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