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

时间：2017-12-03 00:04:59

标签： html css web

我正在尝试完成一个网页设计项目，并且遇到了元素相互重叠的问题（参见附页截图）。 我的图像应该在左边填充，银色文本框在右边，图像和框之间有一些空格。 下面这两个元素应该是单词＆＃34; Blog＆＃34;，下面一行应该是具有MEDLIFE秘鲁服务学习之旅和lorem ipsum文本的文本框。

Current view of website

以下是我的代码：

CSS后跟HTML。

＆＃13;
＆＃13; 
@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, strong, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	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;
}

strong{
    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;
}
＆＃13; 
<!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:anutr.sivakoses@gmail.com">anutr.sivakoses@gmail.com</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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

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

＆＃13;
＆＃13; 
@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, strong, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
hr {
	width: 85%;
}
.color-bg {
	background: #E0CCC8;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	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;
}

strong{
    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;
	margin-top: 3.5em;
    padding: 2% 0;
}
.peru-blog h3{
    padding: 2% 0;
}
.full-textbox{
	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;
	font-size: 0.65em;
	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;
}
＆＃13; 
<!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">		
                <div class="full-textbox">	
					<div class="color-bg">
					<center><strong><h3>Blog</h3></strong></center>
					</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">
				<hr />
                    <h4 style="color: #000">For any inquiries, please contact me at: <a class="contact-me-email" href="mailto:anutr.sivakoses@gmail.com">anutr.sivakoses@gmail.com</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>
＆＃13;
＆＃13;
＆＃13;

（注意：为了在查看时获得最佳效果，请在全屏幕中运行代码。）

相关问题
最新问题