毎週の Web ページ演習 - NetEase メールボックスhomepage_html/css

毎週の Web ページ演習 - NetEase メールボックスhomepage_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:23:25

オリジナル

1938 人が閲覧しました

以前の計画では、Web ページを復元するか、基本的なスキルを練習するために 1 週間に PSD をカットするというものでした。金曜日に電話面談を受けて、163メールのホームページを修復して夕方に送ってほしいと頼まれました。今週の練習だと思ってください。

夕食後、12時まで作業を始めて4時間近くかかりましたが、まだ終わっていない部分もありました。回復度は90%だと考えて、残り2日で時間があるときに埋めていきます。

これが現在の完了ステータスです wzlinsen.com/program/163mail

結果を記録します

まず、この QR コードのスライド効果、実際には絶対位置と透明度の変更と css3 のトランジション属性です

<div class="qrImgBox">  <img src="images/getUrlQrcode.jpg" alt="getUrlQrcode" class="imgLeft">        <img src="images/saoyisao.png" alt="saoyisao" class="imgRight"></div>

ログイン後にコピー

1. 構造は非常に単純で、div の中央に 2 つの画像があるだけです

.qrImgBox{position: relative;height: 150px;width: 100%;}.imgLeft{height: 130px;width: 130px;position:absolute;z-index: 1;left:80px;top:24px;transition:left 0.75s;border:2px solid white;}.imgRight{position:absolute;left:158px;opacity: 0;transition: opacity 0.75s;}.qrImgBox:hover .imgLeft{left:12px;}.qrImgBox:hover .imgRight{opacity:1;}

ログイン後にコピー

2. スタイルの観点から、div に相対的な位置を指定すると、2 つの画像が絶対的に配置されます。 QR コード画像の Z インデックスを他の画像よりも高くなるように設定し、div の中心に配置します

他の画像は絶対的に右側に配置し、透明度を 0 に設定します

3. ボックスに hover 疑似クラスを追加して、QR コードを左側に移動し、右側の画像の透明度を復元します

4. 変化する属性にそれぞれ遷移属性を追加します。たとえば、QR コード画像は次のとおりです。トランジション:左 0.75 秒;

2 番目に、写真内の 2 つのラベルの切り替えです

1 構造は、まず大きなボックスで、ボックスの中に左と左を格納するボックスがあります。 2 つのページ

<div class="mainBox">      <div class="logButton">        <div id="QrLogo">二维码登录</div>        <div id="emailLogo">邮箱账号登录</div>      </div>      <div id="QrPage"></div>      <div id="emailPage"></div></div>

ログイン後にコピー

2. スタイルを簡略化するために、幅、高さ、浮動小数点、テキストの位置などのスタイルの設定を省略しました。大きなボックスの背景を設定し、選択されていないメモに別の背景を設定するには、選択されていないページを非表示にします

.mainBox{background-color: #daeaeb;}#emailLogo{background-color: #dae1e7;}#emailPage{display: none;}

ログイン後にコピー

3. 次に、js を使用して操作します。画像は便利です。私は jquery を使用して操作します

$("#emailLogo").mouseover(function(){        $("#emailLogo").css("background-color","#eaeaeb");        $("#QrLogo").css("background-color","#dae1e7");        $("#emailPage").css("display","flex");        $("#QrPage").css("display","none");    });$("#QrLogo").mouseover(function(){        $("#QrLogo").css("background-color","#eaeaeb");        $("#emailLogo").css("background-color","#dae1e7");        $("#QrPage").css("display","flex");        $("#emailPage").css("display","none");

ログイン後にコピー

マウスをメールノートに移動すると、2 つのノートの背景色が入れ替わります。ページの表示も入れ替わります (私のページはフレックスボックスでレイアウトされているため、表示はフレックスになります)

同じことが、反対。

3. 収穫のヒント

元々はマークマンを使って色と距離を測っていました

後になって、QQ に付属しているスクリーンショット機能を使用できることを知りました。 Ctrl キーを押し続けると、色が #ffffff の形式に変わります。

未完成の点:

1. ラベルの境界線はボックスシャドウで処理されているようで、立体感が生まれます

2. この div+絶対位置を変更できます。達成しました、ただ怠けているだけです、後で埋め合わせます

OK、ここで学んでください。進歩するたびに何かを得ることができます

私を知るために私の個人のホームページへようこそ。、wzlinsen.com

スキルページが利用可能ですコレクションはフロントエンド知識のインデックスとして使用されます、少なくともそれが私の使用方法です