Question

你能用最终代码复制并粘贴你的答案吗？这是具有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>

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

由于

Answer 1

您没有为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 {}选择器，最好使用类而不是使用元素选择器

Demo

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

Answer 2

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

例如：

的index.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>

styles.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，则应使用class=stylediv并将css中的#stylediv更改为{{1} }。

Answer 3

<强> 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;
}

Answer 4

您需要使用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

的选择器

如何将CSS代码与HTML代码结合起来？我想把它们结合起来？

4 个答案: