-2

回答をコピーして、最終的なコードを貼り付けていただけますか? これは、HTML を使用した画像の画像マッピング コードです。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 を 1 つのファイルに入れ、html を別のファイルに入れ、html ファイルのセクションから css ファイルをリンクすること<head>です (多くの理由から、ベスト プラクティスを維持しようとしますが、主な理由はコードの保守性です)再利用性 -- これらのファイルを分割することで、コードを読みやすく保守しやすくし、複数の 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>

スタイル.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 に適用する場合は、代わりに使用して css を にclass=stylediv変更します。#stylediv.stylediv

于 2013-04-20T07:16:10.957 に答える
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 に答える
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 は # を使用し、クラスは .

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

#divName である CSS でセレクターを使用する必要があります

于 2013-04-20T07:07:06.120 に答える