具有固定宽度内容(CSS)的全角背景 [英] Full Width Background with Fixed Width Content (CSS)
本文介绍了具有固定宽度内容(CSS)的全角背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以对我来说，这是新的一天，有一个新的问题.我的问题是我希望每个部分都具有固定内容的不同全角背景色.我完全被卡住了，如果我把宽度放进去，那么我的背景会缩短到那个宽度，但是我的内容是固定的如果我不设置固定宽度，则背景很好，但是内容看起来很糟糕.任何帮助都将是很大的帮助.
P.S.今天是我在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>
解决方案
您必须为此使用填充.与填充一起使用box-sizing:border-box如果您不希望内部容器的大小大于父容器的大小.
还添加text-align:在#wrapper和#wrapper-two中居中并删除float:left;来自.specials
请查看下面的代码以供参考.
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;
padding: 50px;
box-sizing: border-box;
}
.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;
padding: 50px;
box-sizing: border-box;
text-align: center;
}
#wrapper-two h1{
text-align: center;
font-size: 4em;
font-family: 'Pacifico', cursive;
}
.specials{
width: 25%;
margin:0 auto;
display: inline-block;
}
/*************
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>
希望这会有所帮助
again, so for me it's a new day with a new question.My issue is I want every section to have a different full width background color with fixed content. I'm completely stuck.If I put a width in then my background shorten to the width but my content is fixed. If I don't put a fixed width, my background is great but my content looks bad.Any help would be great help.
P.S. Today mark my first full month on html and css so please feel to critique my code if you see anything wrong.I want to improve so all help is appreciated.
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>
解决方案
You have to use padding for that. Along with padding use box-sizing : border-box if you don't want the size of inner contain to be more than the parent.
Also add text-align: center in #wrapper and #wrapper-two and remove float: left; from .specials
Please look at the below code for reference.
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;
padding: 50px;
box-sizing: border-box;
}
.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;
padding: 50px;
box-sizing: border-box;
text-align: center;
}
#wrapper-two h1{
text-align: center;
font-size: 4em;
font-family: 'Pacifico', cursive;
}
.specials{
width: 25%;
margin:0 auto;
display: inline-block;
}
/*************
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>
Hope this helps
这篇关于具有固定宽度内容(CSS)的全角背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
