ホームページ > 記事 > ウェブフロントエンド > CSS+DIV Web ページのスタイルとページのレイアウトに精通している background_html/css_WEB-ITnose
CSS+DIV Web ページのスタイルとページのレイアウトに精通している background_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:171233ブラウズ
前回のブログでは、CSS の画像効果について簡単に説明しました。次に、CSS が Web ページの背景をどのように設定するかについて説明します。Web ページの背景は Web ページ全体の重要な部分です。 Web ページ全体のスタイルと色合い。 CSSを使って背景色や背景画像を設定する方法を簡単にまとめたブログです。まず、写真を見てみましょう:
次に、上記のマインドマップの文脈に沿って、編集者が各知識ポイントを詳しく説明します。まず、ページの背景色、サンプルコードを見てみましょう。実行時の効果は次のとおりです。 表示:
面 ページの背景色
<span style="font-size:18px;"><span style="font-size:18px;"><html><head><title>背景颜色</title><style><!--body{ background-color:#5b8a00; /* 设置页面背景颜色 */ margin:0px; padding:0px; color:#c4f762; /* 设置页面文字颜色 */}p{ font-size:15px; /* 正文文字大小 */ padding-left:10px; padding-top:8px; line-height:120%;}span{ /* 首字放大 */ font-size:80px; font-family:黑体; float:left; padding-right:5px; padding-left:10px; padding-top:8px;}--></style> </head><body> <img src="mainroad.jpg" style="float:right;"> <span>春</span> <p>季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。</p> <p>对农民来说，春季是播种许多农作物的季节。在春季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。</p></body></html></span></span>E 効果は次のとおりです: CSS の背景色設定は特に単純です: 背景色、16 進数の設計方法が使用されます。背景色は、Web ページの背景色を設定するだけでなく、Web ページをブロックに分割することもできます。我们接下来看，用背景色给页面分块，例和代码如下示：
用背景色给页面分块
<span style="font-size:18px;"><span style="font-size:18px;"><html><head><title>利用背景颜色分块</title><style><!--body{ padding:0px; margin:0px; background-color:#ffebe5; /* 页面背景色 */}.topbanner{ background-color:#fbc9ba; /* 顶端banner的背景色 */}.leftbanner{ width:22%; height:330px; vertical-align:top; background-color:#6d1700; /* 左侧导航条的背景色 */ color:#FFFFFF; text-align:left; padding-left:40px; font-size:14px;}.mainpart{ text-align:center;}--></style> </head><body><table cellpadding="0" cellspacing="1" width="100%" border="0"> <tr> <td colspan="2" class="topbanner"><img src="banner1.jpg" border="0"></td> </tr> <tr> <td class="leftbanner"> <br><br>首页<br><br>分类讨论 <br><br>谈天说地<br><br>精华区 <br><br>我的信箱<br><br>休闲娱乐 <br><br>立即注册<br><br>离开本站 </td> <td class="mainpart">正文内容...</td> </tr></table></body></html></span></span> 运行效果如：
分析上面の代码我们可以本文全体をブロックに分割するためにテーブルが使用されていることがわかります。上記の表示効果が見られます。ここで注意すべき点は、コード内でテキスト部分の色を設定しているのではなく、トップバナーとトップバナーで色を設定していることです。 leftbanner ただし色は設定されているので、色が設定されていない場合は本体の色を継承し、設定後は元のものを上書きします。背景色を使用し、Web ページ全体をブロックに分割することで、優れたレイアウト効果を実現できます。 CSSは、ページの背景色を設定するだけでなく、背景のコードと実行効果を見てみましょうこのページを縦横に埋め尽くしている小さな絵は? 伝説の五つ葉のクローバーは自信と強さを表しています。どんな困難に直面しても、自信を持って新年を迎えられることを願っています。勇気と恐れを知らずに、小さな画像の繰り返しでページ全体を埋めることができることを確認しましたが、このように繰り返したくない場合は、どのように設定すればよいでしょうか。以下の例とコードを見てください:
<span style="font-size:18px;"><html><head><title>背景图片</title><style><!--body{ background-image:url(03.jpg); /* 页面背景图片 */}--></style> </head><body></body></html></span>E の背景画像の繰り返しの動作効果は次のとおりです:
背景の繰り返しをRepeat-Xに設定すると、どのような驚きが起こるでしょう。待っててね、友達、友達、小さな友達、あなたも試してみてください。X 軸でも Y 軸でも、すべて左上隅から始まります。これらをどのように設定する必要がありますか？背景画像の位置と実行効果は次のとおりですページ全体の背景、その上にテキスト。先ほどのエフェクトを見ると、背景画像とテキストの相対位置は固定されており、画像と一緒に移動することがわかります。では、固定の背景画像を設定するにはどうすればよいでしょうか。次の例とその実行結果を見てみましょう:
through スルー off off off ‐ ‐ ‐‐‐ out 固定、画像の移動に合わせて背景画像も移動しません。寄编
语语 : このブログ投稿は主にページの背景の設定に関する関連知識を要約し、主にページの背景を接続し、背景色を使用してページ ブロック、ページの背景画像、背景画像の複製、背景画像の画像を分割します。画像の位置と固定の背景画像を使用して、ページをブロックに分割します。 ここで言いたいのは、本文全体でブロックを分割するために使用される表示効果です。テキスト部分には色が設定されていませんが、トップバナーとレフトバナーには色が設定されているため、色が設定されていない場合は本文の色を継承し、設定後は元の色を上書きします1つ。背景色を使用し、Web ページ全体をブロックに分割することで、優れたレイアウト効果を実現できます。 BSの勉強はまだまだ続きます...