gpt4 book ai didi

html - 似乎无法将图像拉伸(stretch)到 100% 的网页

转载 作者:太空宇宙 更新时间:2023-11-04 04:14:26 25 4
gpt4 key购买 nike

我目前正在尝试为 http://www.code.org 创建一个简单的网页计算机科学周!

我正在尝试为页面顶部的导航栏创建一个基于图像的背景。

这是我目前所拥有的:

HTML

<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="css/text" href="CSstylesheet.css"
</head>
<body>
<div>
<img src="binarybanner.png" id="bannerimg" />
</div>
<div class="h3setup">
<a href="">
<h3 id="GI">General Information</h3>
</a>
<a href="">
<h3 id="BC">Benefits to Coding</h3>
</a>
<a href="">
<h3 id="CT">Coding Types</h3>
</a>
</div>
<div>
<img src="siteMapButton.png" id="siteMapButton"/>
</div>
</body>
</html>

CSS

h3 {
display: inline;
}
div.h3setup {
left: 195px;
top: 145px;
position: absolute;
display: inline;
width: 100%
}
div.h3setup a {
text-decoration: none;
}
#GI {
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
}
#GI:hover {
text-shadow: 3px 3px 3px #99FF66;
}
#BC {
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
}
#BC:hover {
text-shadow: 3px 3px 3px #99FF66;
}
#CT {
border: 2px solid #7FFF00;
border-radius: 6px;
margin-right: 15px;
background: black;
padding: 6px;
color: #7FFF00;
}
#CT:hover {
text-shadow: 3px 3px 3px #99FF66;
}
#bannerimg {
height: 200px;
width: 100%
display: inline;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
}
#siteMapButton {
height: 35px;
width: 35px;
float: right;
margin-right: 1px;
}

最佳答案

您的 css 中 width: 100% 后缺少一个半冒号。在解决问题的 jsfiddle 中。

关于html - 似乎无法将图像拉伸(stretch)到 100% 的网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20208058/

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