HTML と CSS を含む JD.com のホームページの静的ページ効果を 3 日間で完成させます。 1.開発の前に、まず開発環境を構成する必要があります。Sublime、WebStorm、Vscode、Hbuilder、Atom などの開発ソフトウェアをインストールする必要があります。いずれか 1 つを選択してください。私はWebstormを使用しています。 2.メイン フォルダー内に関連するプロジェクト フォルダーを作成します。プロジェクト関連のファイルをまとめて、管理と将来のメンテナンスを容易にします。 その中には、プロジェクトに関連するいくつかのファイルが含まれています ホームページまたはホームページ index.html default.html CSS フォルダ CSS ファイル ベース.css グローバル.css 画像フォルダは、Web サイト上のすべての画像を保存するために使用されます。 Jsファイル オーディオまたはビデオファイル 3.その後、スタイルの初期化を実行する必要があります。通常、すべての Web サイトは開発前にスタイルの初期化を実行します。たとえば、Taobao や JD などの大規模な Web サイトには、独自のスタイル初期化 CSS ファイルがあります。のように: XML/HTML コードコンテンツをクリップボードにコピー
これにより、開発者は各タグのスタイルを初期化し、共通クラスを再利用しやすくなります。 4.ウェブサイトの構造を分析する ウェブサイトを作る際の標準または一般的な慣行もあります レイアウトの順序は通常、上から下、左から右になります。 ページを作成するときは、一般的には標準フローの要素を使用し、次にフローティングまたは配置を使用することが考えられます。 標準フロー要素の中では、幅と高さが最も安定しているため、パディングが最初に使用され、マージンが最後に使用されます。 ウェブサイト構造内のどのタグもボックスモデルとみなされ、幅と高さを設定できます。ただし、一部の要素では、幅と高さを設定しても機能しません。 インライン要素の幅と高さを機能させるには: 1. インライン要素をブロックレベル要素またはインラインブロック要素に変換する 2. フローティングラベル 3. 位置決めとラベルの取り外し インライン ブロック要素をレイアウトする場合、インライン ブロック要素間にはデフォルトで数ピクセルの間隔が設けられます。これらの数ピクセルの間隔は、フロートを使用してのみクリアできます。 位置決めには 4 つの種類があります。 固定絶対相対静的 通常、Web サイトの構造を分析する場合、Firefox を使用してこの Web ページのスクリーンショットを撮って保存できます。 次に、Fireworks を使用して、Web サイト上の特定のコンテンツの幅、高さ、色などを抽出できます。 Fw の一般的なショートカットキー: スポイトツールで色を拾う K スライスツール 要素の幅を計測する Z 拡大鏡ツール Vムーブ ポインターツール よく使用される複合属性: 背景 mso-char-indent-count:3.4900;">フローティングの理由は、親ボックスに高さがないためです。元の高さは、標準フロー内の子要素によってサポートされます。ただし、子要素がフローティングすると、標準フローから外れ、親要素の高さが 0 になります。 1.親ボックスの高さを設定する 2. クリア:両方 3. オーバーフロー: 隠しはBFCモードをトリガーし、フローティングをクリアするためにも使用できます。 4. 擬似要素または二重擬似要素除去法 XML/HTML コードコンテンツをクリップボードにコピー
(疑似要素はフロートをクリアするためによく使用されます) 配置要素の階層: trbl値を書き込まずに要素に絶対位置のみを指定すると、その位置に表示されます。 配置された要素 (相対的および絶対的または固定的) には、階層のプロパティまたは概念があります。複数の隣接する要素が同じ位置に配置されている場合、デフォルトでは後者の要素が前者の要素を抑制します。両方とも配置された要素である場合、デフォルトではレベルはすべて 0 ですが、後者の要素は前者の要素を抑制します。現在の要素をその背後にある要素の上に表示したい場合は、z-index を使用して階層を変更する必要があります。 z-index の値の範囲は 0 ~ 9999999 です。正の数を使用し、負の数を使用しないようにすることをお勧めします。 また、position:relative は標準フローでの位置を占有し続けるため、そのレベルで他のコンテンツが表示されなくなることに注意してください。 不透明度: 互換性の問題があり、背景色を透明にするだけでなく、内部のコンテンツも透明になります。 背景: rgba(0,0,0,.3); 背景色のみを透明にし、コンテンツを不透明にする 隣接要素の階層 マウスがTaobaoのウェブページに入ると境界線が点滅します XML/HTML コードコンテンツをクリップボードにコピー
このように、ホバー疑似要素を使用して、隣接する要素の階層を利用して境界線の色やその他のプロパティを制御し、Taobao と同じ効果を実現できます。 シンプルな HTML と CSS の使い方に関する上記の詳細な説明は、エディターが皆さんと共有する内容のすべてです。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 オリジナルURL: http://www.cnblogs.com/moyong/archive/2016/07/27/5709491.html |
1. 需要3 つのテーブルがあります。一定期間にわたるさまざまな抗生物質感受性の結果、つまり rep...
1. 切断理由WebSocket が切断される理由は多数あります。WebSocket が切断されたと...
Vue プロジェクトを開発する場合、さまざまなコンポーネント ページを表示するために切り替えることが...
私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...
今日、私は公開用の動的なウィンドウ スタイルを設計しましたが、マウスで入力をクリックしたときにブラウ...
目次デバッガーを使用する理由は何ですか? Chromeデバッガーの基本的な使い方VS Code によ...
Vueカードのフリップカルーセル表示、フリップ時にデータを切り替えながら、参考までに、具体的な内容は...
コード: <input type="text" class="t...
目次1. typeof演算子2. インスタンスオブ演算子3. typeof と instanceof...
XHTML 言語では、ul タグに li が含まれ、dl タグに dt と dd が含まれることは誰...
いろいろ苦労した後、インターネットで検索したり、以前の会社のプロジェクトを探したり、他の人のプロジェ...
最近、デジタル デザイン コミュニティで「誰が何を担当するのか」という明らかな混乱についてよく質問さ...
目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...
問題/障害/シナリオ/要件Eve-ng の仮想マシン OVA のハードディスクは 38G しかないた...
Vue 3.x プロジェクトの作成 npm init @vitejs/app my-vue-app ...