유능하게 컴파일되고 시각적으로 장식 된이 경우 별도의 페이지이며 전문적인 활동에서 특정 수준의 기술을 달성 한 전문가 인 개인 사이트 또는 블로그의 중요한 요소입니다.
포트폴리오 페이지, 이것은 그런 종류의 보고서 또는 시각적 요약이며, 사진, 기사, 출판물, 디자인 요소 등 가장 성공적인 구현 된 작품 세트를 명확하게 보여줄 수있는 사이트 / 블로그의 독자와 방문자를 명확하게 보여줄 수 있습니다. ...에
나는 그런 페이지가 없으며, 가능한 한 빨리 수정 해야하는 성가신 누락, 실제로 현재와 일이 일어나는 것은 아닙니다.
글로벌 네트워크의 끝없는 expanses에서 포트폴리오 조직에 대해 거대한 수의 기성 페이지 템플릿을 찾을 수 있으며 다양한 페이지를 다양하게 느낄 수 있습니다. 따라서 웹 디자인과 개발의 모든 미묘함을 탐구하기 위해 스크랩을 가져 오려면 항상 스스로 적합한 옵션을 찾을 수 있습니다. 글쎄, 현장 건물에 놀라운 지식을 갖춘 사람들에게는 카테고리에 의해 수행 된 작업을 필터링하여 적응 형 레이아웃의 예를 제안하여 매력적인 전환 효과로 매력적인 전환 효과로 매력적으로 희석되어 있습니다. 집단.
페이지 레이아웃, 실행 가능한 JavaScript 및 일부 디자인 요소는 "산에서", 멋진 웹 디자이너 및 개발자 Kevin Liew (Queness.com)를 발행했습니다. 최적의 솔루션을 선택할 때, 그것은 나에게 중요했습니다. jQuery 플러그인의 기능, 모든 현대적인 브라우저에서 올바른 작업, 다양한 모바일 장치를 사용하는 가장 인기있는 인기를 고려하여 인터넷 서핑, 미래 페이지 디자인의 적응성. 장례식, 디자이너 프릴 및 무거운 플러그인이 없습니다.
기본 레이아웃은 빌드 해야하는 사용자 인터페이스의 두 가지 기본 요소로 구성되며, 이들은 탭을 탐색하여 제시된 작품의 범주를 필터링하고 그리드 자체가 호버 업 일 때 팝업 효과가있는 소형입니다.
시작하기 위해서는 끝내는 모든 것이 jQuery가 버전 1.7.0보다 낮지 않아야합니다. 아직 연결되지 않은 경우 태그에 다음 문자열을 추가하십시오. :
Mixitup 플러그인을 실행하여 위의 파일 뒤에이 코드를 삽입하십시오.
| < script type= "text/javascript" > $ (init : function () ($ # 포트폴리이리스트). MixitUp (targetselector : ".portfolio", filterselector : ".filter", 효과 : [fade], easing : "snap", // 호버 효과를 onMixend : filterList . hovereffect ());), hovereffect : function ($ ($ (# portfoliolist .portfolio "). 호버 (함수 () ($ ($ (이). 찾기 (". 레이블 "). STOP (). 하단 : 0), 200, "easeoutquad"). 찾기 ( "img"). Stop (). 애니메이션 ((상단 : - 30), 500, "yousouutquad");), 함수 (), 함수 () $ (this). 찾기 ( ". 레이블"). stop (). 애니메이션 ((하단 : 40), 200, "easeinquad"); $ (이). 찾기 ( "img"). Stop (). ((상단 : 0), 300, "EAROUTQUAD")));); 필터리스트. init ();); |
플러그인의 모든 옵션을 별도로 고려해야하며, 의미가 없습니다. 기본값은 상당히 최적의 옵션입니다. 글쎄, 누군가가 매개 변수로 실험을 삽입하면 모든 것이 전력으로 부탁드립니다.
페이지의 레이아웃과 요소 모양을 형성하려면 몇 개의 파일을 문서에 연결하십시오. .
기본 스타일의 경우 예 : Layout.css 및 다른 작은 CSS 파일 Normalize.css에 호출 해 봅시다. 아이템의 표준 디자인에서 브라우저의 최상의 대화를 보장합니다.
| < link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" > |
이제 우리는 가능한 한 과도한 물이 없으면 가능한 경우 우리의 원주민, 장거리에서 접근 가능하고 이해할 수있는 모든 것을 순서대로 분석 할 것입니다.
| < ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" > 모두 < li>< span class = "filter" data- filter= "app" > 응용 프로그램 < li>< span class = "filter" data- filter= "card" > Businesscourses. < li>< span class = "filter" data- filter= "icon" > 아이콘 < li>< span class = "filter" data- filter= "logo" > 심벌 마크 < li>< span class = "filter" data- filter= "web" > 웹 디자인 |
- 모두
- 응용 프로그램
- Businesscourses.
- 아이콘
- 심벌 마크
- 웹 디자인
탐색 창에서 전체 작업 목록을 배치하고 범주로 나뉩니다. 데이터 -CAT 속성의 값 또는 탐색 창의 하나 또는 다른 지점과 연결하는 모든 포트폴리오 범주가 데이터 필터 속성의 값에 따라 연결됩니다. 데이터 필터 값을 데이터 -CAT와 비교하면 포트폴리오 요소가 범주별로 필터링됩니다.
또한 시간 이전에 시간이 지나면 숨겨진 축소판을 추가 할 것입니다. 작업의 이름과 그림에 가져올 때만 팝업하는 타이틀 카테고리가있는 작은 패널을 추가합니다. 또한 CSS에서 전체의 외관을 형성하는 것이 더 쉽고, 요소에 대한 해당 클래스 :
| < div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" > 호스팅이 늘어납니다. ru. < span class = "text-category" > 심벌 마크 < div class = "label-bg" > ......... |
그림이나 서명에 직접 링크를 추가 할 수 있으므로 사용자가 모든 작업을 완전히 상상할 수 있습니다.
CSS.
이제 조용한 SAP는 우리의 포트폴리오 페이지 및 적응 형 버전의 사용자 인터페이스의 일반적인 스타일의 일반적인 스타일을 형성하기 위해 가장 재미있는 것으로 간다. 이 기사는 배경 그림과 연결된 글꼴이 없으면 기본 (기본값) 값만 나타냅니다.이 모든 것이 필요합니다.이 모든 것은 데모에서 볼 수 있거나 소스가있는 아카이브를 찾을 수 있습니다.
| .container (위치 : 상대; 폭 : 폭 : 960px, 여백 : 0 자동; / * 브라우저 창이 크기가 조정되면 전환 회로를 볼 수 있습니다 * / -webkit-transition : 모두 1S 쉽게; -moz-transition : 모두 1S 용이합니다. -o-transition : 모두 1S가 쉽습니다. 전환 : 모두 1S가 쉽습니다. ) #filters (여백 : 1 %, 패딩 : 0; 목록 스타일 : 없음) #Filters Li (float : left;) #Filters Li Span (디스플레이 : 패딩 : 5px 20px, 텍스트 장식 : 없음; 666; / * 텍스트에 대한 작은 그늘을 추가하십시오 * / 텍스트 - 그림자 : 1px 1px #ffffff; 커서 : 포인터; ) / * 호버링시 백그라운드 카테고리 변경 * / #filters li span : 호버 (배경 : # 34B7CD, 텍스트 - 그림자 : 0 0 2px # 004B7D; 색상 : #fff;) / * 활성 카테고리 * / #filters li span.active (배경 : RGB (62, 151, 221); 텍스트 - 그림자 : 0 0 2PX # 004b7d; 색상 : #fff;) # 포폴리이 올리대. 포트폴리오 (-webkit-box-sizing : border-box; -Moz-box-sizing : 국경 상자; -o-box-sizing : border-box; 폭 : 23 %; 마진 : 1 %; 디스플레이 : 없음; float : 왼쪽; 오버플로 : 숨김; 오버플로 : 숨겨진; 위치 : 친척! 중요; 배경 : # 666; 커서 : 포인터;) .portfolio Img (최대 너비 : 100 %; 위치 : 상대; / * 기본 서명 숨김 * / .label (위치 : 절대, 폭 : 폭 : 100 %, 높이 : 40px; 하단 : -40px;) .portfolio .Label-BG (배경 : RGB (62, 151, 221); 폭 : 100 %; 높이 : 100 %; 위치 : 절대; 맨 위로 : 0; 왼쪽 : 0;) .portfolio .label-text (색상 : #ffff; 위치 : 상대, Z-Index : 500, 패딩 : 5px 8px;) .portfolio .text 카테고리 ( 디스플레이 : 블록; 글꼴 크기 : 9px;) |
컨테이너 (위치 : 상대; 폭 : 960px; 여백 : 0 자동; / * 브라우저 창의 크기가있을 때 전환 회로를 볼 수 있습니다 * / -webkit-transition : 모두 1S 쉽게; -moz-transition : 모두 1S 쉽게; 전환 : 모두 1S가 쉽습니다. 전환 : 모두 1S 쉽게;) #Filters (여백 : 1 %; 패딩 : 0; 목록 스타일 : 없음) #Filters Li (float : left;) #filters li span 블록; 패딩 : 5px 20px; 텍스트 장식 : 없음; 색상 : # 666; / * 텍스트에 대한 그림자를 추가 * / 텍스트 - 그림자 : 1px 1px #ffffff; cursor : 포인터;) / * 카테고리의 범주를 변경하면 Hovering * / #Filters Li Span : 호버 (배경 : # 34B7CD; 텍스트 - 그림자 : 0 0 2PX # 004B7D; 색상 : #fff;) / * 활성 카테고리 * / #Filters Li Span.Active (배경 : RGB (62, 151, 221); 텍스트 - 그림자 : 0 0 0 2PX # 004b7d; 색상 : #fff;) #portiList .portfolio (-webkit-box-sizing : border-box; -moz-box-sizing : -o bord-box-sizing : -o box-box 크기 : -o - 상자 크기 조정 : Border-box; 너비 : 23 %; 마진 : 1 %; 디스플레이 : 없음; float : 왼쪽; 오버플로 : 숨김;) .po rtfolio-wrapper (Overflow : 숨김; 위치 : 상대! 중요; 배경 : # 666; 커서 : 포인터; ) .portfolio IMG (최대 너비 : 100 %; 위치 : 상대;) / * 기본적으로 서명은 숨겨져 있습니다 * / .portfolio .label (위치 : 절대, 너비 : 100 %, 높이 : 40px, 아래 : -40px ;). 포트폴리오 .Label-BG (배경 : RGB (62, 151, 221); 폭 : 100 %; 높이 : 100 %; 위치 : 절대; 맨 위로 : 0; 왼쪽 : 0;) .Portfolio. 라벨 텍스트 ( 색상 : # fff; 위치 : 상대; z-index : 500; 패딩 : 5px 8px;) .portfolio. 텍스트 카테고리 (디스플레이 : 블록; 글꼴 크기 : 9px;)
두 번째 부분에서 여러 미디어 요청을 사용하여 동일한 스타일 테이블에서 바로 대체 CSS 섹션을 만듭니다. 다양한 모바일 장치의 화면에서 페이지 레이아웃을 올바르게 만들려면이 섹션의 다른 화면에 대한 추가 CSS 규칙을 추가하십시오. 따라서 이전에 CSS 테이블에서 설정 한 모든 규칙을 기존의 브라우저에서 쉽게 무시하고 매우 믿을 수있는 적응력을 얻을 수 있습니다.
| / * tablet * / @media 만 화면과 (최소 폭 : 768px) 및 (최대 너비 : 959px) (.container (폭 : 768px;)) / * 모바일 - 참고 : 320px 너비 디자인 * / @Media 만 화면과 (최대 너비 : 767px) (.container (너비 : 95 %;) #portiolist .portfolio (폭 : 48 %, 마진 : 1 %;)) / * 모바일 - 주 : 폭 480px의 디자인 * / @Media 만 화면 및 (최소 폭 : 480px) 및 (최대 너비 : 767px) (.container (너비 : 70 %;)) |
/ * tablet * / @media 만 화면과 (최소 폭 : 768px) 및 (최대 너비 : 959px) (.container (폭 : 768px;) / * 모바일 - 참고 : 320px * / @media의 디자인 화면 및 (최대 너비 : 767px) (.container (너비 : 95 %;) # 포트폴리이리스트. 포트폴리오 (폭 : 48 %, 마진 : 1 %;) / * 모바일 - 참고 : 480px * / @media 너비 디자인 만 화면과 (최소 폭 : 480px) 및 (최대 너비 : 767px) (.container (너비 : 70 %;))
그게 다야. "포트폴리오"의 능력에 따라 멋진 페이지가 준비되어 있으며 똑같이 멋지고 뛰어난 작업으로 채우고 세상을 보여주는 것입니다. 당신은 여전히 \u200b\u200b조용히, 겸손하게 자신을 자랑스러워 할 수 있습니다. 주요한 것은이 문제에서 그것을 과장시키는 것이 아닙니다.
예를 들어 다시보십시오, 필요한 경우 소스를 레저에서 조용한 가정 환경에서 가져 가면이 작업을 완벽하게 가져올 수 있습니다.
수업을 만들 때 재료가 사용되었습니다. 저자의 펜 아래에서 오리지널 9 개의 청소, 포트폴리오 페이지에서, 거기에 있습니다.
모든 사람에게 행운을 빈다. 짧은 여름의 잔재를 보내십시오!
우리는 일련의 수업을 계속합니다 처음부터 사이트 레이아웃...에 우리는 레이아웃의 모자를 vertigo에 넣습니다. 다음 큰 사진에서 백그라운드로 블록입니다. 이 블록은 브라우저의 첫 번째 화면과 사용자의 초점에 있습니다. 따라서이 영역을 사이트의 본질과 중요한 정보를 전송하는 시각적으로 매력적인 그림 만 넣으십시오.
당신이 알아 차리면서, 우리 조롱 포트폴리오 모의 위로그러나 평소와 개는 아닙니다. 그러나 농담을 제외하고 출력은 인기있는 스타일의 전형적인 패턴이 될 것입니다. 플랫. 디자인을 위해 사용할 수있는 디자인, 텍스트 및 사진을 교체 할 수 있습니다. 평평한 디자인의 경우 색 대비가 특징입니다. 전체 페이지는 여러 블록으로 나뉩니다. 여기서 빛 블록이 여러 화면의 페이지의 전체 높이에서 어두운 것을 어둡게 대체합니다. 각 블록은 이상적으로 동일한 내용을 포함해야합니다.
전체 레이아웃은 모자, 4 개의 섹션과 지하실로 구성됩니다.
배경 : URL ( "your_image.jpg") 없음 - 반복;
컨트롤 크기 이미지 선택기 배경 크기....에 우리는 그 그림을 너비와 높이로 완전히 삽입합니다. 화면의 크기가 증가함에 따라 그림은 비율을 절약하지 않고 축척이 줄어들 것입니다.
배경 크기 : 100 % 100 %;
컨테이너 내부 부분., 블록을 배치하십시오 이면 표제, 텍스트 및 버튼이 있습니다.
태그 뒤에 HTML 문서에 전체 코드를 삽입하십시오.
"귀여운"가기가 어렵습니다.
매일 나는 멋지지기가 어렵다는 것을 매일 일어냅니다. 그러나 나는 당신의 "스트로킹"과 "실식 카나니아"에 지쳤다는 종류를 찾지 못합니다.
더 찾아 봐
코드를위한 코드 style.css :
mops_bg (
배경 : URL (이미지 / articles / html_coding_banner.jpg) 없음 - 반복;
배경 크기 : 100 % 100 %;
}
.mops_text (
패딩 : 20 % 0 %;
}
.mops_text H2 (
색상 : #fff;
글꼴 크기 : 2.9em;
글꼴 무게 : 600;
Z- 색인 : 10;
텍스트 - 정렬 : 센터;
위치 : 상대; / * 상대 제목 위치 지정 * /
마진 탑 : -140px;
}
.MOPS_TEXT H2 SPAN (
글꼴 크기 : 1.1em;
글꼴 무게 : 290;
}
.mops_text p (
색상 : #fff;
글꼴 크기 : 1.2em;
텍스트 - 정렬 : 센터;
마진 : 1.4em 자동;
너비 : 76 %;
글꼴 중량 : 200;
선 - 높이 : 1.3em;
}
.mops_text .da-butture (
디스플레이 : 블록;
배경색 : # A97B7B;
색상 : #fff;
글꼴 크기 : 1em;
텍스트 변환 : 대문자;
마진 : 0 자동;
너비 : 10 %;
텍스트 - 정렬 : 센터;
패딩 : 1em 2em;
}
.da-butt (
위치 : 절대; / * * / 버튼의 절대 위치 결정
왼쪽 : 750px; 상단 : 370px; / * 브라우저 가장자리에서 들여 쓰기 * /
}
.mops_text .da-butt : 호버
{
배경 : # D0A5A5;
}
.Butt-img (
너비 : 50px;
높이 : 50px;
디스플레이 : 블록;
마진 : 2em 자동 1em;
배경 : URL (이미지 / 기사 / html_coding_buttonimg.png);
-webkit-transition : 모든 0.5s 편리한; / * 부드러운 전환 * /
-moz-transition : 모두 0.5s 편리한; / * 부드러운 전환 * /
-o-transition : 모두 0.5s 편리하게; / * 부드러운 전환 * /
-ms-transition : 모두 0.5s 편리한 in-in-out; / * 부드러운 전환 * /
전환 : 모두 0.5s 편리한; / * 부드러운 전환 * /
위치 : 상대; / * 절대 위치 화살표 * /
왼쪽 : 210px; 상단 : 130px; / * 부모 들여 쓰기 * /
}
.Butt-img : 호버 (
디스플레이 : 블록;
너비 : 50px;
높이 : 50px;
배경 : URL (이미지 / 기사 / html_coding_buttonimgh.png);
}
작업 결과를 볼 수 있습니다
먼저 새 HTML5 문서의 마크 업을 만듭니다. 제목 섹션에서 페이지 스타일을 켤 것입니다. jQuery 라이브러리, Quicksand 플러그인 및 우리의 파일 script.js. 몸의 닫는 태그 앞에 포함될 것입니다 :
index.html.