2

リンクは 1em sans-serif フォントで、パディングが 5 および 10 ピクセル、余白が 0 0 1 ピクセルである必要があります (ヒント: 省略形のプロパティを使用してください)。右側の境界線は 5 ピクセルで、色は #ff1828 である必要があります

b. ユーザーがリンクの上にカーソルを置いたとき、右の境界線は 5 ピクセルの白の 2 倍のスタイルにする必要があります

c. 起動時には、パスタの 3 つの画像の下にテキストが表示されないようにする必要があります。タグを使用して、ホバリング時の表示テキスト ポップアップを制御します。上余白が 220 ピクセル、左余白が 550 ピクセルの絶対値としてテキスト ブロックを配置します。ブロックの幅は、調査で見つけたテキストの量に応じて、最小で 180 ピクセルにする必要があります。5 ピクセルのパディングと 10 ピクセルのマージンを使用します。テキストは黒の背景に白でなければなりません。

私はすべてを試してきましたが、これは私がこれまでに持っているものであり、何も機能していません. 何が間違っているのかよくわかりませんか？誰かが助けてくれれば、きっと感謝します。これまでの私のコードは次のとおりです。

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab 7-3</title

<style type="text/css">
<!--

#links {font: 1 em sans-serif; padding: 5px 10px; margin: 0px 0px 1px, border-right: 5px color: #ff1828}

div.links:hover {border-right: double 5px; color:white}

<span>
div#sizes a:hover img.large {position: absolute; top: 220px; left: 550px; 
                            width: 180px; border:none; padding: 5px; margin: 10px
                            background-color: #000000; color: #ffffff}

</span>     
-->
</style>                    

</head>

<body>

<img src="sabatinaslogo.jpg" width="735" height="190" alt="Sabatina's logo" />
<p style="font-size: large">Hover over a photo to read about the pasta dish and its nutrition information.</p> 

<div id="links" "demo">
<table style="text-align: center">
    <tr>

    <td>
        <a><img class="picture" src="fettuccine.jpg" width="200" height="200" alt="Fettucine"  title="Ingredients include:enriched durum flours, egg, water, soy lecithin. Nutritional facts: Approximately 200 calories, 3.2% total fat, 12.5% cholesterol, 16.7% protein, 1.7% calcium and 8.3% iron"/>

    </td>

    <td>
        <a><img class="picture" src="lasagna.jpg" width="200" height="200" alt="Lasagna" title=" Ingredients include: ground beef, cheese, enriched pasta and tomato sauce. Nutritional facts: Approx. 377 calories per serving, 13% fiber, approx. 50% protein, and approx. 35% sodium" />
    </td>

    <td>
        <a><img class="picture" src="ravioli.jpg" width="200" height="200" alt="Ravioli" title=" Ingredients include: water, durum wheat semolina, beef, wheat flour, egg, vegetable oil, salt, onion flavoring, tomatoes, sugar, cornflour, herb extracts, salt, garlic salt, spice extracts, black pepper. Nutritional facts: 2.6g of protein, 1.6g of fat, 0.8 g of fiber and 0.3g of sodium" />
    </td>
    </td>
</table>


</div>


</body>
</html>
4

3 に答える 3

1

この質問が出されてから長い時間が経ちましたが、将来この質問をグーグルで検索する人々の利益のために、別の解決策として、Twitter の Bootstrap CSS プラットフォームを使用することが考えられます。ここを参照してください: http://getbootstrap.com/javascript/#popovers

JQuery と CSS ファイルを実装する必要がありますが、2 行のコードを追加することで比較的簡単に実現できます (ファイルの上部にある「はじめに」セクションを参照してください)。

于 2015-06-25T09:17:38.327 に答える
0

あなたのタイトルタグは閉じられていません:p

また、あなたのdivまたはimgクラス以外への参照は見られません

img.large

試す

img.title

また

.picture.title

これは、それぞれ img タグの img タグ セレクターまたはクラス セレクターになります。

.className は任意の要素のクラス名を参照し、後者は要素の title 属性を参照します。

これを試してみてください。私はこれをテストしていないので、結果を確信することはできませんが、うまくいけば役に立ちます:

それ以外の：

div#sizes a:hover img.large

と置換する：

img.title **or** .picture.title

幸運を祈ります。

(経験としての CSS の使用、ref としての w3schools)

于 2013-03-17T23:04:11.023 に答える