时间戳

首页 > 解决方案 > 我被这个图像背景情况和底部侧栏卡住了

html - 我被这个图像背景情况和底部侧栏卡住了

问题描述

我是 Web 开发的新手，我被这个图像背景卡住了，因为它没有使用 100% 的宽度，并且在右侧显示一个空白区域，我不知道它是什么，而且正在显示底部侧栏。

我正在使用崇高的文字。

如果有人能解释这段代码有什么问题，那将会很有帮助。我不知道如何更好地解释它。

.container{
    width:80%;
    margin:auto;
    overflow: hidden;
}
a:hover{
    color:yellow;
}

#prof{
    color:white;
    font-size: 1.2;
}

#bottom h3{
    color:black;
    text-align: center;
    font-weight: 1.2;
    background-color: coral;

}
.button-1:hover{
    color:yellow;
}

.button-1
{
    background-color:white;
    color: red;
    font-weight: 1.2;
    width:20%;
    border:none;
  border-radius: 15px;
}

body{
    font-size: 16px;
    line-height: 1.6;
    font-family: sans-serif;
}
body a{
    text-decoration:none;
color:white;
}

/*HEADER*/

header{
    background-color:   #000000;
    border-bottom: 3px red solid; 
}
header h1{
    float: left;
}
header nav{
    float: right;
    margin-top: 35px;
}
header a{
    padding:0px 10px;
    font-size: 20px;
}

/*MIDDLE SECTION*/
 #middle{
    width:100%;
   padding:60px;
   margin:0px;
   color: white;
    text-align: center;
    background: url('https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80') no-repeat 0;   
overflow: hidden;
}

#title-1{
    background-color: black;
    padding:-10px 0px;
    color:white;
}

 .container h3{
    float:left;
    width:70%;
    font-family: sans-serif;
    font-size: 25px;
    
    box-sizing: border-box;
}
 .container .button-1{
    float:right;
    width:30%;
    font-family: sans-serif;
    font-size: 20px;
    margin-top:30px;
    
}



.float{ 
    width:30%;
display: inline;
float: right;

padding: 30px 2px;
text-align: center;
color: black;
text-align: center;
}
.float img{
    width: 30%


}

@media(max-width:768px){
header #prof, header nav, section .float{
    float: none;
    width:100%;
    display: block;
    text-align: center;
}
.container .button-1, .container h3{
        width: 100%;
        float: none;
    display: block;
    text-align: center;

}
.container .button-1{
    padding-top: 10px 0px;
    margin: 10px 0px;
}

}
 
<!DOCTYPE html>
<html>
<head>
    <title>WinterMist</title>
    <link rel="stylesheet" type="text/css" href="C:\Users\Random\OneDrive\Desktop\My work\sitestyle.css">
</head>
<body>
<header>
    <div class="container">
        <h1 id="prof"><span style="color:red">Acme</span> Web Design</h1>
        
        <nav>
            <a href="#" style="color: red">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
        </nav>
    </div>
</header>

<section >
    
        <div id="middle">
        <div class="container">
            <h1 style="font-size: 40px"><span style="color:black">Affordable</span> Professional <span style="color:red">Websites</span></h1>
            <p style="font-size: 15px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut eni.</p>
        </div>
    </div>
</section>

<section id="title-1">
    <div class="container">
        <h3>Subscribe To Our Newsletter</h3>
        <button class="button-1">Subscribe</button>
    </div>
</section>

<section>
    <div class="container">
        <div class="float">
            <img src="C:\Users\Random\OneDrive\Desktop\My work\img\html.jpg">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="float">
            <img src="C:\Users\Random\OneDrive\Desktop\My work\img\css.png">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="float">
            <img src="C:\Users\Random\OneDrive\Desktop\My work\img\js.png">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</section>
</body>
<footer id="bottom">
    <h3>Copyright &#169; 2020 </h3>
</footer>

</html>

标签： htmlcssbackground

解决方案

将此 CSS 用于背景图像，它还将从页面中删除水平滚动

#middle {
width: 100%;
padding: 60px;
margin: 0px;
color: white;
text-align: center;
background: url('https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80') no-repeat 0;
background-size: auto;
overflow: hidden;
background-size: cover;
box-sizing: border-box;
}

推荐阅读