Dreamweaver에서 라이트 박스를 중앙에 배치하는 방법

라이트 박스는 웹 사이트의 사진과 비디오를 표시하기위한 JavaScript 파일입니다. "라이트 박스"값을 그래픽의 관계 속성에 할당하면 사용자가 그래픽을 클릭하여 화면 전체로 확장 할 수 있습니다. 예를 들어 회사에서 집안의 인테리어를 디자인하고 사이트에 작업 샘플이 포함 된 경우 Lightbox 요소를 사용하면 별도의 웹 페이지를 열지 않고도 포트폴리오를 탐색 할 수 있습니다. 브라우저는 라이트 박스 요소를 기본적으로 가운데에 배치하지만 Dreamweaver에서이 레이아웃에 맞을 수있는 코드를 차단하기위한 추가 단계를 수행 할 수 있습니다.

1.

"F8"키를 눌러 Dreamweaver 파일 패널을 엽니 다.

2.

"lightbox.css"를 두 번 클릭하여 엽니 다.

삼.

"라이트 박스"스타일을 정의하는 블록으로 스크롤하십시오. 이 블록의 코드는 다음과 유사합니다.

라이트 박스 {

위치 : 절대; 너비 : 100 %; z- 지수 : 10000; 텍스트 정렬 : 가운데; line-height : 0; font-family : "lucida grande", tahoma, verdana, arial, sans-serif; font-weight : normal; }

4.

블록 내에 다음 행을 추가하십시오 (아직없는 경우).

왼쪽 : 0; 상단 : 0;

5.

스타일의 "position"속성을 설정하는 줄을 다음 줄로 바꿉니다.

위치 : 고정;

6.

파일을 저장하십시오.

인기 게시물