我是一个HTML和CSS的新手。我试图编写这张图片的输出:https://istack.dev59.com/Qy7Sd.webp
唯一的问题是,当我添加砖块背景时,它也出现在输出的白色部分,这不是我想要的。这是我到目前为止编写的代码:
<!DOCTYPE html>
<html>
<head>
<title>Terps Calculators Inc</title>
<style>
body{padding: 70px; border-style: ridge; border-width: 20px; border-color: grey;}
header, nav, main, footer{background-color: rgb(254, 189, 173); border: 4px solid grey;}
header{font-family: Kunstler Script; font-size: 70px; padding: 30px 237px;}
nav{font-family: sans-serif; font-size: 19px; text-align: center;}
a:link{color: red;}
main{padding: 30px 200px; color: black; font-weight: bold;}
.intro{ font-weight: bold; text-decoration: underline; font-size: 30px;}
p{font-size: 18px;}
.head{font-weight: bold; font-size: 22px; font-family: arial;}
.text{font-style: italic;}
.color{text-decoration: underline; color: red; font-size: 25px; font-style: italic;}
footer{border: none; text-align: center; font-size: 20px; font-weight: bold;}
</style>
</head>
<body>
<header>
<img src="Burj Khalifa.jpg" width="100px" height="130px"> Terps Calculators Inc. <img src="University of Maryland.png" width="100px" height="100px">
</header>
<br>
<nav>
<a href="http://www.umd.edu">http://www.umd.edu,</a> <a href="http://www.cs.umd.edu">http://www.cs.umd.edu,</a> <a href="http://www.testudo.umd.edu">http://www.testudo.umd.edu</a>
</nav>
<br>
<main>
<div class="intro">Introduction</div>
<p><span class="head">Terps Calculators Inc.</span><span class="text"> implements and provides these calculators for your use. We keep expanding our collection every day, so make sure you stop by often.</span></p>
<div class="intro">Calculators</div>
<br><br>
<img src="Calculator.png" height="60px" width="50px"> <span class="color"> Grades Calculator</span>
<br>
<img src="Calculator.png" height="60px" width="50px"><span class="color"> Interest Calculator</span>
</main>
<br>
<footer>Terps Calculators Inc.®</footer>
</body>
</html>