【发布时间】：2018-04-08 09:09:24
【问题描述】：
再次， 所以对我来说，这是一个新问题的新一天。我的问题是我希望每个部分都有不同的全宽背景颜色和固定的内容。我完全被卡住了。如果我输入宽度，那么我的背景会缩短到宽度，但我的内容是固定的。如果我不设置固定宽度，我的背景很好，但我的内容看起来很糟糕。任何帮助都会很有帮助。
附：今天是我在 html 和 css 上的第一个完整月，所以如果您发现任何错误，请随时批评我的代码。我想改进，因此感谢所有帮助。
body,html{
margin: 0;
padding: 0;
background-color: yellow;
height: 100%;
}
img{
max-width: 100%;
}
/*******
Nav Bar
*******/
header{
background-image:url(https://sunsetstation.sclv.com/~/media/Images/Page-Background-Images/Sunset/SS_Dining_VivaSalsa2.jpg?h=630&la=en&w=1080);
margin: 0;
height:100%;
margin-bottom: 85px;
background-size: cover;
background-repeat: no-repeat;
}
.header-title{
float:left;
text-decoration: none;
color: green;
font-size: 60px;
font-family: 'Monoton', cursive;
font-weight: bolder;
}
#nav-bar{
float: right;
margin: 0;
}
#nav-bar li{
text-decoration: none;
float: left;
list-style-type: none;
}
.nav-link{
float: left;
text-decoration: none;
text-transform: uppercase;
padding: 25px 0;
width: 140px;
transition: .25s color linear,.5s background-color linear;
text-align: center;
color: green;
font-weight: bolder;
}
/*******
About
*******/
#wrapper{
width: 1200px;
margin: 25px auto;
}
.our-story figure{
float: left;
width: 50%;
margin-top: 8px;
}
.our-story h1{
margin:18px auto;
font-family: 'Pacifico', cursive;
font-size: 4em;
color: green;
}
.our-story p{
line-height: 2.5em;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bolder;
}
/*************
Our Specials
*************/
#wrapper-two{
background-color: #b2ff00;
}
#wrapper-two h1{
text-align: center;
font-size: 4em;
font-family: 'Pacifico', cursive;
}
.specials{
width: 25%;
margin:0 auto;
float: left;
}
/*************
pseudo classes
**************/
.header-title:hover,
.header-title:focus{
transform: rotate(360deg);
transition: 1s all linear;
}
.nav-link:hover,
.nav-link:active,
.nav-link:focus{
background-color: lightgreen;
color: white;
}
.our-story figure:hover{
transform: scale(1.15);
}
/**********
Clearfix
**********/
.clearfix:after,
.clearfix:before {
content:" ";
display:table;
clear:both;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="tiempo de taco.css">
<title>Tiempo De taco</title>
</head>
<body>
<header class="clearfix">
<nav>
<h1><a href="#" class="header-title">Tiempo De Taco</a></h1>
<ul id="nav-bar">
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#our-story" class="nav-link">Our Story</a></li>
<li><a href="#our-specials" class="nav-link">Our Specials</a></li>
<li><a href="" class="nav-link">Gallery</a></li>
</ul>
</nav>
</header>
<section class="clearfix">
<div id="wrapper">
<a id="our-story"></a>
<div class="our-story">
<figure>
<img src="http://www.vancouversun.com/life/cms/binary/7961377.jpg?size=sw620x65">
</figure>
<h1>Our Story</h1>
<p>Mexican cuisine is highly tied to the culture, social structure and its popular traditions, the most important example of which is the use of mole for special occasions and holidays. For this reason and others, Mexican cuisine was added by UNESCO to its list of the world’s "intangible cultural heritage".<br>
Thinking about our roots, we remember our beloved Guadalajara, Jalisco, located in the western-pacific area of Mexico. Guadalajara is the cultural center of Mexico, considered by most to be the home of Mariachi music and host to a number of large-scale cultural events such as the International Film Festival of Guadalajara and the Guadalajara International Book Fair and a number of globally renowned cultural events which draw international crowds.<br>
It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.
</p>
</div>
</div>
</section>
<section>
<div id="wrapper-two" class="clearfix">
<a id="our-specials"></a>
<h1>Our Specials</h1>
<div class="specials">
<p>It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.<p>
</div>
<div class="specials">
It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.
</div>
</div>
</section>
</body>
</html>body,html{
margin: 0;
padding: 0;
background-color: yellow;
height: 100%;
}
img{
max-width: 100%;
}
/*******
Nav Bar
*******/
header{
background-image:url(https://sunsetstation.sclv.com/~/media/Images/Page-Background-Images/Sunset/SS_Dining_VivaSalsa2.jpg?h=630&la=en&w=1080);
margin: 0;
height:100%;
margin-bottom: 85px;
background-size: cover;
background-repeat: no-repeat;
}
.header-title{
float:left;
text-decoration: none;
color: green;
font-size: 60px;
font-family: 'Monoton', cursive;
font-weight: bolder;
}
#nav-bar{
float: right;
margin: 0;
}
#nav-bar li{
text-decoration: none;
float: left;
list-style-type: none;
}
.nav-link{
float: left;
text-decoration: none;
text-transform: uppercase;
padding: 25px 0;
width: 140px;
transition: .25s color linear,.5s background-color linear;
text-align: center;
color: green;
font-weight: bolder;
}
/*******
About
*******/
#wrapper{
width: 1200px;
margin: 25px auto;
}
.our-story figure{
float: left;
width: 50%;
margin-top: 8px;
}
.our-story h1{
margin:18px auto;
font-family: 'Pacifico', cursive;
font-size: 4em;
color: green;
}
.our-story p{
line-height: 2.5em;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bolder;
}
/*************
Our Specials
*************/
#wrapper-two{
background-color: #b2ff00;
}
#wrapper-two h1{
text-align: center;
font-size: 4em;
font-family: 'Pacifico', cursive;
}
/*************
pseudo classes
**************/
.header-title:hover,
.header-title:focus{
transform: rotate(360deg);
transition: 1s all linear;
}
.nav-link:hover,
.nav-link:active,
.nav-link:focus{
background-color: lightgreen;
color: white;
}
.our-story figure:hover{
transform: scale(1.15);
}
/**********
Clearfix
**********/
.clearfix:after,
.clearfix:before {
content:" ";
display:table;
clear:both;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="tiempo de taco.css">
<title>Tiempo De taco</title>
</head>
<body>
<header class="clearfix">
<nav>
<h1><a href="#" class="header-title">Tiempo De Taco</a></h1>
<ul id="nav-bar">
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#our-story" class="nav-link">Our Story</a></li>
<li><a href="#our-specials" class="nav-link">Our Specials</a></li>
<li><a href="" class="nav-link">Gallery</a></li>
</ul>
</nav>
</header>
<section class="clearfix">
<div id="wrapper">
<a id="our-story"></a>
<div class="our-story">
<figure>
<img src="http://www.vancouversun.com/life/cms/binary/7961377.jpg?size=sw620x65">
</figure>
<h1>Our Story</h1>
<p>Mexican cuisine is highly tied to the culture, social structure and its popular traditions, the most important example of which is the use of mole for special occasions and holidays. For this reason and others, Mexican cuisine was added by UNESCO to its list of the world’s "intangible cultural heritage".<br>
Thinking about our roots, we remember our beloved Guadalajara, Jalisco, located in the western-pacific area of Mexico. Guadalajara is the cultural center of Mexico, considered by most to be the home of Mariachi music and host to a number of large-scale cultural events such as the International Film Festival of Guadalajara and the Guadalajara International Book Fair and a number of globally renowned cultural events which draw international crowds.<br>
It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.
</p>
</div>
</div>
</section>
<section>
<div id="wrapper-two" class="clearfix">
<a id="our-specials"></a>
<h1>Our Specials</h1>
<div>
<p>It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.<p>
</div>
<div class="specials">
It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.
</div>
</div>
</section>
</body>
</html>【问题讨论】：
-
您想为所有三个部分设置背景修复。 .header 和两个 .section？
-
对不起，不是标题，而是两个部分。