组织HTML和CSS：元素互相重叠

Z时代
2024-01-10
分类：问答

我正试图完成一个网页设计项目，并且遇到元素彼此重叠的问题（请参阅附加的截图）。我的图像应该填充在左边，银色文本框在右边，图像和框之间有一些空格。下面这两个元素应该是“博客”一词，下面的一行应该是具有MEDLIFE秘鲁服务学习之旅和lorem ipsum文本的文本框。组织HTML和CSS：元素互相重叠

Current view of website

附在下面是我的代码：

CSS其次是HTML。

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400');  
html, body, div, span, applet, object, iframe,  
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
del, dfn, em, img, ins, kbd, q, s, samp,  
small, strike, span, sub, sup, tt, var,  
b, u, i, center,  
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td,  
article, aside, canvas, details, embed,  
figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary,  
time, mark, audio, video {  
\t margin: 0;  
\t padding: 0;  
\t border: 0;  
\t font-size: 100%;  
\t font: inherit;  
\t vertical-align: baseline;  
}  
/* HTML5 display-role reset for older browsers */  
article, aside, details, figcaption, figure,  
footer, header, hgroup, menu, nav, section {  
\t display: block;  
}  
body {  
\t line-height: 1;  
}  
ol, ul {  
\t list-style: none;  
}  
blockquote, q {  
\t quotes: none;  
}  
blockquote:before, blockquote:after,  
q:before, q:after {  
\t content: '';  
\t content: none;  
}  
table {  
\t border-collapse: collapse;  
\t border-spacing: 0;  
}  
body{  
    background: #507A98;  
}  
a{  
    -o-transition: .5s;  
    -ms-transition: .5s;  
    -moz-transition:.5s;  
    -webkit-transition: .5s;  
    transition: .5s;  
    text-decoration: none;  
}  
em{  
    font-style: oblique;  
}  
span{  
    font-style: bold;  
}  
img{  
    width: 100%;  
}  
h1,h2,h3,h4,h5,p{  
    font-family: "Montserrat", sans-serif;  
}  
h3{  
    text-transform: capitalize;  
    font-size: 1.875em;  
    padding: 0 0 1% 0;  
    font-weight: 800;  
    color: #000000;  
}  
header{  
    background: url(../img/home-hero-image.jpg);  
    background-size: cover;  
    background-position: center center;  
    width: 100%;  
}  
.hero-image h1{  
    font-size: 6em;  
    text-align: center;  
    color: #ffffff;  
    text-transform: uppercase;  
    letter-spacing: 0.1em;  
    font-weight: 800;  
    line-height: 1.5em;  
}  
.hero-image h2{  
    font-size: 2em;  
    text-align: center;  
    color: #ffffff;  
    font-weight: 400;  
    text-transform: capitalize;  
    letter-spacing: .09em;  
}  
.container{  
    max-width: 960px;  
    margin: 0 auto;  
    font-family: "Montserrat, sans-serif";  
    -webkit-animation-delay: 4s;  
    animation-delay: 2s;  
}  
.about-me{  
    padding: 4%;  
}  
.about-me p{  
    font-family: "Montserrat", sans-serif;  
    font-weight: 300;  
    line-height: 1.8;  
    color: #DCDCDC;  
    letter-spacing: .03em;  
    margin: 5px auto;  
    font-size: 1.2em;  
    padding: 2% 0;  
}  
.about-me p a{  
    color: #E1CCC9;  
    border-bottom: 2px solid;  
}  
.text-box-about-me{  
    float: left;  
    text-align: left;  
    width: 480px;  
    height: 100%;  
    background:silver;  
}  
.main-textbox-content{  
    padding: 4% 8%;  
}  
.main-textbox-content p{  
    line-height: 1.8;  
    letter-spacing: .03em;  
    font-size: 1em;  
}  
.image-area {  
    width: 240px;  
    height: 240px;  
    overflow: hidden;  
    border-color: bisque;  
    border-style: solid;  
    border-width: 3px;  
}  
.peru-blog{  
    height: 300px;  
    padding: 2% 0;  
}  
.peru-blog h3{  
    padding: 4% 0;  
}  
.full-textbox{  
    float: center;  
    text-align: left;  
    width: 480px;  
    background-color: #fff;  
    height: 100%;  
}  
.full-textbox-content{  
    padding: 4% 8%;  
}  
.full-textbox-content p{  
    line-height: 1.8;  
    color: #661166;  
    letter-spacing: .03em;  
    font-size: 1em;  
}  
.left{  
    float: left;  
}  
.right{  
    float: right;  
}  
.contact-me{  
    width: 100%;  
    padding: 5% 0;  
    margin-top: 5%;  
    clear: both;  
}  
.contact-me-content{  
    max-width: 960px;  
    margin: 0 auto;  
    text-align: center;  
}  
.contact-me-content h4{  
    font-size: 1.2em;  
    padding: 1% 0;  
    color: #fff;  
    font-weight: 200;  
    letter-spacing: 0.04em;  
}  
footer{  
    background-color: #E0CCC8;  
    color: #fff;  
    padding: 2% 0;  
    width: 100%;  
    clear: both;  
    height: 100px;  
}  
.footer-content{  
    max-width: 960px;  
    padding: 2% 0;  
    margin: 0 auto;  
    font-family: "Montserrat", sans-serif;  
    font-weight: 300;  
    line-height: 1.4;  
    color: #011833;  
    letter-spacing: .03em;  
    font-size: 1em;  
}  
.copyright{  
    float: left;  
}  
.social-media{  
    float: right;  
}  
.social-media li{  
    display: inline;  
}  
.social-media li a{  
    color: #011833;  
    padding: 0.2em;  
    font-soze: 1.8em;  
    font-weight: 600;  
}  
.social-media li a:hover{  
    color: #fff;  }

<!DOCTYPE HTML>  
<html>  
    <head>  
     <title>Anutr Sivakoses | Personal Website</title>  
     <link rel="stylesheet" href="./css/style.css">  
    </head>  
    <body>  
     <header>  
      <div class="hero-image">  
       <h1>Anutr Sivakoses</h1>  
       <h2>Student at the University of Nevada, Reno</h2>  
      </div>  
     </header>  
     <div class="container">  
      <section class = "about-me">  
       <div class="about-me-content">  
        <h3>Hey there, i'm anutr!</h3>  
       </div>  
       <div class="image-area left">  
        <img src="img/about-me-profile.jpg">  
       </div>  
       <div class=text-box-about-me>  
        <div class="main-textbox-content">  
         <p>lorem ipsum dolor</p>  
        </div>  
       </div>  
      </section>  
      <h3>Blog</h3>  
      <section class= "peru-blog">  
       <div class="full-textbox">  
        <div class="full-textbox-content">  
         <h3>MEDLIFE Peru Service Learning Trip</h3>  
         <p>lorem ipsum dolor sit amet.</p>  
        </div>  
       </div>  
      </section>  
      <section class="contact-me">  
       <div class="contact-me-content">  
        <h4>For any inquiries, please contact me at: <a class-"contact-me-email" href="mailto:[email protected]">[email protected]</a></h4>  
       </div>  
     </div>  
     <footer>  
      <div class="footer-content">  
       <p class="copyright">Copyright&copy; 2017 Anutr Sivakoses</p>  
       <ul class="social-media">  
        <li>  
         <a href="#" target="_blank">Facebook</a>  
        </li>  
        <li>  
         <a href="#" target="_blank">Instagram</a>  
        </li>  
        <li>  
         <a href="#" target="_blank">LinkedIn</a>  
        </li>  
       </ul>  
      </div>  
     </footer>  
    </body>  </html>

回答：

我改变了一些边距和填充，并改变了一些颜色，使一些文本的可读性。希望这可以帮助！

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400');  
html, body, div, span, applet, object, iframe,  
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
del, dfn, em, img, ins, kbd, q, s, samp,  
small, strike, span, sub, sup, tt, var,  
b, u, i, center,  
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td,  
article, aside, canvas, details, embed,  
figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary,  
time, mark, audio, video {  
\t margin: 0;  
\t padding: 0;  
\t border: 0;  
\t font-size: 100%;  
\t font: inherit;  
\t vertical-align: baseline;  
}  
hr {  
\t width: 85%;  
}  
.color-bg {  
\t background: #E0CCC8;  
}  
/* HTML5 display-role reset for older browsers */  
article, aside, details, figcaption, figure,  
footer, header, hgroup, menu, nav, section {  
\t display: block;  
}  
body {  
\t line-height: 1;  
}  
ol, ul {  
\t list-style: none;  
}  
blockquote, q {  
\t quotes: none;  
}  
blockquote:before, blockquote:after,  
q:before, q:after {  
\t content: '';  
\t content: none;  
}  
table {  
\t border-collapse: collapse;  
\t border-spacing: 0;  
}  
body{  
    background: #507A98;  
}  
a{  
    -o-transition: .5s;  
    -ms-transition: .5s;  
    -moz-transition:.5s;  
    -webkit-transition: .5s;  
    transition: .5s;  
    text-decoration: none;  
}  
em{  
    font-style: oblique;  
}  
span{  
    font-style: bold;  
}  
img{  
    width: 100%;  
}  
h1,h2,h3,h4,h5,p{  
    font-family: "Montserrat", sans-serif;  
}  
h3{  
    text-transform: capitalize;  
    font-size: 1.875em;  
    padding: 0 0 1% 0;  
    font-weight: 800;  
    color: #000000;  
}  
header{  
    background: url(../img/home-hero-image.jpg);  
    background-size: cover;  
    background-position: center center;  
    width: 100%;  
}  
.hero-image h1{  
    font-size: 6em;  
    text-align: center;  
    color: #ffffff;  
    text-transform: uppercase;  
    letter-spacing: 0.1em;  
    font-weight: 800;  
    line-height: 1.5em;  
}  
.hero-image h2{  
    font-size: 2em;  
    text-align: center;  
    color: #ffffff;  
    font-weight: 400;  
    text-transform: capitalize;  
    letter-spacing: .09em;  
}  
.container{  
    max-width: 960px;  
    margin: 0 auto;  
    font-family: "Montserrat, sans-serif";  
    -webkit-animation-delay: 4s;  
    animation-delay: 2s;  
}  
.about-me{  
    padding: 4%;  
}  
.about-me p{  
    font-family: "Montserrat", sans-serif;  
    font-weight: 300;  
    line-height: 1.8;  
    color: #000;  
    letter-spacing: .03em;  
    margin: 5px auto;  
    font-size: 1.2em;  
    padding: 2% 0;  
}  
.about-me p a{  
    color: #000;  
    border-bottom: 2px solid;  
}  
.text-box-about-me{  
    float: left;  
    text-align: left;  
    width: 480px;  
    height: 100%;  
    background: #E0CCC8;  
}  
.main-textbox-content{  
    padding: 4% 8%;  
}  
.main-textbox-content p{  
    line-height: 1.8;  
    letter-spacing: .03em;  
    font-size: 1em;  
}  
.image-area {  
    width: 240px;  
    height: 240px;  
    overflow: hidden;  
    border-color: #E0CCC8;  
    border-style: solid;  
    border-width: 3px;  
}  
.peru-blog{  
    height: 300px;  
\t margin-top: 3.5em;  
    padding: 2% 0;  
}  
.peru-blog h3{  
    padding: 2% 0;  
}  
.full-textbox{  
\t margin-top: 11em;  
    text-align: left;  
    width: 100%;  
    background-color: #fff;  
    height: 100%;  
}  
.full-textbox-content{  
    padding: 4% 8%;  
}  
.full-textbox-content p{  
    line-height: 1.8;  
    color: #661166;  
    letter-spacing: .03em;  
    font-size: 1em;  
}  
.left{  
    float: left;  
}  
.right{  
    float: right;  
}  
.contact-me{  
    width: 100%;  
    padding: 5% 0;  
    margin-top: 5%;  
    clear: both;  
}  
.contact-me-content{  
    max-width: 960px;  
    margin: 0 auto;  
    text-align: center;  
}  
.contact-me-content h4{  
    font-size: 1.2em;  
    padding: 1% 0;  
    color: #fff;  
    font-weight: 200;  
    letter-spacing: 0.04em;  
}  
footer{  
    background-color: #E0CCC8;  
    color: #fff;  
    padding: 2% 0;  
    width: 100%;  
    clear: both;  
}  
.footer-content{  
    max-width: 960px;  
    padding: 0 0 1% 0;  
    margin: 0 auto;  
    font-family: "Montserrat", sans-serif;  
    font-weight: 300;  
    line-height: 1.4;  
    color: #011833;  
    letter-spacing: .03em;  
    font-size: 1em;  
}  
.copyright{  
    float: left;  
}  
.social-media{  
    float: right;  
\t font-size: 0.65em;  
\t letter-spacing: 0.05em;  
}  
.social-media li{  
    display: inline;  
}  
.social-media li a{  
    color: #011833;  
    padding: 0.2em;  
    font-size: 1.8em;  
    font-weight: 600;  
}  
.social-media li a:hover{  
    color: #fff;  }

<!DOCTYPE HTML>  
<html>  
    <head>  
     <title>Anutr Sivakoses | Personal Website</title>  
     <link rel="stylesheet" href="./css/style.css">  
    </head>  
    <body>  
     <header>  
      <div class="hero-image">  
       <h1>Anutr Sivakoses</h1>  
       <h2>Student at the University of Nevada, Reno</h2>  
      </div>  
     </header>  
     <div class="container">  
      <section class="about-me">  
       <div class="about-me-content">  
        <h3>Hey there, i'm anutr!</h3>  
       </div>  
       <div class="image-area left">  
        <img src="img/about-me-profile.jpg">  
       </div>  
       <div class="text-box-about-me">  
        <div class="main-textbox-content">  
         <p>lorem ipsum dolor</p>  
        </div>  
       </div>  
      </section>  
      <section class= "peru-blog"> \t \t  
       <div class="full-textbox"> \t  
\t \t \t \t \t <div class="color-bg">  
\t \t \t \t \t <center><span><h3>Blog</h3></span></center>  
\t \t \t \t \t </div>  
        <div class="full-textbox-content">  
         <h3>MEDLIFE Peru Service Learning Trip</h3>  
         <p>lorem ipsum dolor sit amet.</p>  
        </div>  
       </div>  
      </section>  
      <section class="contact-me">  
       <div class="contact-me-content">  
\t \t \t \t <hr />  
        <h4 style="color: #000">For any inquiries, please contact me at: <a class="contact-me-email" href="mailto:[email protected]">[email protected]</a></h4>  
       </div>  
     </div>  
     <footer>  
      <div class="footer-content">  
       <p class="copyright">Copyright&copy; 2017 Anutr Sivakoses</p>  
       <ul class="social-media">  
        <li>  
         <a href="#" target="_blank">Facebook</a>  
        </li>  
        <li>  
         <a href="#" target="_blank">Instagram</a>  
        </li>  
        <li>  
         <a href="#" target="_blank">LinkedIn</a>  
        </li>  
       </ul>  
      </div>  
     </footer>  
    </body>  </html>