Latest web development tutorials

×

×

×

CSS3 미디어는 예를 조회

이전 : CSS3 미디어 쿼리

이 장에서는 우리는 당신이 멀티미디어에 대한 몇 가지 예를 설명 할 것이다.

우리는 전자 사서함에 대한 링크 목록을 만들기 위해 시작하기 전에. 다음과 같이 HTML 코드는 다음과 같습니다

예 1

<! DOCTYPE html로>
<HTML>
<헤드>
<스타일>
UL {
목록 스타일 타입 : 없음;
}

울 리 a를 {
색상 : 녹색;
텍스트 장식 : 없음;
패딩 : 3px의;
디스플레이 : 블록;
}
</ 스타일>
</ 헤드>
<바디>

<UL>
<리> <a data-email = "[email protected]" HREF = "mailto: [email protected]"> 홍길동 </ A> </ 리>
<리> <a data-email = "[email protected]" HREF = "mailto: [email protected]"> 마리아 모에 </ A> </ 리>
<리> <a data-email = "[email protected]" HREF = "mailto: [email protected]"> 아만다 팬더 </ A> </ 리>
</ UL>

</ BODY>
</ HTML>

그 주 data-email 속성을. HTML에서 우리는 함께 사용할 수있는 data- 정보를 저장하는 특성 접두어.

520 699px 폭 - 사서함 아이콘을 추가

때 520 699px에있는 브라우저의 폭, 메일 아이콘 링크를 추가하기 전에 사서함 :

예 2

@media 화면과 (최대 폭 : 699px) 및 (최소 폭 : 520px) {
울 리 a를 {
패딩 왼쪽 : 30 픽셀;
배경 : 홈페이지 (이메일-icon.png) 왼쪽 중앙 노 - 반복;
}
}

700 1000px로 - 텍스트 접두사 정보를 추가

1000px에 브라우저 (700)의 폭은, "이메일 :"추가하기 전에 사서함을 연결할 때 :

예 3

@media 화면과 (최대 폭 : 1000px) 및 (최소 폭 : 700 픽셀) {
UL의 리 A : 전에 {
내용 : "이메일 :";
글꼴 스타일 : 기울임 꼴;
색상 : # 666666;
}
}

이상 1001px 폭 - 전자 메일 주소 추가

브라우저 1001px보다 넓게되면, 연락처의 이메일 주소는 링크 후에 첨가한다.

우리가 사용하는 data- 이름의 각 후 전자 메일 주소를 추가하는 속성 :

예 4

@media 화면 (최소 폭 : 1001px) {
UL의 리 A : 후 {
내용 : "("ATTR (데이터 -email) ")";
글꼴 크기 : 12 픽셀;
글꼴 스타일 : 기울임 꼴;
색상 : # 666666;
}
}

이상 1151px 폭 - 아이콘을 추가

브라우저가 1001px보다 넓은 경우, 이름은 아이콘의 앞에 추가됩니다.

예, 우리는 우리가 (비슷한 OR 연산자) 추가 미디어 쿼리를 추가 할 쉼표로 구분 기존 미디어 쿼리에서 사용할 수있는 추가 쿼리 블록을 작성할 필요가 없습니다 :

예 5

@media 화면과 (최대 폭 : 699px) 및 (최소 폭 : 520px), (최소 폭 : 1151px) {
울 리 a를 {
패딩 왼쪽 : 30 픽셀;
배경 : 홈페이지 (이메일-icon.png) 왼쪽 중앙 노 - 반복;
}
}

더 많은 예제

웹 페이지 사이드 바의 메일 링리스트 링크를 사용하여
페이지의 왼쪽 열에있는 예는 링크의 메일 링리스트에 추가 할 수 있습니다.

이전 : CSS3 미디어 쿼리