gpt4 book ai didi

html - 如何在文本之外应用背景

转载 作者:行者123 更新时间:2023-12-05 01:54:41 25 4
gpt4 key购买 nike

我是 html 和 css 的新手。我正在尝试对此图像中的输出进行编码 /image/Qy7Sd.png

这里唯一的问题是,当我添加砖 block 背景时,它也会出现在我不想要的输出的白色部分。这是我到目前为止编写的代码:

<!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">&nbsp;Grades Calculator</span>
<br>
<img src="Calculator.png" height="60px" width="50px"><span class="color">&nbsp;Interest Calculator</span>
</main>
<br>
<footer>Terps Calculators Inc.&reg;</footer>
</body>
</html>

最佳答案

我认为如果像这样将所有内容包装在一个 div 中会更好:

<div class="wrapper">
<!-- A lot of content here -->
</div>

将所有内容放入其中,将 div 的边距设置为大约 5-10%,这样砖 block 就会有间隙,然后将正文的“背景”设置为砖 block 图像。

关于html - 如何在文本之外应用背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70577043/

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