包装器分区的 CSS



我是无表布局的新手,最近在表格布局中设计的网站。现在将表格布局转换为无表布局。我正在使用网站的背景图像。我在包装器div 中遇到问题,我给包装器div 提供了背景颜色和阴影,但它不适用。引导我出错的地方

.HTML:

<body>
<div id="wrapper">
</div>
</body>

.CSS:

body
{
background-image:url(../images/site-bg-5.jpg);
}
#wrapper {
width: 950px;
height:1500px;
margin: 0 auto;
background-color: #FFF;
box-shadow: 0 0 10px #000;
border: 1px solid #000;
}

我遇到问题,包装器div 有阴影和边框,但它具有特定的高度。 我希望阴影和边框高度自动调整包装器div 的高度。 向工作小提琴展示执行此操作的正确方法。

"#"和单词"wrapper"之间有一个空格。删除它,它应该可以工作。

这应该是最终的 css:

body{
  background-image:url(../images/site-bg-5.jpg);
}
#wrapper {
  width:950px;
  margin:0 auto;
  background-color:#FFF;
  box-shadow: 0 0 10px #000;
  border:1px solid #000;
}

#wrapper是正确的

body {
  background-image: url(../images/site-bg-5.jpg);
}
#wrapper {
  width: 950px;
  margin: 0 auto;
  background-color: #FFF;
  box-shadow: 0 0 10px #000;
  border: 1px solid #000;
}
<body>
  <div id="wrapper">
df
  </div>
</body>

试试这个css

body{background-image:url(../images/site-bg-5.jpg); }
#wrapper{width:950px;margin:0 auto;background-color:#FFF;box-shadow: 0 0 10px #000;border:1px solid 000;}

删除#和包装器之间的空格,它将起作用

还要添加height

这是工作小提琴:演示

在此处查看演示:查看演示

#wrapper {
width:950px;
margin:0 auto;
background-color:#FFF;
box-shadow: 0 0 10px #000;
border:1px solid #000;
}

最新更新