CSS 사진 앨범-CSS 튜토리얼-php.cn

CSS 사진 앨범

高洛峰

풀어 주다： 2017-02-24 13:13:27

원래의

1826명이 탐색했습니다.

최근 JavaScript를 공부하고 있는데 CSS가 조금 낯설네요. 이제 손으로 연습할 수 있는 것을 얻을 시간입니다.

아아아아

구글 포토가 막혀서 블로그 앨범 공간이 너무 좁아서 인색한 점 양해 부탁드립니다. 위의 구조는 매우 고정되어 있어 누구나 암기할 수 있습니다. 미래에 이상이 있으면 더 쉬울 것입니다. 이에 익숙한 사람이라면 앵커포인트를 사용해야 한다는 사실을 한 눈에 알아볼 것이다. 앵커 포인트가 무엇인지 모른다면 구글에 검색해 보세요. dt의 숫자는 약간 이상하게 쓰여 있습니다. 곧 이해하게 될 것입니다.

내 블로그를 자주 방문하는 사람들은 내 실행 상자의 HTML 코드가 매우 간결하고 이상하며 Dreamweave에서 생성된 웹 페이지 템플릿과 매우 다르다는 것을 알 수 있습니다. 걱정하지 마세요. 검증을 통과한 HTML5 코드입니다. html, head, body, 기타 태그가 있어도 상관없습니다.

앞으로의 화보집은 어떤 모습일지 먼저 사진부터 보여드리겠습니다. 페이지 넘김 효과를 만들 것이므로 앨범의 크기는 이 이미지 중 하나와 거의 같습니다. 여기에는 경계선이 있는데, 이는 생각조차 하지 않고 dl의 경계선을 사용하여 구현됩니다. dt로 구현된 페이지 넘기기 막대가 있습니다. 이미지 표시 인터페이스는 dd로 구현됩니다. 절대 위치 지정을 사용하여 이미지 아래에 페이지 넘기기 막대를 배치할 수 있습니다. 그림 표시 인터페이스는 한 번에 하나의 그림만 표시하며, Overflow:hidden을 사용하여 다중 지점 부분을 숨길 수 있습니다. 이런 식으로 앨범의 크기(테두리 제외)는 사진 크기에 페이지 넘김 막대를 더한 크기입니다. 이제 각 사진은 160 x 120이고 페이지 넘김 막대를 160 x 24(동일한 너비)로 설정했습니다. 즉, dl의 너비는 160px이고 높이는 142px입니다(앨범이 직사각형인지 확인해야 합니다). , 이는 우리 생활 상식에 부합합니다. ) 또한 사진의 크기를 고정하고 남는 부분을 숨기기 때문에 사진에 2px 너비의 검은색 테두리를 설정하는 것이 좋습니다. 그러면 아래쪽이 숨겨집니다. 원본 대형 프레임과 결합하면 외부에 유리 조각이 있는 앨범에 사진이 박혀 있는 것처럼 매우 입체적인 효과를 낸다. 좋아요, 페이지 넘김 막대의 버튼이 모두 float:right로 고정된 후부터 이야기해 보겠습니다.

<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>

로그인 후 복사

맙소사, 우리는 일을 너무 효율적으로 처리하고 있다는 것을 알았습니다. 사진 앨범은 한 번에 만들어졌고, 링크를 클릭하면 사진을 전환할 수 있습니다. 왜 사진을 전환할 수 있는지 이해하시나요? ! Overflow:hidden을 설정하지 않으면 이미지를 클릭할 때 웹페이지가 실제로 위아래로 이동하는데, 이는 오른쪽 스크롤 막대를 통해 확인할 수 있습니다. 이것은 무엇을 의미합니까? 이는 자바스크립트의 scrollTop이 적용된다는 의미입니다. scrollTop은 일반적으로 0입니다. 양수이면 원래 시각적 영역의 항목이 아래쪽으로 이동합니다. 시각적 영역을 수정하고 스크롤 막대를 표시하지 않으면 어떻게 되나요? ! 아래의 내용을 어떻게 위에 표시할 수 있나요? ? 대답은 분명합니다. 현재 scrollTop은 음수가 됩니다. 직접 테스트해보세요. 논리는 이렇습니다.

링크를 다시 살펴보겠습니다. Float:right에는 가장 왼쪽이 오른쪽 링크의 오른쪽으로 실행되도록 하는 부작용이 있으므로 숫자를 거꾸로 써야 합니다. 마지막 마무리 부분은 매우 간단합니다. ul 가로 메뉴를 구현하듯이 구현하면 됩니다. 더 보기 좋게 만들기 위해 반투명도와 서스펜션 효과를 추가합니다.

  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;
  }

로그인 후 복사

그림이 작아서 페이지 넘김 바가 좀 큰 것 빼고는 완성품이 아주 멋지고 고급스럽습니다. Firefox는 새 창을 여는 메커니즘에 몇 가지 문제가 있기 때문에 링크를 클릭하면 로컬 창의 앵커 포인트 대신 원래 페이지로 돌아가 해당 앵커 포인트를 찾습니다. 하지만 걱정하지 마십시오. 사진 앨범을 만들 때 런닝 박스에 들어갈 수는 없습니다.

654321

이제 천샤의 오페라만 빼고 모두 호환됩니다.

더 많은 CSS 사진첩 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!