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 の frm ファイルからテーブル構造を復元する 3 つの方法 [推奨]
mysql が正常に実行されている場合、テーブル構造を表示することは難しくありません。しかし、場合...
JSタイマーを使用して要素を移動する
JS タイマーを使用して、要素に移動する効果のあるメソッドを作成します。実装のアイデアは、まず要素の...
Docker 階層化パッケージを使用して Spring Boot を設定する方法
Spring Boot プロジェクトでは、Docker コンテナ、jar、war の階層化パッケージ...
角丸四角形の HTML+CSS 実装コード
退屈していたので、突然角丸四角形の実装を思いつきました。しかし、私たちはこの話題についてあまりにも長...
TSオブジェクトのスプレッド演算子とレスト演算子の詳細な説明
目次概要オブジェクトの残り属性オブジェクトの拡張プロパティオブジェクトの浅いコピーを作成するkeyo...
負荷分散の基礎知識とnginxを使用した負荷分散の簡単な例
Nginx は、一般的に 7 層の負荷分散に使用できます。この記事では、負荷分散に関する基本的な知識...
Dockerをクリーンアンインストールする方法の詳細な説明
まず、サーバー環境情報: アンインストールの理由:しばらくするとホストマシンのディスクが100%にな...
SQL における distinct と row_number() over() の違いと使い方
1 はじめにデータベース内のデータを操作するための SQL 文を記述するときに、いくつかの不快な問題...
MySQLでテーブルを接続するいくつかの方法
MySQL テーブルでの接続方法は実は非常に簡単なので、ここではその特徴を簡単にリストします。テーブ...
Ubuntu 20.04 に MySql5.7 をインストールして構成するための詳細なチュートリアル
目次1. Ubuntuソースの変更2. MySQLをインストールする3. 新しいユーザーを作成し、権...
nginx 設定チュートリアルにおける add_header の落とし穴の詳細な説明
序文add_header は、headers モジュールで定義されたディレクティブです。名前が示すよ...
Vue テンプレート構成と Webstorm コード形式仕様設定
目次1. コンパイラコードフォーマット仕様設定2. Vueテンプレートの設定1. コンパイラコードフ...
TypeScript 学習ノート: 型の絞り込み
目次序文型推論真理値の絞り込み平等の縮小演算子の絞り込みインスタンスの絞り込み狭まりの本質ユニオン型...
CSS で雨滴アニメーション効果を実装するサンプルコード
ガラス窓今日実現するのは雨滴効果です。ただし、雨滴効果を実現する前に、まずは曇りガラス効果を作成しま...
Dockerfile を使用して Docker イメージをカスタマイズする方法
Dockerfile を使用したイメージのカスタマイズイメージのカスタマイズとは、実際には各レイヤー...