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 の新機能 - 管理ポートの使用の概要
推薦する
MySQLグループリンクの使用に関する詳細な説明
MYSQL におけるグループ化とリンクは、データベースの操作やデータのやり取りで最もよく使用される ...
DockerコンテナでJupyterノートブックを設定する方法
Jupyter ノートブックは、主に Python コードの記述、より具体的にはディープラーニング開...
Docker 起動時の ES メモリ オーバーフローの解決方法
jvm.options ファイルを elasticsearch 構成に追加し、スタック サイズを変更...
Docker を使用して Spring Boot をデプロイする方法
Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...
MySQL から Excel にテーブルデータをエクスポートする際の日時形式に関する簡単な説明
最近、MySQL を使用してテーブル データを Excel ファイルにエクスポートしました。MySQ...
MySQL データベースで UTF-8 エンコードを設定する方法
/etc/my.cnf または /etc/mysql/my.cnf ファイルを変更する [クライアン...
Docker-compose はブリッジを作成し、サブネットを追加し、ネットワーク カードを削除します。
1. Dockerネットワークカードを作成する [root@i ~]# brctl addbr d...
MAC 上の MySQL の初期パスワードを忘れた場合の対処方法
MACでMySQLの初期パスワードを忘れた問題を解決する方法を参考までに共有します。具体的な内容は次...
Mac OS に MySQL 5.7.20 をインストールするための詳細なグラフィックとテキストの説明
Mac OS X で TAR.GZ から MySQL 5.7 をインストールする MySQL 5.6...
TypeScript 3.7 で注目すべき 3 つの新機能について簡単に説明します。
目次序文オプションの連鎖ヌル結合呼び出されていない関数のチェック他の序文TypeScript 3.7...
MySQL の 4 つのトランザクション分離レベルの詳細な説明
この実験のテスト環境: Windows 10+cmd+MySQL5.6.36+InnoDB 1. ト...
HTMLはa要素hrefのURLリンクを自動的に更新したり新しいウィンドウを開いたりする機能を実装する
場合によっては、次のような機能を実装したいことがあります。リンクをクリックします。リンクがブラウザで...
Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策
Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...
MySQLサブクエリでorder byが効かない問題の解決方法
偶然にも、SQL ステートメントを異なる MySQL インスタンスで実行すると、異なる結果が生成され...
透明な入力ボックスにアイコンを追加する HTML コード
最近、弁護士推薦のウェブサイトを作成していたのですが、検索ボックスに問題がありました。検索ボックス内...