我不确定我是否应该使用网格系统或 ( 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>最佳答案
我总是会推荐 css-grid，它用途广泛，并且在您第一次掌握它时可以节省很多时间，我建议您查看文档和/或一些教程。
这里有一个教程，向您展示了 GRID 的主要功能: https://css-tricks.com/snippets/css/complete-guide-grid/
这是一个鼓励练习的游戏 http://cssgridgarden.com/
关于javascript - CSS 网格系统或媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52989454/