gpt4 book ai didi

css - HTML CSS 中的图像放置

转载 作者:行者123 更新时间:2023-11-28 08:38:01 25 4
gpt4 key购买 nike

body
{
background-image:url("images/Wheat.jpg");
}
p
{
font-family: "Sans-serif";
font-size: 20px;
text-align: justify;
}

/* unvisited link */
a:link {
color: #000000;
text-decoration: none;
font-size:150%;
}

/* visited link */
a:visited {
color: #000000;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #000000;
}
{color:#996633;
font-family:Arial;
text-align: center;
font-size: 200%;
}

h3
{
color:#996633;
font-family:Arial;
font-style: italic;
text-align:left;
font-size: 200%;
<!DOCTYPE html> 


<head>
<meta charset="utf-8">
<!-- specify link to external layout file -->
<link rel="stylesheet" type="text/css" href="CSS/Testimonials.css"/>
<title>Sandwich Express</title>


</head>

<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">

<table img-src="images/sanex.jpg" width="100%" style="height: 50%;" cellpadding="10" cellspacing="0" border="0">
<tr>

<!-- HEADER SECTION -->
<td colspan="2" style="height: 80px;" bgcolor="#FFFFFF"><h1><img src="CSS/images/sanex.jpg" alt="Sandwich Express" style="width:100%;height:150px"> </h1></td></tr>
<!-- NAVIGATION BAR SECTION -->
<tr><b><td colspan="5" valign="middle" height="40" bgcolor="#ECE5B6"><a href="Home.html">Home</a></b></td></tr>

<tr>
<!-- LEFT COLUMN (MENU) -->
<td width="10%" valign="top" bgcolor="#DEB887">
<a href="CSS/Menu.html">Menu</a><br>
<br></br>
<a href="CSS/Delivery.html">Delivery</a><br>
<br></br>
<a href="CSS/Testimonials.html">Testimonials</a><br>
<br></br>
<a href="CSS/Contact.html">Contact information</a><br>

</td>

<!-- top right column-->
<td img src="images/flower.jpg">
<h2>
<h2>Contact us</h2><br><br>

<h3>How to contact us? </h3>
<p>Please call us on 0000000000 </p>
<p> Or feel free to use our web-form</p>


<form action="#" method="post">
<p>
<label for="name">Name</label>
<input name="name" id="name" type="text" required/>
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required/>
</p>
<p>
<label for="Contact">Contact Number</label>
<input name="website" id="website" type="url"/>
</p>
<p>
<label for="Inquiry">Inquiry</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p> <input type="submit" value="Post comment"/></p>
</form>

<br>
<h3>Our address is</h3>
<p>Sandwich Express</p>
<p>Some Back Alley</p>
<p>Middle of Lincoln</p>
<p>Great Britian</p>

<tr><td colspan="2" height="20" bgcolor="#ECE5B6">Copyright Keeley Wainman, University of Lincoln ©</td></tr></div>
<div id="map-canvas"></div>
<body>
<style>
#map-canvas {
width: 500px;
height: 400px;
background-color: #CCC;
position: bottom;
}
</style>
</body>
</table>
</body>

嘿,所以在我终于有了一些东西之后,我去放置了一个谷歌地图(还没有完全实现),只是想为它找到正确的位置。似乎我无法将谷歌地图移动到我想要的页面底部?或者甚至如何让图像移动?它似乎已经超出了顶部的边界,这确实是定位不佳,我必须将它移到底部。非常感谢您对此处出现的问题提供任何帮助!

最佳答案

使用以下内容:

        <tr><td><div id="map-canvas"></div></td></tr>

在页面末尾,而不是:

        <div id="map-canvas"></div>

它会将您的 map 放在页面底部,它位于顶部是因为您没有分配 <tr><td>对它

祝你编码顺利! ^^

编辑:http://jsfiddle.net/h261cgc9/这是一个 fiddle ,可以看到我在行动中所做的改变

但正如我在评论中提到的,创建一个不使用表格的网站要好得多,只有当你真的想把一些东西放在一个表格中时才使用表格,把整个 body 放在表格中是个坏主意,参见:http://blog.silktide.com/2011/04/why-you-shouldnt-use-tables-for-layout-ever/

在 fiddle 中,我删除了包含样式的,因为不需要它,您可以将样式放在页面顶部的 <head> 之间。和 <body>

关于css - HTML CSS 中的图像放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27940663/

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