이 수업의 첫 번째 부분에서는 회전식 사진 아래에 컨텐츠 소개를 설계합니다. 내용 소개는 두 부분으로 나뉩니다. 이번에는 상반기입니다.
하나. 홈페이지 컨텐츠 소개
// 마지막 클래스의 회전식 다이어그램과 관련하여 실제로 매뉴얼에는 더 나은 솔루션이 있으며 추가 코드 제어가 필요하지 않습니다. <a href = "#mycarousel"data-slide = "prev"> <span> </span> </a> <a href = "#myCarousel"data-slide = "next"> <span> </a> // 컨텐츠 소개
<div> <div> <h2> "Piaocheng Enterprise Training을 선택하는 이유 </h2> <p> 강력한 교수진과 완벽한 실용적 관리 과정은 회사가 질적 이륙을 달성 할 수있게 해줄 것입니다! </p> <div> <div> <div> <div> <a href = "#"> <img src = "img/tab1-1.png"> </a> </a> </div> <div> <h4> 코스 내용 </h4> <p> 다른 : 대학과 대학에서 알려지지 않은 강사, 실용적인 가치가없는 교과서에 의해 작성되었습니다! </p> <p> 기타 : 유명한 기업가와 경영 마스터가 공동으로 편집 한 현실적인 교과서! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-2.png"> </a> </a> </div> <div> <h4> 교사 </h4> <p> 기타 : 진정한 유럽과 미국의 대학에서 비롯되지 않는 강사들! </p> <p> 기타 : 미국의 하버드 및 예일과 같은 세계적 수준의 대학교, 명성을 가진 유명한 브랜드 전문가! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-3.png"> </a> </a> </a> </div> <div> <h4> 클래스 일정 </h4> <p> 기타 : 클래스 효율성은 보장 할 수없고, 작업이 완료되지 않습니다. </p> <p> 기타 : 정상적인 클래스 효율성을 보장하고, 일정을 공식화하고, 같은 날에 작업을 완료하십시오! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-4.png"> </a> </a> </a> </div> <div> <h4> 서비스 팀 </h4> <p> 기타 : 사회에 의해 채용되고 고급 서비스 수준이 있습니다! </p> <p> 기타 : 좋은 고급 서비스 교육을받은 고층 직원의 내부 교육! </p> </div> </div> </div> </div> </div> </div> </div> </div>
해당 CSS 부분
Body {Font-Family : "Helvetica Neue", Helvetica, Arial, "Microsoft Yaheiui", "Microsoft Yaheiui", Simhei, "/5b8b/4f53", Simsun, Sans-Serif;}. Tab-H2 {font-size : 20px; 색상 : #0059B2; 텍스트 정렬 : 센터; 문자 스페이스 : 1px;}. Tab-P {font-size : 15px; 색상 : #999; 텍스트 정렬 : 센터; 글자 스페이스 : 1px; 여백 : 20px 0 40px 0;}. Tab1 {마진 : 30px 0; 색상 : #666;}. tab1 .media-heading {마진 : 5px 0 20px 0;}. tab1 .Text-muted {color : #999; 텍스트-결정 : line-through;}. tab1 .media-heading {margin : 5px 0 20px 0;}. tab1 .Text-muted {color : #999; 텍스트 결정 : line-through;}. tab1 .col {패딩 : 20px;}/ * 작은 화면 (태블릿, 768px 이상) */@media (min-width : 768px) {.Tab-h2 {font-size : 26px; } .tab-p {font-size : 16px; }}/ * 중간 화면 (데스크탑 디스플레이, 992px 이상) */@media (min-width : 992px) {.tab-h2 {font-size : 28px; } .tab-p {font-size : 17px; }}/ * 대형 화면 (1200px보다 큰 대형 데스크탑 디스플레이) */@media (min-width : 1200px) {.Tab-H2 {font-size : 30px; } .tab-p {font-size : 18px; }}이제 홈페이지 컨텐츠 소개의 후반부를 만들어 봅시다.
하나. 홈페이지 컨텐츠 소개
먼저 바닥에 바닥 글을 완성하십시오
<바닥자 ID = "바닥기"> <div> <p> 기업 교육 | 협력 문제 | 저작권 불만 사항 </p> <p> SU ICP No. 12345678. © 2009-2016 Piaocheng Enterprise Training Network. 부트 스트랩으로 구동. </p> </div> </풋내기>
하단 CS
#footer {패딩 : 20px; 텍스트 정렬 : 센터; 배경색 : #eee; Border-Top : 1px solid #ccc;} // 컨텐츠의 두 단락<div> <div> <div> <div> <IMG SRC = "IMG/Tab2.png"> </div> <div> <h3> 강력한 학습 시스템 </h3> <p> 경영 마스터의 검사 계층을 통해 비즈니스가 큰 진전을 이룰 것입니다. </p> </div> </div> </div> </div> </div> <div> <div> <div> <IMG SRC = "IMG/tab3.png"> </div> <div> <h3> 완벽한 관리 방법 </h3> <p> 최신 관리 교육 프로그램을 통해 비즈니스는 동료들과 함께 할 수 있습니다. </p> </div> </div> </div> </div>
CSS 섹션
.tab2 {배경 : #eee; 패딩 : 60px 20px; 텍스트-정렬 : Center;}. Tab2 IMG {너비 : 40%; 높이 : 40%;}. Tab3 {패딩 : 40px 0; 텍스트-정렬 : Center;}. Tab3 IMG {너비 : 65%; 높이 : 65%;}. 텍스트 h3 {font-size : 20px;}. 텍스트 p {font-size : 14px;}/ * 작은 화면 (태블릿, 768px 이상) */@media (min-width : 768px) {.Text h3 {font-size : 22px; } .text p {font-size : 15px; } .tab2-text {float : 왼쪽; } .tab2-img {float : 오른쪽; }}/ * 중간 화면 (데스크탑 디스플레이, 992px 이상) */@media (min-width : 992px) {.Text h3 {font-size : 24px; } .text p {font-size : 16px; } .tab2-text {float : 왼쪽; } .tab2-img {float : 오른쪽; }}/ * 대형 화면 (대형 데스크탑 모니터, 1200px 이상) */@media (min-width : 1200px) {.Text h2 {font-size : 26px; } .text p {font-size : 18px; } .tab2-text {float : 왼쪽; } .tab2-img {float : 오른쪽; }}JS 제어 수직 중심
$ ( '. text'). eq (0) .css ( 'margin-top', ($ ( '. auto'). eq (0) .Height ()-$ ( '. text'). eq (0) .height ()) / 2 + 'px'); $ (Window) .resize (function () {$ ( '. 텍스트'). ($ ( '. auto'). eq (0) .Height () - $ ( '. text'). $ ( '. text'). eq (1) .height ()) / 2 + 'px'); $ (wind 'px');});여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
위의 것은 부트 스트랩 홈페이지에 소개 된 모든 컨텐츠입니다. 나는 당신이 그것을 좋아하기를 바랍니다. 앞으로 더 흥미로운 콘텐츠 프레젠테이션이있을 것입니다. 놓치지 마세요.