html - 无法将 png 图像放在容器的边框边缘
问题描述
不知道为什么我无法将 .png 图像与容器的边框对接。我已经尝试了一切。填充、边距、位置和图像不会向下移动。我什至尝试将图像移出容器,但这会增加太多额外的工作和脚本。我希望有人可以在这里帮助我。我无法加载代码。这是一个包含 HTML 和 CSS 的文档。图像是 div 中的一个类。任何帮助都会很棒。我也无法加载图像。
file:///Users/suzannehunter/Desktop/web%20development/CSS-My%20Site/index.html
解决方案
非常感谢您的回复,我试着像您说的那样改变位置。Parent 已经是(顶部容器)已经是相对的了。当我改变孩子(拳击手的形象)绝对时,它保持固定并且不会与父母中的其他孩子一起浮动。我要添加浮动吗?安置是另一回事。我将再次尝试包含代码。上次不让我添加代码和图像。您如何添加代码或他们不允许添加代码?[
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>AnimalKrate</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Open+Sans+Condensed:wght@300&family=Raleway&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img class="top-bone" src="images/bone.png" alt="bone-img">
<h1>AnimalKrate</h1>
<h2><span class="pet">PET</span> source for everything</h2>
<img class="bottom-bone" src="images/bone.png" alt="bone">
<img class="boxer" src="images/boxer.png" alt="boxer-img">
</div>
<div class="middle-container">
<div class="profile">
<img src="images/pawprint.png" alt="pawprint" style = "padding-top:25px">
<h2 style="margin-bottom:5px;">Woof</h2>
<p class="intro">We are your source for everything a pet lover loves. Buying and selling only the most sought after specialty items.</p>
</div>
<hr>
<div class="skills">
<h2>Pet Toys</h2>
<div class="skill-row" style="margin-top: 30px;">
<img class="dog-ball" src="images/dog-ball.png" alt="dog-ball">
<h3>Lorem & Ipsum</h3>
<p>Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros.</p>
</div>
<div class="skill-row" style= "margin-bottom: 50px;">
<img class="dog-toy" src="images/dog-toy.png" alt="dog-toy">
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu, rutrum nam.</p>
</div>
</div>
<hr>
</div>
<div class="bottom-container">
<div class="contact-me">
<h2 style = "padding-top: 25px;">Get In Touch</h2>
<h3>Lorem ipsum dolor sit amet, non elit.</h3>
<p class="contact-message">Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
<a class="myButton">Contact Me</a>
<a href="mailto:2Turkeywithlove.com"></a>
</div>
<a class="footer-link" href="https://www.chewy.com/">Chewy</a>
<a class="footer-link" href="https://www.krisers.com/">Krisers</a>
<a class="footer-link" href="https://www.petsmart.com/">Petsmart</a>
<p class="copyright">© 2018 Hunter.</p>
</div>
</div>
</body>
</html>
] 1
body{
color: #405143;
margin: 0;
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
h1{
color: #5b5b5b;
font-size: 60px;
margin: 50px auto 0 auto;
font-family:'Fredoka One', cursive;
}
h2 {
color: #5b5b5b;
font-family: 'EB Garamond', serif;
font-size: 2rem;
font-weight: normal;
margin-top: 25px;
}
h3 {
color:#794646;
font-family: 'open sans condensed';
font-weight:bolder;
}
a{
color: #794646;
font-family: 'EB Garamond', serif;
margin: 5px 5px;
text-decoration: none;
}
a:hover{
color: #5b5b5b;
}
p {
line-height: 1.5;
}
.top-container {
background-color: #d8c292;
position:relative;
padding-top: 20px;
}
.middle-container{
}
.bottom-container{
background-color: #c19065;
position: relative;
padding-bottom: 25px;
}
.pet {
text-decoration: underline;
}
.bottom-bone{
position: absolute;
left: 150px;
bottom: 300px;
}
.top-bone{
position: absolute;
right: 200px;
top: 150px;
}
.contact-message {
width: 40%;
margin: 20px auto 30px;
}
.copyright{
font-size: 1rem;
padding:20px 0px;
}
.skill-row{
width: 50%;
margin: 100px auto 100px auto;
text-align: left;
}
.intro {
width:30%;
margin: auto;
}
.pawprint {
width: 25%;
}
.dog-ball {
width: 35%;
float: left;
margin-right: 30px;
}
.dog-toy {
width: 35%;
float: right;
margin-left: 30px;
}
hr{
margin-top:40px;
margin-bottom: 40px;
border-style: none;
border-top-style: dotted;
border-color: grey;
border-width:5px;
width: 5%;
}
.style {
margin-top:30px;
}
.boxer{
}
.myButton {
margin-bottom: 20px;
box-shadow: 0px 1px 0px 0px;
background-color:#eae0c2;
border-radius:6px;
border:1px solid #333029;
display:inline-block;
cursor:pointer;
color:#505739;
font-family: 'Arial';
font-size:14px;
font-weight:bold;
padding:9px 10px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
background-color:#ccc2a6;
}
.myButton:active {
position:relative;
top:1px;
}
body{
color: #405143;
margin: 0;
text-align: center;
font-family: Garamond, serif;
font-size: 18px;
}
h1{
color: #5b5b5b;
font-size: 60px;
margin: 50px auto 0 auto;
font-family:'Fredoka One', cursive;
}
h2 {
color: #5b5b5b;
font-family: 'EB Garamond', serif;
font-size: 2rem;
font-weight: normal;
margin-top: 25px;
}
h3 {
color:#794646;
font-family: 'open sans condensed';
font-weight:bolder;
}
a{
color: #794646;
font-family: 'EB Garamond', serif;
margin: 5px 5px;
text-decoration: none;
}
a:hover{
color: #5b5b5b;
}
p {
line-height: 1.5;
}
.top-container {
background-color: #d8c292;
position:relative;
padding-top: 20px;
}
.middle-container{
}
.bottom-container{
background-color: #c19065;
position: relative;
padding-bottom: 25px;
}
.pet {
text-decoration: underline;
}
.bottom-bone{
position: absolute;
left: 150px;
bottom: 300px;
}
.top-bone{
position: absolute;
right: 200px;
top: 150px;
}
.contact-message {
width: 40%;
margin: 20px auto 30px;
}
.copyright{
font-size: 1rem;
padding:20px 0px;
}
.skill-row{
width: 50%;
margin: 100px auto 100px auto;
text-align: left;
}
.intro {
width:30%;
margin: auto;
}
.pawprint {
width: 25%;
}
.dog-ball {
width: 35%;
float: left;
margin-right: 30px;
}
.dog-toy {
width: 35%;
float: right;
margin-left: 30px;
}
hr{
margin-top:40px;
margin-bottom: 40px;
border-style: none;
border-top-style: dotted;
border-color: grey;
border-width:5px;
width: 5%;
}
.style {
margin-top:30px;
}
.boxer{
}
.myButton {
margin-bottom: 20px;
box-shadow: 0px 1px 0px 0px;
background-color:#eae0c2;
border-radius:6px;
border:1px solid #333029;
display:inline-block;
cursor:pointer;
color:#505739;
font-family: 'Arial';
font-size:14px;
font-weight:bold;
padding:9px 10px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
background-color:#ccc2a6;
}
.myButton:active {
position:relative;
top:1px;
}
推荐阅读
- html - 如何在父div中显示具有相同输入框的新div
- python - 使用Python中的index()以外的方法将字符串中的每个第二个字母变为大写?
- javascript - 更改导航栏的不透明度而不更改导航栏上文本的不透明度
- sql-server - 递增地添加字符串类型列的行值
- javascript - Javascript OR 条件运算符未按预期工作
- java - 无法从一个活动获取数据到另一个活动Android
- deep-learning - 什么是“语义驱动的重构”
- firebase-authentication - 使用用户设备授权扩展 Firebase 身份验证
- javascript - JavaScript 语音合成不工作
- powershell - Powershell - 如何从变量中过滤值?