注: Tmall アクティビティ ページdevelopment_html/css_WEB-ITnose

1. 若い私

「誰もビジネスを行うことはできません」。電子商取引 Web サイトが成功したいのであれば、今日の活動 (トラフィックの導入、ユーザーの粘着性の向上、Web サイトの雰囲気の活性化) を実行することが不可欠です。明日、赤い封筒を受け取ります。 、 活動 活動 (Lili Qiu アクティビティ、右)

🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜、フロントエンドとしてはもちろん、技術的な観点からアクティビティページをどうするか、どうやってやるのか？私が到着したばかりのとき、Tmall での最初の仕事はイベント ページ (初秋の食材について) を作成することでした。私は若すぎたので、元彼の後を追ってデザイナーの女の子の画面をちらっと見ました、まあ、彼女はとても美しいです、笑（それはわかります）。家の近くでは、このページはまだ若かったので、写真を切り取って1日か2日遊んだだけでした。 🎜 🎜 この二日間は全く不安はなく、落ち着いていました。締め切りが近づくまで修正が始まります。前面は非常に滑らかで、フレームは数秒で設置され、写真を切り取って素材を埋め込みました (各写真のサイズは 50k を超えないようにする必要があります)。カットしてもカットしても、何かがおかしいと感じましたが、PSでプレイしたことはありませんでしたが、結果は、もう一度カットしても動作しませんでした。もう一度切ります。次はうまくいきません。もう一度切ります。 最も厄介なのは、ページです (困難については後で詳しく説明します)。1 日かけて切りました。まだまだギャップがあるので先輩にアドバイスをもらいました。気が付くと、設計案を読んだデザイナーはこんな感じです…さて、変更したい点を文書に書きます。その後、それをオンラインのプレリリース環境に導入したいと思ったときに、別の問題に気づきました。それは、写真のローカル リンクをオンラインのリンクに置き換える必要があるということです。くそー、これは詐欺ではありませんか (何十枚もあるのです)。写真の）？先輩たちに聞いてみたところ、そんなツールはないと言われました（本当はあるのですが、聞く人を間違えました）。さて、画像リンクを自動的に置き換えるツールを書きました...残りについては詳しく説明しません。これは成長の代償です。 （コミュニケーション不足、環境を理解せず盲目的な自信、まだ若すぎる）。 🎜 2. 「10 を打ちたいです!」 🎜 その後、いくつかのアクティビティ ページを作成し、少しずつ経験を積みました。要約すると、 🎜 🎜 アクティビティ ページは、多くの場合非常にボリュームがあり、多くのパーソナライズが行われています (週に数百に達することもあります)。彼らの心中。 🎜 🎜 イベント ページには、構成、写真、コンポーネント (テンプレートを含む) など、いくつかの非常に重要な部分が含まれます。 🎜 1. 構成 🎜 PSD を入手したら、どのように切り始めますか?これは合成のプロセスです。補助線を引いて画像を構成し、スライス ツールを使用して大きな画像をいくつかの区切られた小さな画像に分割します。最も面倒なヘッダーカットに焦点を当てます🎜 🎜 方法1、中央分割: 🎜 🎜 🎜 🎜 特徴: レイアウトは比較的簡単ですが、カットするときに正確にするのが難しく、(正確であっても) 2 つの背景を完全に一致させるには、この時点でギャップが生じます。この問題を解決するには、カット時にさらに数ピクセルをカットする必要があります。平水 方法 2、レベル: 🎜 🎜 🎜 🎜 特徴: シンプルなカットですが、レイアウトは比較的複雑で、必要な DOM 要素が多数あります。 🎜 🎜 注: (ここには 2 つのレイアウト方法があります。画像を背景として使用するか、絶対的な 50% レイアウトを使用します。または、画像間のギャップを避けるのに非常に効果的です。) 🎜 🎜 レイアウト: contiener{width:100%; backgorund : url center;} 🎜 🎜 または inner {pos:Absolute; left: 50%; margin-heft :- (width/2) px;} もちろん、他にも方法はあります。 🎜 3. 画像: 🎜 1) 一般的に使用される画像形式は、gif、jpg、png (png8、png24) です。イベントの背景画像の場合、通常、色はそれほど明るくありません。この場合、gif を使用すると、その品質は jpg の最高品質に近くなりますが、現在のサイズは jpg の中間品質に相当します。 。 (中品質では画像がぼやけています) 🎜 🎜 2) Web 画像形式 (ps、ctrl+alt+s) を使用すると、同じ形式の画像サイズが小さくなります。 🎜 🎜 3) 透明度 🎜 🎜 モバイル端末で Png8 を使用して、低品質で優れたサポートで透明性を実現します。端はPC側で、IE6以外は透過処理にPNG32が使用され、IE6ではPNG8が使用され、その後にGIFが使用されます。 🎜 3. コンポーネントとテンプレート 🎜 コンポーネントとテンプレートを再利用すると、ページの開発をスピードアップできますが、コンポーネントとテンプレートの蓄積により、アクティビティ (固定ナビゲーション、画像ホットスポット、タブの切り替え、投票、共有) が適切に実行されれば、アクティビティはパーソナライズされず、より反復的になります。テンプレートを使用すると、ページフレームワークの構築と機能の追加が非常に簡単になります。 🎜 🎜 🎜