CSSフォトアルバム-CSSチュートリアル-php.cn

CSSフォトアルバム

高洛峰

リリース： 2017-02-24 13:13:27

オリジナル

1826 人が閲覧しました

最近JavaScriptを勉強しているのですが、CSSは少し慣れていません。実践して練習できるものを手に入れる時が来ました。

<dl>
  <dt>
    <a href="#index6">6</a><a href="#index5">5</a><a href="#index4">4</a><a href="#index3">3</a><a href="#index2">2</a><a href="#index1">1</a>
  </dt>
  <dd>
    <img id="index1" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-0.jpg" />
    <img id="index2" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-1.jpg" />
    <img id="index3" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-2.jpg" />
    <img id="index4" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-3.jpg" />
    <img id="index5" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-4.jpg" />
    <img id="index6" src="https://img.php.cn/upload/article/000/000/013/e3e768bc0ad403b7acd7b90162e40116-5.jpg" />
  </dd>
</dl>

ログイン後にコピー

Google フォトがブロックされているため、ブログアルバムのスペースが非常に限られているため、ケチであることをお許しください。上記の構造は非常に固定されており、誰でも丸暗記することができます。理想があると将来楽になります。慣れている人なら、アンカーポイントを使用する必要性が一目でわかるでしょう。アンカーポイントが何かわからない場合は、グーグルで調べてください。 dt の数字は逆さまに書かれていますが、すぐにわかります。

私のブログをよく訪れる人は、私の実行ボックスの HTML コードが非常に簡潔かつ奇妙で、Dreamweave によって生成された Web ページのテンプレートとは大きく異なることに気づくかもしれません。心配しないでください。これは検証に合格した HTML5 コードです。html、head、body、その他のタグがあっても問題ありません。

まず、写真アルバムが将来どのようになるのかについて説明させてください。ページめくりの効果を作成するので、アルバムはこれらの画像の 1 つとほぼ同じサイズになります。ボーダーがあり、何も考えずにdlのボーダーを使用して実装されています。 dt によって実装されたページめくりバーがあります。画像表示インターフェイスは dd によって実装されており、絶対位置を使用して画像の下にページめくりバーを配置できます。画像表示インターフェイスは一度に 1 つの画像のみを表示し、overflow:hidden を使用してマルチポイントパーツを非表示にすることができます。このように、アルバムのサイズ (境界線を除く) は、画像のサイズにページめくりバーを加えたサイズになります。各画像は 160 x 120 で、ページめくりバーを 160 x 24 (同じ幅) に設定します。つまり、dl の幅は 160 ピクセル、高さは 142 ピクセルです (アルバムが長方形であることを確認する必要があります)。、これは私たちの生活の常識と一致しています）画像のサイズを固定し、余分な部分を非表示にするため、画像上に幅2ピクセルの黒い境界線も設定した方がよいでしょう。それまでに下側は隠れます。オリジナルの大きなフレームと組み合わせると、外側にガラスがありアルバムの中に写真が埋め込まれているかのような立体感が生まれます。さて、今のところはこれですべてです。ページめくりバーのボタンがすべて float:right になった後で説明します。

  dl {/*相册*/
    position:relative;
    width:160px;
    height:142px;
    border:10px solid #EFEFDA;/*相册边框*/
  }
  dd {/*相册的内容显示区，包含相片与下面的翻页栏*/
    margin:0;/*去除浏览器的默认设置*/
    padding:0;/*去除浏览器的默认设置*/
    width:160px;
    height:120px;
    overflow:hidden;/*重点，让每次只显示一张图片*/
  }
  img {
    border:2px solid #000;/*增加立体感*/
  }
  dt {/*翻页栏*/
    position:absolute;
    right:0px;
    bottom:0px;
    /*上面三步是用于把它固定于图片下方*/
    width:160px;
    height:22px;
    background:#FBFBEA;
  }
  a {
     float:right;
  }

ログイン後にコピー

なんと、作業がとても効率的であることがわかりました。フォトアルバムは一度に作成され、リンクをクリックすると写真が切り替わります。なぜ写真を切り替えることができるか理解できましたか? ！ overflow:hidden を設定しない場合、画像をクリックすると Web ページが実際に上下に移動します。これは右側のスクロールバーから確認できます。これはどういう意味ですか？これはJavaScriptのscrollTopが有効になることを意味します。通常、scrollTop はゼロです。これが正の数の場合、元の表示領域内のものが下に移動します。視覚領域を固定してスクロールバーを表示しない場合はどうなるでしょうか? ！下のものが上に表示されるようにするにはどうすればよいでしょうか? ?答えは明らかで、このときscrollTopは負の数になります。自分でテストしてみてください。ロジックは次のとおりです。

もう一度リンクを見てみましょう。Float:right には副作用があり、一番左のリンクが右のリンクの右に移動するため、数値を逆に書く必要があります。最後の仕上げ部分は非常に簡単で、ul 水平メニューを実装するのと同じように実装するだけです。見栄えを良くするために、半透明効果と浮遊効果を追加します。

 a {
    display:block;/*让其拥有盒子模型*/
    float:right;
    margin:2px;/*错开格子*/
    width:18px;/*呈正方形*/
    height:18px;
    text-align:center;/*居中显示*/
    color:#fff;/*默认是蓝色，所以一定要重写*/
    text-decoration:none;/*消除下划线*/
    background:#666;
    filter:alpha(opacity=70);
    opacity:.7;
  }
  a:hover {
    background:#000
  }

ログイン後にコピー

完成品はとても素敵でエレガントですが、写真のサイズが小さいためページめくりバーが少し大きい点が異なります。 Firefox には新しいウィンドウを開くメカニズムに問題があるため、リンクをクリックすると、ローカルウィンドウ上のアンカーポイントではなく、元のページに戻って、対応するアンカーポイントを見つけます。ただし、フォトアルバムを作成しても、実行ボックスには絶対に入りませんので、ご安心ください。