写真と言葉を交換するためのいくつかの方法とアイデア_交換体験

今日、友人が Web ページを作成するときに問題に遭遇しました。彼はリンクの背景を保持したいと考えていましたが、リンク内のテキストも消去したいと考えていました。しかし、長い間取り組んできた後でも、このテキストを取り除くことができませんでした。標準を勉強している多くの友人がこの問題に遭遇していると思います。ここでは、標準を学び始めたばかりの友人を助けるために、一般的に使用されるいくつかの方法を書き留めてそのアイデアを説明します。

「言葉を絵に」とは、文字表現を絵に置き換えることです。ブラウザでのテキストの表現が非常に貧弱であることは誰もが知っています。ギザギザで、丸くすることができず、多くの効果を与えることができません。通常の状況では、Web ページのコンテンツ部分に影響を与える必要はありませんが、WEB 標準では、ロゴやタイトルにこれらの部分が必要になることがよくあります。テーブルを使用する場合は、画像をどこかに投稿するだけです。この方法は比較的簡単ですが、検索には役立ちません。したがって、Web ページが良好な状態にあり、検索に適していることを確認するには、標準的な方法でこれを行う必要があります。通常、図

に示すように表示されます: (display:none;) これにより、コンテナーの内容が消えるだけでなく、コンテナー自体も消えます。したがって、コンテナ内に別のコンテナを作成して、内側の部分が消えた後もコンテナ内の背景が正常に表示されるようにする必要があります。例:

コードをコピー コードは次のとおりです:

Title content

#logo {display:none; background:URL; width:300px; height:100px;}

このように書くと、何も表示されません。では、正しい書き方は何でしょうか？例を見てください:

コードをコピー コードは次のとおりです:

タイトルコンテンツ

#logo {background:URL; width:300px; height:100px;}#logo span {display:none;}

ください上記のコードに注意してください。背景は #logo の下で定義されており、#logo span には display:none; 以外のスタイルがありません。 display:none; 属性が定義されたコンテナには何も表示されないため、他のスタイルを定義するのは無駄です。これだけではまだ問題があります。これはリンクがない例です。では、リンクがある場合はどうすればよいでしょうか。別の例を見てみましょう:

コードをコピー コードは次のとおりです:

タイトルの内容

#logo {background:URL; height:100px;}# logo a {display:none;}

このコードで何が表示されるかわかりますか?実際には、背景は表示されますが、リンクが消えています。上で述べたように、display:none 属性が割り当てられたコンテナ自体も消えます。次に、この A タグにコンテナを追加する必要があることが明確にわかります。もう一度例を見てみましょう。

コードをコピー コードは次のとおりです。

< div id="ロゴ ">タイトルの内容

#logo {background:URL; width:300px; height:100px;}#logo a span {display:none;}

これは正しいですか?それでも機能しないのはなぜでしょうか? A がブロックレベルのタグではないことは誰もが知っています。つまり、A の高さと幅はコンテンツによって決定され、コンテンツが消滅したため、高さと幅の属性は存在しなくなります。 , ということでリンクは ホットゾーンのないリンクになってしまいました。点灯しない場合があります。上記のコードを再度変更する必要があります。

コードをコピー コードは次のとおりです:

タイトルの内容

#logo a {background:URL width:300px; 100px; display:block;}#ロゴ、スパン {display:none;}

Note that the attribute of the A tag here must be added with display:block; to force it to be a block-level element. In this way, the A tag becomes a link form with a width of 300 and a height of 100, with a background and no text content. Everyone saw that a span tag was added to the A tag above, which seems a bit redundant. Can the effect be achieved without span? Yes, but the idea is different, it is the following position shifting method.

Position movement: that is, the content is moved out of the display area. Let’s look at the code to understand this method.

Copy code The code is as follows:

< a href="URL" title="Title">Title content

#logo, #logo a {width:300px; height:100px; overflow:hidden;}#logo a {background :URL; padding:100px 0 0; display:block;}

In CSS, #logo and A have an overflow hidden (overflow:hidden;), which means that if the size exceeds 300*100, it will be hidden. . We see that A is defined with a padding: 100px 0 0; This top padding just pushes the content outside the display area. So why does #logo also use overflow:hidden;? Because there will be a small bug under IE, the content of A cannot overflow and hide, so it is necessary to add an overflow:hidden on the parent tag;

The above are just two of my more commonly used methods. Of course, there are other methods, each of which has its own shortcomings, but the various methods are also complementary to each other. You can choose to use it according to the situation when applying.