具有固定宽度内容 (CSS) 的全宽背景-前端问题

Full Width Background with Fixed Width Content (CSS)(具有固定宽度内容 (CSS) 的全宽背景)

本文介绍了具有固定宽度内容 (CSS) 的全宽背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

再次，所以对我来说，这是一个新问题的新一天.我的问题是我希望每个部分都有不同的全宽背景颜色和固定的内容.我完全被卡住了.如果我输入宽度，那么我的背景会缩短到宽度，但我的内容是固定的.如果我不设置固定宽度，我的背景很好，但我的内容看起来很糟糕.任何帮助都会很有帮助.

附:今天是我在 html 和 css 上的第一个完整月，所以如果您发现任何错误，请随时批评我的代码.我想改进，因此感谢所有帮助.

body,html{边距:0；填充:0；背景颜色:黄色；高度:100%；}图像{最大宽度:100%；}/*******导航栏*******/标头{背景图片:网址(https://sunsetstation.sclv.com/~/media/Images/Page-Background-Images/Sunset/SS_Dining_VivaSalsa2.jpg?h=630&la=en&w=1080)；边距:0；高度:100%；边距底部:85px；背景尺寸:封面；背景重复:不重复；}.header-title{向左飘浮;文字装饰:无；颜色:绿色；字体大小:60px；font-family: 'Monoton'，草书；字体粗细:加粗；}#导航栏{浮动:对；边距:0；}#导航栏李{文字装饰:无；向左飘浮;列表样式类型:无；}.导航链接{向左飘浮;文字装饰:无；文本转换:大写；填充:25px 0；宽度:140px；过渡:.25s 颜色线性，.5s 背景颜色线性；文本对齐:居中；颜色:绿色；字体粗细:加粗；}/*******关于*******/#包装器{宽度:1200 像素；边距:25px 自动；}.our-story 人物{向左飘浮;宽度:50%；边距顶部:8px；}.our-story h1{边距:18px 自动；font-family: 'Pacifico'，草书；字体大小:4em；颜色:绿色；}.our-story p{行高:2.5em；边距:0；font-family: 'Open Sans', sans-serif;字体大小:20px；字体粗细:加粗；}/*************我们的特价商品*************/#wrapper-两个{背景颜色:#b2ff00；}#wrapper-两个 h1{文本对齐:居中；字体大小:4em；font-family: 'Pacifico'，草书；}.特价{宽度:25%；边距:0 自动；向左飘浮;}/*************伪类**************/.header-title:悬停，.header-title:焦点{变换:旋转(360度)；过渡:1s 全线性；}.nav 链接:悬停，.nav 链接:活动的，.导航链接:焦点{背景颜色:浅绿色；白颜色;}.our-story 图:悬停{变换:比例(1.15)；}/**********清除修复**********/.clearfix:之后，.clearfix:之前{内容:" ";显示:表格；明确:两者；}

<!DOCTYPE html><html><头><link rel="stylesheet" type="text/css" href="tiempo de taco.css"><title>Tiempo De taco</title></头><身体><header class="clearfix"><导航><h1><a href="#" class="header-title">Tiempo De Taco</a></h1><ul id="导航栏"><li><a href="#" class="nav-link">首页</a></li><li><a href="#our-story" class="nav-link">我们的故事</a></li><li><a href="#our-specials" class="nav-link">我们的特价商品</a></li><li><a href="" class="nav-link">画廊</a></li></ul></导航></标题><section class="clearfix"><div id="包装器"><a id="我们的故事"></a><div class="我们的故事"><图><img src="aHR0cDovL3d3dy52YW5jb3V2ZXJzdW4uY29tL2xpZmUvY21zL2JpbmFyeS83OTYxMzc3LmpwZz9zaXplPXN3NjIweDY1"></图><h1>我们的故事</h1><p>墨西哥美食与文化、社会结构及其流行传统密切相关，其中最重要的例子是在特殊场合和节日使用鼹鼠.出于这个原因和其他原因，墨西哥美食被联合国教科文组织列入其世界非物质文化遗产"名单.<br>回想我们的根源，我们记得我们心爱的瓜达拉哈拉，哈利斯科州，位于墨西哥的西太平洋地区.瓜达拉哈拉是墨西哥的文化中心，被大多数人认为是墨西哥流浪音乐的发源地，并举办过瓜达拉哈拉国际电影节、瓜达拉哈拉国际书展等多项大型文化活动和多项全球知名文化活动.吸引国际人群的活动.<br>这是一座充满传统和色彩的城市.从那里我们为您的餐桌带来一些灵感.从加奶酪的辣椒、美味的莎莎酱到美味的玉米饼汤，我们试图为您提供一点我们的墨西哥传统.</p></div></div></部分><部分><div id="wrapper-two" class="clearfix"><a id="our-specials"></a><h1>我们的特价商品</h1><div class="特价商品"><p>这是一座充满传统和色彩的城市.从那里我们为您的餐桌带来一些灵感.从芝士辣椒酱、美味的莎莎酱到美味的玉米饼汤，我们努力为您介绍我们的墨西哥传统.<p></div><div class="特价商品">这是一座充满传统和色彩的城市.从那里我们为您的餐桌带来一些灵感.从加奶酪的辣椒、美味的莎莎酱到美味的玉米饼汤，我们试图为您提供一点我们的墨西哥传统.</div></div></部分></身体></html>

body,html{边距:0；填充:0；背景颜色:黄色；高度:100%；}图像{最大宽度:100%；}/*******导航栏*******/标头{背景图片:网址(https://sunsetstation.sclv.com/~/media/Images/Page-Background-Images/Sunset/SS_Dining_VivaSalsa2.jpg?h=630&la=en&w=1080)；边距:0；高度:100%；边距底部:85px；背景尺寸:封面；背景重复:不重复；}.header-title{向左飘浮;文字装饰:无；颜色:绿色；字体大小:60px；font-family: 'Monoton'，草书；字体粗细:加粗；}#导航栏{浮动:对；边距:0；}#导航栏李{文字装饰:无；向左飘浮;列表样式类型:无；}.导航链接{向左飘浮;文字装饰:无；文本转换:大写；填充:25px 0；宽度:140px；过渡:.25s 颜色线性，.5s 背景颜色线性；文本对齐:居中；颜色:绿色；字体粗细:加粗；}/*******关于*******/#包装器{宽度:1200 像素；边距:25px 自动；}.our-story 人物{向左飘浮;宽度:50%；边距顶部:8px；}.our-story h1{边距:18px 自动；font-family: 'Pacifico'，草书；字体大小:4em；颜色:绿色；}.our-story p{行高:2.5em；边距:0；font-family: 'Open Sans', sans-serif;字体大小:20px；字体粗细:加粗；}/*************我们的特价商品*************/#wrapper-两个{背景颜色:#b2ff00；}#wrapper-两个 h1{文本对齐:居中；字体大小:4em；font-family: 'Pacifico'，草书；}/*************伪类**************/.header-title:悬停，.header-title:焦点{变换:旋转(360度)；过渡:1s 全线性；}.nav 链接:悬停，.nav 链接:活动的，.导航链接:焦点{背景颜色:浅绿色；白颜色;}.our-story 图:悬停{变换:比例(1.15)；}/**********清除修复**********/.clearfix:之后，.clearfix:之前{内容:" ";显示:表格；明确:两者；}

<!DOCTYPE html><html><头><link rel="stylesheet" type="text/css" href="tiempo de taco.css"><title>Tiempo De taco</title></头><身体><header class="clearfix"><导航><h1><a href="#" class="header-title">Tiempo De Taco</a></h1><ul id="导航栏"><li><a href="#" class="nav-link">首页</a></li><li><a href="#our-story" class="nav-link">我们的故事</a></li><li><a href="#our-specials" class="nav-link">我们的特价商品</a></li><li><a href="" class="nav-link">画廊</a></li></ul></导航></标题><section class="clearfix"><div id="包装器"><a id="我们的故事"></a><div class="我们的故事"><图><img src="aHR0cDovL3d3dy52YW5jb3V2ZXJzdW4uY29tL2xpZmUvY21zL2JpbmFyeS83OTYxMzc3LmpwZz9zaXplPXN3NjIweDY1"></图><h1>我们的故事</h1><p>墨西哥美食与文化、社会结构及其流行传统密切相关，其中最重要的例子是在特殊场合和节日使用鼹鼠.出于这个原因和其他原因，墨西哥美食被联合国教科文组织列入其世界非物质文化遗产"名单.<br>回想我们的根源，我们记得我们心爱的瓜达拉哈拉，哈利斯科州，位于墨西哥的西太平洋地区.瓜达拉哈拉是墨西哥的文化中心，被大多数人认为是墨西哥流浪乐队的发源地，举办过瓜达拉哈拉国际电影节、瓜达拉哈拉国际书展等多项大型文化活动，以及多项全球知名的文化活动.吸引国际人群的活动.<br>这是一座充满传统和色彩的城市.从那里我们为您的餐桌带来一些灵感.从加奶酪的辣椒、美味的莎莎酱到美味的玉米饼汤，我们试图为您提供一点我们的墨西哥传统.</p></div></div></部分><部分><div id="wrapper-two" class="clearfix"><a id="our-specials"></a><h1>我们的特价商品</h1><p>这是一座充满传统和色彩的城市.从那里我们为您的餐桌带来一些灵感.从芝士辣椒酱、美味的莎莎酱到美味的玉米饼汤，我们努力为您介绍我们的墨西哥传统.<p></div><div class="特价商品">这是一座充满传统和色彩的城市.从那里我们为您的餐桌带来一些灵感.从加奶酪的辣椒、美味的莎莎酱到美味的玉米饼汤，我们试图为您提供一点我们的墨西哥传统.</div></div></部分></身体></html>

解决方案

你必须为此使用填充.如果您不希望内部包含的大小大于父级，则与填充一起使用 box-sizing : border-box .

还在#wrapper 和#wrapper-two 中添加 text-align: center 并删除 float: left;来自.specials

请查看以下代码以供参考.

body,html{边距:0；填充:0；背景颜色:黄色；高度:100%；}图像{最大宽度:100%；}/*******导航栏*******/标头{背景图片:网址(https://sunsetstation.sclv.com/~/media/Images/Page-Background-Images/Sunset/SS_Dining_VivaSalsa2.jpg?h=630&la=en&w=1080)；边距:0；高度:100%；边距底部:85px；背景尺寸:封面；背景重复:不重复；}.header-title{向左飘浮;文字装饰:无；颜色:绿色；字体大小:60px；font-family: 'Monoton'，草书；字体粗细:加粗；}#导航栏{浮动:对；边距:0；}#导航栏李{文字装饰:无；向左飘浮;列表样式类型:无；}.导航链接{向左飘浮;文字装饰:无；文本转换:大写；填充:25px 0；宽度:140px；过渡:.25s 颜色线性，.5s 背景颜色线性；文本对齐:居中；颜色:绿色；字体粗细:加粗；}/*******关于*******/#包装器{宽度:1200 像素；边距:25px 自动；填充:50px；box-sizing:边框框；}.our-story 人物{向左飘浮;宽度:50%；边距顶部:8px；}.our-story h1{边距:18px 自动；font-family: 'Pacifico'，草书；字体大小:4em；颜色:绿色；}.our-story p{行高:2.5em；边距:0；font-family: 'Open Sans', sans-serif;字体大小:20px；字体粗细:加粗；}/*************我们的特价商品*************/#wrapper-两个{背景颜色:#b2ff00；填充:50px；box-sizing:边框框；文本对齐:居中；}#wrapper-两个 h1{文本对齐:居中；字体大小:4em；font-family: 'Pacifico'，草书；}.特价{宽度:25%；边距:0 自动；显示:内联块；}/*************伪类**************/.header-title:悬停，.header-title:焦点{变换:旋转(360度)；过渡:1s 全线性；}.nav 链接:悬停，.nav 链接:活动的，.导航链接:焦点{背景颜色:浅绿色；白颜色;}.our-story 图:悬停{变换:比例(1.15)；}/**********清除修复**********/.clearfix:之后，.clearfix:之前{内容:" ";显示:表格；明确:两者；}

<!DOCTYPE html><html><头><link rel="stylesheet" type="text/css" href="tiempo de taco.css"><title>Tiempo De taco</title></头><身体><header class="clearfix"><导航><h1><a href="#" class="header-title">Tiempo De Taco</a></h1><ul id="导航栏"><li><a href="#" class="nav-link">首页</a></li><li><a href="#our-story" class="nav-link">我们的故事</a></li><li><a href="#our-specials" class="nav-link">我们的特价商品</a></li><li><a href="" class="nav-link">画廊</a></li></ul></导航></标题><section class="clearfix"><div id="包装器"><a id="我们的故事"></a><div class="我们的故事"><图><img src="aHR0cDovL3d3dy52YW5jb3V2ZXJzdW4uY29tL2xpZmUvY21zL2JpbmFyeS83OTYxMzc3LmpwZz9zaXplPXN3NjIweDY1"></图><h1>我们的故事</h1><p>墨西哥美食与文化、社会结构及其流行传统密切相关，其中最重要的例子是在特殊场合和节日使用鼹鼠.出于这个原因和其他原因，墨西哥美食被联合国教科文组织列入其世界非物质文化遗产"名单.<br>回想我们的根源，我们记得我们心爱的瓜达拉哈拉，哈利斯科州，位于墨西哥的西太平洋地区.瓜达拉哈拉是墨西哥的文化中心，被大多数人认为是墨西哥流浪乐队的发源地，举办过瓜达拉哈拉国际电影节、瓜达拉哈拉国际书展等多项大型文化活动，以及多项全球知名的文化活动.吸引国际人群的活动.<br>这是一座充满传统和色彩的城市.从那里我们为您的餐桌带来一些灵感.从加奶酪的辣椒、美味的莎莎酱到美味的玉米饼汤，我们试图为您提供一点我们的墨西哥传统.</p></div></div></部分><部分><div id="wrapper-two" class="clearfix"><a id="our-specials"></a><h1>我们的特价商品</h1><div class="特价商品"><p>这是一座充满传统和色彩的城市.从那里我们为您的餐桌带来一些灵感.从芝士辣椒酱、美味的莎莎酱到美味的玉米饼汤，我们努力为您介绍我们的墨西哥传统.<p></div><div class="特价商品">这是一座充满传统和色彩的城市.从那里我们为您的餐桌带来一些灵感.从加奶酪的辣椒、美味的莎莎酱到美味的玉米饼汤，我们试图为您提供一点我们的墨西哥传统.</div></div></部分></身体></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="aHR0cDovL3d3dy52YW5jb3V2ZXJzdW4uY29tL2xpZmUvY21zL2JpbmFyeS83OTYxMzc3LmpwZz9zaXplPXN3NjIweDY1">
      </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="aHR0cDovL3d3dy52YW5jb3V2ZXJzdW4uY29tL2xpZmUvY21zL2JpbmFyeS83OTYxMzc3LmpwZz9zaXplPXN3NjIweDY1">
      </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="aHR0cDovL3d3dy52YW5jb3V2ZXJzdW4uY29tL2xpZmUvY21zL2JpbmFyeS83OTYxMzc3LmpwZz9zaXplPXN3NjIweDY1">
      </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) 的全宽背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！