Question

在编码方面，我是个新手。我现在正在学校上课，而且我正在尝试创建一个页面问题。我现在正在学习CSS，在练习页面中，我将我的盒子阴影包含在#container中并没有出现在我的div中。当我打开＆＃34;回答＆＃34;页面测试我的浏览器显示，但在我的页面上几乎完全相同的代码，它没有。任何帮助将不胜感激，因为这让我发疯。这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Bistro</title>
<meta charset="utf-8">
<style>
body {background-image: url(background.jpg);
font-family: Arial, Verdana, sans-serif;
}
h1 { background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
height: 100px; width: 650px;
font-size: 3em; 
padding-left: 150px; padding-top: 30px;
border: 1px solid #000033;
border-radius: 15px; 
text-shadow: 3px 3px 3px #666;
}
h2 { color: #000033; 
font-family: arial, sans-serif;
text-shadow: 1px 1px 0 #ccc;
}
#container { background-color: #ffffff;
padding: 20px;
width: 80%; min-width: 800px; max-width: 960px;
margin-right: auto;
margin-left: auto;
box-shadow: 5px 5px 5px #lelele; 
}
footer { font-size: .80em;
font-style: italic;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>Lighthouse Bistro</h1>
</header>
<nav><a href="index.html">Home</a> &nbsp;<a href="menu.html">Menu</a> &nbsp;
<a href="directions.html">Directions</a> &nbsp;<a 
href="contact.html">Contact</a></nav>
<main>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are
available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-
fruit muffins, scones, croissants, and cinammon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with
locally-grown salad, fruit, and vegetables. </p>
</main>
<footer>Copyright &copy; 2014 Your Name Here</footer>
</div>
</body>
</html>

Answer 1

您当前使用的box-shadow实际上并未使用颜色。相反，您有#lelele而不是#1e1e1e。不同的是，第一个不是颜色，因为你使用的是小写的L's。

Answer 2

你的#lelele不是颜色代码所以请更改颜色并执行此代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Lighthouse Bistro</title>
    <meta charset="utf-8">
    <style>
    body {background-image: url(background.jpg);
    font-family: Arial, Verdana, sans-serif;
    }
    h1 { background-image: url(lighthouselogo.jpg);
    background-repeat: no-repeat;
    height: 100px; width: 650px;
    font-size: 3em; 
    padding-left: 150px; padding-top: 30px;
    border: 1px solid #000033;
    border-radius: 15px; 
    text-shadow: 3px 3px 3px #666;
    }
    h2 { color: #000033; 
    font-family: arial, sans-serif;
    text-shadow: 1px 1px 0 #ccc;
    }
    #container { background-color: #ffffff;
    padding: 20px;
    width: 80%; min-width: 800px; max-width: 960px;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 2px 2px 10px #ff0000; 
    }
    footer { font-size: .80em;
    font-style: italic;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <header>
    <h1>Lighthouse Bistro</h1>
    </header>
    <nav><a href="index.html">Home</a> &nbsp;<a href="menu.html">Menu</a> &nbsp;
    <a href="directions.html">Directions</a> &nbsp;<a 
    href="contact.html">Contact</a></nav>
    <main>
    <h2>Locally Roasted Free-Trade Coffee</h2>
    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are
    available hot or cold.</p>
    <h2>Specialty Pastries</h2>
    <p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-
    fruit muffins, scones, croissants, and cinammon rolls.</p>
    <h2>Lunchtime is Anytime</h2>
    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with
    locally-grown salad, fruit, and vegetables. </p>
    </main>
    <footer>Copyright &copy; 2014 Your Name Here</footer>
    </div>*emphasized text*
    </body>
    </html>

Box-Shadow没有出现

2 个答案: