作成|無限の創造的な可能性を発見する
創造的な目的
みんなのクリエイティブが集まるサイトです。ここでは、Webフロントエンド開発コースに参加した学生たちの努力、成長、愛情、そして無限の創造性を見ることができます。この展示サイトはとてもシンプルですが、学生たちのサイトはとても豊かで創造的ですので、楽しんでいただければ幸いです。
構造機能
- 作品を提出する
- 詳細ページを含む全作品を表示
- 作品のランキング一覧を表示し、作品にいいね！
- お気に入りの作品を集めてみる
技術的な詳細
- ブラウザのウィンドウ サイズを監視することにより、ホームページのバナー画像は常に全画面表示されます。
- スクロール位置を監視してナビゲーションバーを変更する
- レイアウト: 位置 + フロートの伝統的なレイアウト方法。表示: インライン ブロックやクリア フロートなどのいくつかのトリックを含みます。
- アイコンはiconfontを使用しています
- -webkit-scrollbar スタイルは、Web ページをより美しくするためにスクロール バーを変更します。
- 疑似クラスを使用してランキング リストに何らかの効果を与える
- カードの端にスライドカラー効果を加えました
- サイトページ全体のテンプレート化を実現し、ajaxを介してテンプレートコンテンツを取得し、ページ上にレンダリングします。
- location を使用して現在の URL パラメーターを取得すると、さまざまなページでさまざまなテンプレートと特定の効果を使用できます。この効果は 1 つの関数だけで実現でき、パラメーターはテンプレート名です。
- js を使用して一部の効果の表示属性を制御し、お気に入り列で特定の効果を実現します
- submit.php に忍び込み (フォームのスタイル効果を達成するためにブートストラップを使用)、データベースに送信して、getdata.php から取得して json 文字列を生成することにより、ページを送信します。
- Web サイトがデータを取得するとき、ajax 同期メソッドを使用して getdata.php の json 文字列を取得します。同時に、json 文字列をループアウトするときに、ajax の使用によって発生する非同期の問題を解決するために再帰呼び出しが使用されます。
- 取得したデータを保存するにはセッションストレージを使用します
- ランキングページにスター値によるソート機能を実装しました
- テンプレートにプレースホルダーを埋め込んで、取得したデータを正しい場所に配置します
- 詳細ページの場合、関数を使用して URL パラメーターを取得し、異なるアカウントに異なる詳細ページを表示できるようにします。
