-2

您能否使用最终代码复制并粘贴您的答案？这是一个带有 HMTL 的图像的图像映射代码，我现在想给它添加一个 CSS 阴影。

这是代码： 

<style>
{
-moz-box-shadow: 15px 15px 15px #888;
-webkit-box-shadow: 15px 15px 15px #888;
box-shadow: 15px 15px 15px #888;
}

</style>

下面是我需要将 CSS 阴影代码添加到其中的图像的 HTML 代码：

<div style="text-align:center; width:1130px; auto; auto;">
<img id="Image-Maps_9201304191940558" src="http://images.mylot.com/userImages/images/postphotos/2080106.jpg" usemap="#Image-Maps_9201304191940558" border="0" width="1130" height="2808" alt="" />

<map id="_Image-Maps_9201304191940558" name="Image-Maps_9201304191940558">
<area shape="rect" coords="293,566,385,603" href="http://www..com/about" alt="about" title="about" />
<area shape="rect" coords="631,568,720,603" href="http://www..com/contact" alt="contact" title="contact" />

</map>

</div>

所以我只想将代码组合在一起！我最初在雅虎答案上问过这个问题，所以现在我在这里问它，因为没有人可以帮助那里。

谢谢

4

4 回答 4

2

您没有为 CSS 声明使用任何选择器

div {
    -moz-box-shadow: 15px 15px 15px #888;
    -webkit-box-shadow: 15px 15px 15px #888;
    box-shadow: 15px 15px 15px #888; 
}

如果您需要定位 img 标签，您可以使用div img {}选择器，最好使用类而不是使用元素选择器

演示

注意 - 阴影位于底部，因此您需要向下滚动。

于 2013-04-20T07:03:36.753 回答
2

'正确'的方法是将css放在一个文件中，将html放在另一个文件中，然后从<head>html文件的部分链接css文件（出于多种原因，我们尝试维护最佳实践，但主要原因是代码可维护性和可重用性——通过拆分这些文件，您可以使代码更具可读性和可维护性，并允许自己在多个 HTML 文件中重用 css 文件）。

例如：

索引.html：

<html>
<head>
    ...
    <link rel='stylesheet' type='text/css' href='styles.css'>
</head>
<body>
    <div id='stylediv'>
        <img id="Image-Maps_9201304191940558" src="http://images.mylot.com/userImages/images/postphotos/2080106.jpg" usemap="#Image-Maps_9201304191940558" border="0" width="1130" height="2808" alt="" />

        <map id="_Image-Maps_9201304191940558" name="Image-Maps_9201304191940558">
            <area shape="rect" coords="293,566,385,603" href="http://www.google.com/about" alt="about" title="about" />
            <area shape="rect" coords="631,568,720,603" href="http://www.google.com/contact" alt="contact" title="contact" />
        </map>

    </div>
</body>
</html>

样式.css：

#stylediv {
    text-align:center; 
    width:1130px; 
    margin: auto;
    -moz-box-shadow: 15px 15px 15px #888;
    -webkit-box-shadow: 15px 15px 15px #888;
    box-shadow: 15px 15px 15px #888;
}

允许将样式置于行内。您甚至可以将它们放在标签的style=属性中，但以上是最佳实践。<div>

请注意，这id是唯一的，因此如果您想将上述 css 应用于多个 div，您将改为使用cssclass=stylediv并将其更改#stylediv为.stylediv.

于 2013-04-20T07:16:10.957 回答
1

HTML

<div>
  <img id="Image-Maps_9201304191940558" src="http://images.mylot.com/userImages/images/postphotos/2080106.jpg" usemap="#Image-Maps_9201304191940558" border="0" width="1130" height="2808" alt="" />
  <map id="_Image-Maps_9201304191940558" name="Image-Maps_9201304191940558">
    <area shape="rect" coords="293,566,385,603" href="http://www.google.com/about" alt="about" title="about" />
    <area shape="rect" coords="631,568,720,603" href="http://www.google.com/contact" alt="contact" title="contact" />
  </map>
</div>

CSS

div {
  text-align: center;
  width: 1130px;
}

img {
  -moz-box-shadow: 15px 15px 15px #888;
  -webkit-box-shadow: 15px 15px 15px #888;
  box-shadow: 15px 15px 15px #888;
}
于 2013-04-20T07:05:48.117 回答
1

您需要用 div 的名称命名 css

<style>
#divName{
-moz-box-shadow: 15px 15px 15px #888;
-webkit-box-shadow: 15px 15px 15px #888;
box-shadow: 15px 15px 15px #888;
}
<style>

然后你的 html div 需要有匹配的 divName

id 使用 # 而 class 使用 .

<div id="divName"> Pic with Shadow </div>

需要在 CSS 中使用选择器 #divName

于 2013-04-20T07:07:06.120 回答