コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > :Solution_html/css_WEB-ITnose

:Solution_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:50:06
オリジナル
1115 人が閲覧しました

要件:
「長方形の div ブロック」を作成し、その背景として「長いストリップの背景画像.jpg」を使用します。画像の領域は「長方形の div ブロック」よりも小さいです。
4 つの div サブブロックを作成します。 「長方形の div ブロック」の上に、
4 つのサブブロックの幅がそれぞれ 25% を占め、半透明で、色は「青、緑、黄、紫」です。
各 div ブロックの高さは 300px、幅はアダプティブ ページ サイズである必要があります。


私の計画は次のとおりです。完全に正しくありません。独自の解決策を提示して書き留めてください。ありがとう
HTML ファイルは次のとおりです。


1

2

class= "bottom_top pic">4

---------------------------- -------------------------------------------------- --
CSS ファイルは次のとおりです:
.bottom_top{
width:100%;
height:300px;
background-size:50%;インデックス:10;
.pic{
高さ:300px;
背景色: オレンジ; :30;
}





ディスカッションへの返信 (解決策)

4 つの div サブブロック、フローティング、相対位置、長さを自分で計算するだけです、


関連ラベル：
：解决方案
ソース：php.cn
前の記事：DIVで長い横線を実現するにはどうすればよいですか?その他_html/css_WEB-ITnose 次の記事：CSS 関連。 入力フィールドをクリックすると色付きの境界線が表示されます_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
customer_name 列から名を取得する方法 selectsubstring(custommer_name,1,instr(custommer_name,''))asfirst_namefromsales.customers;...
から 2024-04-06 17:43:30
0
2
433
SCSSを使用してデフォルト値とCSS変数を生成する ウェブサイトのスタイリングを実装しています。レガシー サポートの理由から、少なくともしばらくの間は IE11 をサポートする必要があります。ワークフローと私の健全性の理由から、私は...
から 2024-04-06 17:46:54
0
1
355
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート