0

我正在学习如何创建从 Photoshop 到 HTML+CSS 代码的固定表格 CSS 布局的教程。

这是本教程提出的最后一个示例（它在最后的样子）：

http://www.html.it/articoli/1688/template/11-css.html

这是我以前模板的个人版本：http: //onofri.org/example/WebTemplate/

你怎么能看到我在 Firefox 中左栏的左阴影有问题（在其他浏览器中我有其他问题）

在示例模板中，我通过将bgpage.gif图像设置为 #container div 的背景并将其放在此 div 的右侧来创建此阴影

容器 {

/* /* consente di posizionare un elemento al centro del suo contenitore (non tutti i browser la supportano) */
margin: 0 auto;
width: 770px;   /* Imposto la larghezza */
background: url(../images/bgpage.gif) repeat-y scroll 100% 0 transparent;

}

为什么在本教程提出的示例中运行良好而在我的例子中不起作用？

有人可以帮我解决吗？

肿瘤坏死因子

安德烈亚

4

1 回答 1

1

出现您页面中的问题是因为两个图像重叠。更准确地说：

bg4.jpginbody与bgnarrowcolumn.jpgin重叠#container。

要修复它，只需添加以下 CSS 规则：

background: url(../images/bgpage.gif) repeat-y scroll 103% 0 transparent;

将 100% 更改为 103%。

正如我所看到的，在教程页面中使用的是这种方法（我的意思是，使用图像制作背景）。我说这种做网站、做网页展示的方式已经过时了，难度很大；如你所见。此外，您将可以访问服务器，因为需要许多图像（不好的做法）。

为什么需要使用图像？在我看来，最好的方法是使用 CSS3：

这是一个带有阴影的示例的 Jsfiddle：DEMO

如果要制作渐变背景，只需添加gradient属性即可。

于 2013-07-06T19:50:15.257 回答