我不确定是否应该使用网格系统或（https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431）或媒体查询。
我发现侧面菜单栏以及底部的特色产品对笔记本计算机的宽度都有影响。
我不确定css网格是否会有所帮助，因为我更加关注菜单栏如何相互播放，但彼此之间保持正确的关系。不确定如何解决此问题。
<!DOCTYPE html>
<html>
<head>
<title>Healthy Hair Beauty Supply</title>
<style>body {
background: url('https://thumbs.dreamstime.com/b/red-gold-background-frame-roses-vector-79285044.jpg') no-repeat;
font-family: Apple Chancery, cursive;
font-style: italic;
color: gold;
background-size: cover;
opacity: .81;
}
section {
background-color: #1b0007;
box-shadow: 6px 6px 2px 1px #FFEF99;
opacity: .8;
padding: 10px;
float: right;
border-radius: 25px;
margin-right: 20px;
margin-bottom: 2px;
color: white;
width:160px;
height:160px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ol {list-style:none;
width:200px;
}
ul li {
box-shadow: 6px 6px 2px 1px #FFEF99;
border-radius: 5px;
float: right;
width: 240px;
height: 40px;
background-color: black;
opacity: .4;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 8px;
}
ul li a {
text-decoration: none;
color: gold;
}
ul li a:hover {
background-color: red;
display: block;
border-radius: 5px;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
h1 {
color: #34000d;
font-size: 40px;
padding: 60px;
box-shadow: 12px 12px 2px 1px #34000d;
text-align: center;
Opacity: .7;
background: url('data:image/jpeg;base64,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') no-repeat;
background-size: cover;
border-radius: 15px;
}
span {
text-align: center;
}
.engraved {
font-size: 100px;
font-family: Futura;
background-color: #000000;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(245, 245, 245, 0.5) 3px 5px 1px;
}
.embossed {
color: #f0f0f0;
font-size: 100px;
font-family: Futura;
background-color: #666666;
text-shadow: 1px 4px 4px #555;
text-align: center;
-webkit-background-clip: text;
-moz-background-clip: text;
}
</style>
</head>
<body>
<ul>
<li style="width: 140px;font-size:small;"><a>Affliates</a></li>
</ul>
<ul>
<li style="width: 140px;font-size:small;"><a>About Us</a>
<ul>
<li style="width: 140px;font-size:small;"><a>Testimonial</a></li>
</ul>
</li>
</ul>
<ul>
<li style="width: 140px;font-size:small;"><a>Contact Us</a>
<ul>
<li style="width: 140px;font-size:small;"><a>Contact Us</a></li>
</ul>
</li>
<ul>
<li style="width: 140px;font-size:small;"><a>Reviews</a>
<ul>
<li style="width: 140px;font-size:small;"><a>Youtube</a></li>
</ul>
</li>
<ul>
<li style="width: 140px;font-size:small;"><a>Hair Growth </a>
<ul>
<li style="width: 140px;font-size:small;"><a>OIL</a></li>
</ul>
</li>
<ul>
<li style="width: 140px;font-size:small;"><a>Home</a>
</li>
<br><br><br>
<span class="engraved">
<h1 style="font-size:85%;">
Healthy Hair Beauty Supply
</h1></span>
<div class="banner"><a href="https://www.affilorama.com/5stepformula?aff=clarissagr"><img src="https://cdn.affilorama.com/files/image/affiliates/resources/affilojetpack/banner/72890-A.png" style="width:100%;display:grid;"></a></div>
<br><br>
<br>
<section style="width:800px; height:275px;left:100px; display: grid;">What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</section>
<ol>
<li style="font-size:85%;background-color: #1b0007;
opacity: .8;">black hair care products</li>
<li style="font-size:85%;background-color: #1b0007;
opacity: .8;">black hair care growth products</li>
<li style="font-size:85%;background-color: #1b0007;
opacity: .8;">black hair care growth oil product</li>
<li style="font-size:85%;background-color: #1b0007;
opacity: .8;">black hair care natural hair blog</li>
<li style="font-size:85%;background-color: #1b0007;
opacity: .8;">black hair care blog</li>
<li style="font-size:85%;background-color: #1b0007;
opacity: .8;">black hair care forum</li>
<li style="font-size:85%;background-color: #1b0007;
opacity: .8;">black hair care product development</li>
<li style="font-size:85%;background-color: #1b0007;
opacity: .8;">black hair care reviews</li>
</ol>
</div>
<div style="position: relative;
top: 100px; right:850px;">
<section>
<h2 style="font-size:70%;">
Featured Healthy Hair Product
</h2>
<p>
<div class="product">
<a href="#" class="img"><img src="http://www.hydrathermanaturals.com/DSN/wwwhydrathermanaturalscom/Commerce/productimages/tmb1_000018.jpg"/style="width:80px; height:80px;" ></a>
</div>
<div style="font-size:25%;"><a href="#" class="name">Hair Product</a>
<div>
$19.00
</div>
<a href="#" class="cart">Shopping Cart</a>
<span>1</span>
</p>
</div>
</section>
</div>
</div>
<div style="position: relative;right:350px;top:100px;">
<section>
<h2 style="font-size:70%">
Featured Healthy Hair Product
</h2>
<p>
<div class="product">
<a href="#" class="img"><img src="http://www.hydrathermanaturals.com/DSN/wwwhydrathermanaturalscom/Commerce/productimages/tmb1_000018.jpg"/style="width:80px; height:80px;" ></a>
</div>
<div style="font-size:25%;"><a href="#" class="name">Hair Product</a>
<div>
$19.00
</div>
<a href="#" class="cart">Shopping Cart</a>
<span>1</span>
</p>
</section>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
我总是建议使用css-grid，它用途广泛，并且在您初次使用它时可以节省很多时间，我建议您阅读文档和/或一些教程。
这是一个教程，向您展示GRID的主要功能： https://css-tricks.com/snippets/css/complete-guide-grid/
这是一个有动机的游戏 http://cssgridgarden.com/
答案 1 :(得分：0)
我在这里找到了答案：
https://www.codecademy.com/en/forum_questions/532619b28c1ccc0cac002730
...”好吧，简单的解决方案是这样的： 身体 { 填充：0; 边距：0；” }
答案 2 :(得分：0)
我认为对于响应式设计，即使使用CSS网格，您仍然必须使用媒体查询。我使用过CSS网格，仍然必须使用媒体查询来更改网格在不同视口大小下的显示方式。