-1

我已经查看了这里的其他答案，但一直遇到同样的问题，我对 webdev 也很陌生。

我试图创建一个<div>宽度为 960 像素的封装整个页面，然后为其添加阴影。

每当我尝试其他人发布的解决方案时，所发生的只是阴影应用于页面顶部的徽标图像但没有其他地方，即阴影不会继续超过徽标并封装导航栏，内容等。这是我的代码；

<body>

    <div=id"page">

    <header>

        <img src="images/blank_logo.png" height="243"  width="744" class="center">


            <nav>
                <ul>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                </ul>   
            </nav>

    </header>   

        <div id="content">
        <img src="images/ph.jpg" width="475" height="267" class="left">
        <img src="images/ph2.jpg" width="478" height="267" class="right">
        </div>

    </div>

</body>

这是CSS；

body {

 width: 100%;
 max-width: 960px;
 margin: 0 auto;

}

#page {
-webkit-box-shadow:0px 5px 10px #1c1c1c;
-moz-box-shadow:0px 5px 10px #1c1c1c;
box-shadow:0px 5px 10px #1c1c1c;
}

谁能看到我哪里出错了？

4

4 回答 4

1

这是第一个 div 中的错字

<div=id"page">应该<div id="page">

这是阴影工作的小提琴（确保将结果窗口放大，否则您将看不到阴影）：

https://jsfiddle.net/4d4gt6kn/

于 2017-05-31T07:45:06.307 回答
0

这是一个拼写错误<div=id"page">它将是<div id="page">

于 2017-05-31T07:45:39.317 回答
0

删除margin: 0 auto;并body更新其他人提到的拼写错误（<div=id"page">到<div id="page">）

解决方案：

body {

 width: 100%;
 max-width: 960px;
 /* margin: 0 auto; */

}

#page {
-webkit-box-shadow:0px 5px 10px #1c1c1c;
-moz-box-shadow:0px 5px 10px #1c1c1c;
box-shadow:0px 5px 10px #1c1c1c;
}
<div id="page">

    <header>

        <img src="images/blank_logo.png" height="243"  width="744" class="center">


            <nav>
                <ul>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                    <li>
                        <a href="blank.html">blank</a>
                    </li>
                </ul>   
            </nav>

    </header>   

        <div id="content">
        <img src="images/ph.jpg" width="475" height="267" class="left">
        <img src="images/ph2.jpg" width="478" height="267" class="right">
        </div>

    </div>

工作的jsFiddle

于 2017-05-31T07:45:59.707 回答
0

是<div id="page">，不是<div=id"page">。我认为这就是问题所在。

于 2017-05-31T07:52:20.413 回答