Tudou.comのホームページのデザイン方法
|
<br />私は数年間フロントエンドに取り組んできました。フロントエンドについて完全に理解しているとは言えませんが、独自のアイデアはまだいくつか持っています。まとめとして、Tudou.comのホームページを例に挙げてみましょう。 制作面では、ページをフレームワーク、レイアウト、モジュール、リスト、データ ブロックの 4 つのレイヤーに分割します。 1. フレームワーク<br />ページのフレームワークは基本的に「ヘッダー」「本文」「フッター」です。ただし、Tudou.com などの一部のページでは、レイアウト要件により、「ヘッダー」の下に「メニュー」を追加する必要があります。  2. レイアウト (#ID は以下のページ要素を表すために使用されます) #Head と #Foot についてはここでは説明しません。詳細についてはデモページのソースコードを確認してください。 レイアウトとは、#Main 内のコンテンツをいくつかの大きなブロックに分割することを指します。 Tudou.com を見てみましょう。#Main の典型的な左右構造は、#Layout_1 と #Layout_2 で表されます。図のように  3. モジュール<br />レイアウト #Layout_1 と #Layout_2 のブロックはモジュールです。 私の理解する限りでは、モジュールには少なくとも 1 つの ID が必要であり、ページのデザインに応じて再利用する必要があるモジュールにはクラスを追加する必要があります。 モジュール ID 名に関しては、意味のある名前を付ける必要があります。もちろん、面倒な場合は #Col_1、#Col_2 などを使用することもできます。 。 。 モジュールのクラス名は .cols_1、.cols_2 などです。 。 。  モジュールの内部は次のようになっています。  前のページ1 2 次のページ 全文を読む |
<<: MySQL 8.0 の新機能 - 管理ポートの使用の概要
推薦する
支払いカウントダウンを実現し、ホームページに戻るためのjs
ホーム ページに戻るための支払いカウントダウン ケースの概要: シンプルな js 構文、getEle...
シェルスクリプトは、Docker の半自動コンパイル、パッケージ化、およびリリースアプリケーション操作を構築します。
Docker 公開方法は、DevOps (送信、コンパイル、パッケージ化、リリースなどの一連のイベ...
vue+rem カスタムカルーセル効果
vue+remを使用したカスタムカルーセルチャートの実装は参考までに。具体的な内容は以下のとおりです...
MySQL の重要なログファイルの包括的なインベントリ
目次導入ログ分類パラメータファイルエラーログファイル完全なログファイルスロークエリログバイナリログフ...
Linux で MySQL のルート パスワードを変更する方法
序文このサービスは数か月前からMySQLに導入されています。私の仕事は基本的にターミナルで行われるた...
MySQL 8.0 アップグレード体験
目次序文1. まず、既存のバージョンの MySQL を完全にアンインストールします。 2. deb ...
DockerのTLS（SSL）証明書の有効期限の問題を解決する
問題現象: [root@localhost ~]# docker イメージをプル xxx.com.c...
clearfixとclearの例
この記事では、CSS を理解し始めたばかりの人を対象に、主に HTML で clearfix と c...
HTML でスクロールバーを非表示にしたり削除したりする方法
1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...
Vueの最初のレンダリングのプロセス全体についての簡単な説明
目次1. Vueの初期化vue エントリ ファイルフルバージョンとランタイムバージョンの違い1.1、...
MySQLクエリプランでken_lenの値を計算する方法
key_lenの意味MySQL では、次に示すように、explain を使用して SQL ステートメ...
Mysql 8.0 のインストールとパスワードのリセットの問題
Mysql 8.0 のインストールの問題とパスワードのリセット1: MySqlをダウンロードする公式...
ウェブデザイナー職の面接でよくある質問と回答
1. ASP.NET Web アプリケーションのテンプレートとは何ですか? それらの違いは何ですか?...
Vue.js アプリケーションのパフォーマンス最適化分析 + ソリューション
目次1. はじめに2. Vue JS のパフォーマンス最適化が必要な理由は何ですか? 3. Vueの...
Flexレイアウトを使用してヘッドの固定コンテンツ領域のスクロールを実現する方法
ページ ヘッダーの固定レイアウトは、以前は position:fixed を使用して実装されていまし...