小贝子编程

如何调整网站的组成



我不明白为什么我的<hr>在前两次使用时会水平显示整个页面，然后第三次从左边距稍微停止。在第三个<hr>之后，它的整个页面位置从页边距移动到与<hr>一样多在底部，我还有一个和<hr>一样移动的页脚。你能帮我弄清楚在哪里修改代码吗？

body {
background-color: #fff;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.4;
font-weight: 400;
color: #000000;
padding-right: 0!important;
}
.container {
width: 70%;
max-width: 800px;
height: 100%;
margin-left: 250px;
margin-top: 60px;
}

img {
max-width: 90%;
}

ul, li{
padding: 0;
margin: 0;
list-style-type: none;
}
p {
font-size: 14px;
line-height: 16px;
margin: 0;
}

/*USE CSS for Slider*/
.cssSlider {
display: block;
position: relative;
width: 45%;
overflow: hidden;
margin-left: 80px;
margin-top: 20px;
}
.cssSlider .slides {
overflow: hidden;
//overflow: hidden;
width: 45%;
height: 70vmin;
padding: 0;
list-style: none;
}
.cssSlider .slides > li {
width: 100%;
height: 70vmin;
position: absolute;
//z-index: 1;
overflow: hidden;
margin: 45px;
}
.cssSlider .slides > li > img {
width: 100%;
height: 100%;
margin: 45px;
margin-top: 20px;
}
/*
.cssSlider .slides > li:first-child:not(:target) {
z-index: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
*/
.cssSlider .thumbnails {
//display: block;
//position: relative;
padding: 0;
margin: 70px;
list-style: none;
}
.cssSlider .thumbnails > li {
float: left;
width: 20%;
}
//.cssSlider .thumbnails > li > a {
//display: block;}
.cssSlider .thumbnails > li > a > img {
margin: 55px;
width: 80%;
height: auto;
margin-top: 20px;
}
.cssSlider .slides li:target {
z-index: 2;
-webkit-animation: slide 0s 1;
}
.cssSlider .slides li:not(:target) {
-webkit-animation: hidden 1s 1;
}
@-webkit-keyframes slide {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes slide {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@-webkit-keyframes hidden {
0% {
z-index: 3;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
z-index: 3;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes hidden {
0% {
z-index: 3;
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
z-index: 3;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}



/* Buttons */
.btn-group1 button {
border-radius: 8px;
background-color: #fff; 
border: 1px;
border-style: solid;
border-color: #c1cfdc;
color: black; 
padding: 8px 35px;
cursor: pointer;
float: right;
font-family: Verdana;
color: #415971;
background-image: linear-gradient(white 65%, #f4f6fb 50%);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-right: 140px;
margin-top: 80px;
margin-left: 9px;
}

.btn-group2 button {
border-radius: 8px;
background-color: #fff; 
border: 1px;
border-style: solid;
border-color: #c1cfdc;
color: black; 
padding: 8px 35px;
cursor: pointer;
float: right;
font-family: Verdana;
color: #415971;
background-image: linear-gradient(white 65%, #f4f6fb 50%);
margin-top: 80px;
margin-left: 9px;
}
.btn-group3 button {
border-radius: 8px;
background-color: #fff; 
border: 1px;
border-style: solid;
border-color: #c1cfdc;
color: black; 
padding: 8px 35px;
cursor: pointer;
float: right;
font-family: Verdana;
color: #415971;
background-image: linear-gradient(white 65%, #f4f6fb 50%);
margin-top: 80px;
margin-left: 9px;
}
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none;
}
.btn-group1 button:hover {
background-color: #f4f6fb;
background-image: none;
}
.btn-group2 button:hover {
background-color: #f4f6fb;
background-image: none;
}
.btn-group3 button:hover {
background-color: #f4f6fb;
background-image: none;
}
/* Property */
.Property1{
font-family: Arial;
color: #20381f;
margin-left: 90px;
margin-top: 40px;
margin-bottom: 0px;
}
.Property2{
font-family: Arial;
color: #20381f;
margin-left: 90px;
margin-top: 40px;
margin-bottom: 0px;
}
.Property3{
font-family: Arial;
color: #20381f;
margin-left: 10px;
margin-top: 40px;
margin-bottom: 0px;
}
/* informazioni */
.informazioni{
margin-left: 30px;
display: flex;
gap: 110px;
margin-bottom: 0px;
}
.informazioni1{
margin-left: 30px;
display: flex;
gap: 120px;
margin-bottom: 0px;
margin-top: 0px;
}
.informazioni2{
margin-left: -310px;
display: flex;
gap: 125px;
margin-bottom: 50px;
margin-top: 25px;
font-family: Georgia;
font-size: 12px;
font-weight: lighter;
}
/* simboli cerchi */
.circleshapes{
display: flex;
gap:2px;
margin-left: -540px;
margin-top: 35px;
}
.circleshapes1{
margin-left: 5px;
}
.circleshapes2{
margin-left: 105px
}
.circleshapes3{
margin-left: 105px
}
/* Icon property */
.container1 {
display: flex;
margin-left: 5px;
gap: 50px;
}
.Icon{
color: #20381f;
background: #f2f2f2;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 70px;
vertical-align: middle;
display: inline-block;
padding: 3%;
margin-top: 0px;
}
.Icon1{
color: #20381f;
background: #f2f2f2;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 70px;
vertical-align: middle;
padding: 3%;
margin-top: 0px;
}
.Icon2{
color: #20381f;
background: #f2f2f2;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 70px;
vertical-align: middle;
padding: 3%;
margin-top: 0px;
}

/* icone fiori */
.containerinformaizonifiori{
display: flex;
gap: 80px;
margin-bottom:-60px;
margin-left: 5px;
}
.flowerIcon{
color: #20381f;
background: #f2f2f2;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
vertical-align: middle;
display: inline-block;
padding: 3%;
margin-top: 0px;
font-size: 50px;
}
.flowerIcon1{
color: #20381f;
background: #f2f2f2;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
vertical-align: middle;
display: inline-block;
padding: 3%;
margin-top: 0px;
font-size: 50px;
}

/* icone colori */
.dot1 {
height: 35px;
width: 35px;
background-color: #790c7a;
border-radius: 50%;
display: inline-block;
margin-left: 10px;
margin-top: 10px;
}
.dot2 {
height: 35px;
width: 35px;
background-color: #faf275;
border-radius: 50%;
display: inline-block;
margin-left: 5px;
}
.dot3 {
height: 35px;
width: 35px;
background-color: #f69d40;
border-radius: 50%;
display: inline-block;
margin-left: 5px;
}
.dot4 {
height: 35px;
width: 35px;
background-color: #efa3d0;
border-radius: 50%;
display: inline-block;
margin-left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/BigBang.js"></script>
<link rel="stylesheet" href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/css/BigBang.css">
<script src="https://kit.fontawesome.com/e8f8804c71.js" crossorigin="anonymous"></script>
<title>Big Bang</title>
</head>
<body>
<!-- topnav======================================== -->
<div class="topnav">
<div style="position:relative;padding-top:0%; bottom: 0;">
<iframe src="TopNav.html" width="100%" height="55" scrolling="no"></iframe>
<style>iframe {border: none}</style>
</div>
</div>

<!-- Buttons======================================== -->
<div class="btn-group1"><button>Deluxe<br><br> 42.00€<br><br><br> 30 steli</button></div>
<div class="btn-group2"><button>Premium<br><br>39.00€ <br><br><br>25 steli</button></div>
<div class="btn-group3"><button>Standard<br><br>33.00€ <br><br><br>20 steli</button></div>
<!-- Gallery======================================== -->
<div class="cssSlider">
<ul class="slides">
<li id="slide1"><img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang1.jpg" alt="" /></li>
<li id="slide2"><img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang2.jpg" alt="" /></li>
<li id="slide3"><img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang3.jpg" alt="" /></li>
<li id="slide4"><img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang4.jpg" alt="" /></li>
<li id="slide5"><img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang5.jpg" alt="" /></li>
</ul>
<ul class="thumbnails">
<li><a href="#slide1"><img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang1.jpg" /></a></li>
<li><a href="#slide2"><img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang2.jpg" /></a></li>
<li><a href="#slide3"><img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang3.jpg" /></a></li>
<li><a href="#slide4"><img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang4.jpg" /></a></li>
<li><a href="#slide5"><img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang5.jpg" /></a></li>
</ul>
</div>
<!--?auto=format&fit=crop&w=140&q=60-->


<div class="Property1">
<h3>Property</h3>
<div class="container1">
<div class="Icon"><i class="fa-3x fa-regular fa-clock"></i> </div>
<div class="Icon1"><i class="fa-3x fa-solid fa-droplet"></i></div>
<div class="Icon2"><i class="fa-3x fa-solid fa-temperature-half"></i></div>
</div>
<div class="informazioni"><h4>Durabilità</h4><h4>Fragranza</h4><h4>Resistenza</h4>


<div class="circleshapes">
<div class="circleshapes1">
<span style='font-size:23px;'>&#9679;</span><span style='font-size:23px;'>&#9679;</span><span style='font-size:23px;'>&#9679;</span><span style='font-size:23px;'>&#9679;</span><span style='font-size:23px;'>&#9675;</span>  
</div>  

<div class="circleshapes2">
<span style='font-size:23px;'>&#9679;</span><span style='font-size:23px;'>&#9679;</span><span style='font-size:23px;'>&#9679;</span><span style='font-size:23px;'>&#9679;</span><span style='font-size:23px;'>&#9675;</span>  
</div>

<div class="circleshapes3">
<span style='font-size:23px;'>&#9679;</span><span style='font-size:23px;'>&#9679;</span><span style='font-size:23px;'>&#9679;</span><span style='font-size:23px;'>&#9679;</span><span style='font-size:23px;'>&#9675;</span>  
</div>

</div>
</div>  
</div>

<hr style="margin-top: 30px;  width: 100%;">


<div class="Property2">
<h3>Composition of bouquet</h3>
<div class="container1">
<div class="flowerIcon">✿</div>
<div class="flowerIcon1">✿</div>
</div>

<div class="containerinformaizonifiori">   
<div class="informazioni1"><h4>Tulipano</h4><h4>Tulipano</h4></div>
<div class="informazioni2"><h4>Antartica</h4><h4>Jumbo</h4></div>
</div>
<hr style="margin-top: 30px;  width: 100%;">
<div class="Property3">
<h3>Predominant colors</h3>
</div>
<span class="dot1"></span>
<span class="dot2"></span>
<span class="dot3"></span>
<span class="dot4"></span>

<hr style="margin-top: 30px;  width: 100%;">
<div class="Property3">
<h3>Description</h3>
<p>An explosion of color and joy: Big Bang. This bouquet includes tulips that enjoy a life of their own, don't you believe it? Each type of tulip moves at its own pace as it grows, changing color, shape and posture. In addition, its fuchsia, orange and yellow are a marvel to behold.</p>
</div>

<!-- footer======================================== -->
<div class="footer">  
<div style="position:relative;padding-top:0%; bottom: 0%;">
<iframe src="Footer.html" width="100%" height="370" scrolling="no"></iframe>
<style>iframe {border: none}</style>
</div>
</div>

</body>
</html>

第三个<hr>在具有cssmargin-left: 90px;的div class="Property2"内部

<!-- open div, which has margin left -->
<div class="Property2">
<h3>Composition of bouquet</h3>
<div class="container1">
<div class="flowerIcon">✿</div>
<div class="flowerIcon1">✿</div>
</div>

<div class="containerinformaizonifiori">   
<div class="informazioni1"><h4>Tulipano</h4><h4>Tulipano</h4></div>
<div class="informazioni2"><h4>Antartica</h4><h4>Jumbo</h4></div>
</div>
<!-- Do you mean to close </div> here? -->
<hr style="margin-top: 30px;  width: 100%;">

根据您想要的内容，您可以在<hr>之前关闭div或更改css

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium