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 の新機能 - 管理ポートの使用の概要
推薦する
CSS 円形ホローイングの実装（クーポン背景画像）
この記事では主に、クーポンの背景画像などでよく使われる CSS 円形ホローイングについて紹介し、皆さ...
Linux ソースコードからのソケット (TCP) クライアント側での接続の例の詳細な説明
序文著者は、アプリケーションからフレームワーク、オペレーティング システムに至るまで、あらゆるコード...
Docker の 4 つのネットワーク タイプの主な例
4 つのネットワーク タイプ:なし: コンテナのネットワーク機能を一切設定しません。--net=no...
Web デザイン スキル: iframe の適応高さの問題
おそらく、この問題にまだ遭遇していない人もいるでしょうから、まずは適応高さとは何かを説明しましょう。...
高度なクローラー - JS 自動レンダリングのための Scrapy_splash コンポーネントの使用
目次1. scrapy_splash とは何ですか? 2. scrapy_splashの役割3. s...
Linux での MySQL の文字化け問題の解決方法
プロジェクトはサーバーと対話し、post を通じてサーバー側の jsp にアクセスし、jsp はサー...
JavaScript キャンバスはマウスの動きに合わせてボールを動かすことを実装します
この記事の例では、マウスに従ってボールを動かすjsの具体的なコードを参考までに共有しています。具体的...
Nodeイベントループの包括的な理解
目次ノードイベントループイベントループ図メインスレッドイベントループタイマーキューの仕組み投票キュー...
Centos7 システムでの python2 と python3 の共存
最初のステップは、Python のバージョン番号とインストール パスを確認することです。 上記のビュ...
Javascript の基礎: 演算子とフロー制御の詳細な説明
目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...
Vue ベースの Excel 解析とエクスポートの詳細な説明
目次序文基本的な紹介コードの実装基本構造アップロード分析Excel にエクスポート基本構造Excel...
MySQL 5.7.17 無料インストールバージョンの設定方法グラフィックチュートリアル (Windows10)
1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...
2秒以内にHTMLページ内の他のページにリダイレクトする方法
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
MySQLはカスタム関数を使用して親IDまたは子IDを再帰的に照会します
背景： MySQL では、レベルに制限がある場合、たとえば、ツリーの最大深度を事前に決定できる場合、...
Zabbix上のすべてのホストのIPとホスト名を取得する
ザビックスZabbix ([`zæbiks]) は、WEB インターフェースに基づいて分散システム監...