일부 까다로운 요구 사항을 제외하고 IE6은 무시되었지만 IE8, Win7과 함께 제공되는 브라우저 IE8은 여전히 지원되어야합니다.
이 방법의 주요 장점은 개인적으로 그것이 준비가 적고 온라인으로 자료를 만들기 위해 많은 수의 사진을 검색 할 필요가 없다고 개인적으로 생각한다는 것입니다. 부트 스트랩, jQuery 및 Photoshop 만 준비하면됩니다. 부트 스트랩 및 jQuery를 구성하는 방법 "Bootstrap을 참조하십시오."닫을 수있는 현재 웹 페이지에서 닫을 수있는 대화 상자를 작성하려면 "(링크를 엽니 다)
웹 사이트를 작성하라는 요청을 받으면 웹 사이트를 레이아웃하는 방법에 종종 어려움을 겪게됩니다. 사실, 그것은 어렵지 않습니다. 부트 스트랩을 능숙하게 사용할 수 있고 특정 방법을 가질 수 있다면 여전히 숙제를 신속하고 쉽게 처리하여 일반적인 요구를 처리 할 수 있습니다.
인터넷에서 페이지 템플릿이 오랫동안 검색되지만 핵심은이 페이지 템플릿의 생성 프로세스를 이해할 수 있어야합니다.
이 템플릿을 다운로드하는 것이 브라우저와 호환되지 않으며 수정되지 않으면 큰 문제가됩니다.
1. 기본 목표
Bootstrapv3를 사용하여 다음 페이지를 만듭니다.
홈페이지는 위에 표시되어 있습니다. 첫째, 헤더에 매달려있는 것은이 웹 사이트를 탐색하는데,이 웹 사이트는 왼쪽, 중간, 오른쪽 및 드롭 다운 메뉴입니다. 여기의 본질은 버튼 그룹이며 Bootstrap에서 제공하는 네비게이션 바 구성 요소는 사용할 수 없습니다.이 탐색 막대 구성 요소는 IE8과 호환되지 않기 때문입니다. 자세한 내용은 "IE8의 Bootstrap Navigation Bar Navbar의 결함을 해결하는 방법"기사를 참조하십시오 (링크를 열려면 클릭하십시오).
그 후 거대한 화면 아래에는 3 개의 열과 2 개의 해당 버튼이 있습니다. 여기에 웹 사이트의 가장 중요한 부분을 배치 할 수 있으며, 마지막으로 평소와 같이 저작권 정보를 배치 할 수 있습니다.
내부 페이지는 다음과 같습니다.
또한 최고의 탐색 표시 줄 이며이 내부 페이지의 제목과 내용이 이어집니다. 내부 페이지의 제목은 본질적으로 거대한 화면이지만 홈페이지 크기보다 작습니다.
다음은 저작권 정보입니다.
2. 생산 과정
1. 먼저 Photoshop을 열고 새로운 1024x1 이미지를 만듭니다. 너비는 가능한 한 넓습니다. 가능한 한 넓어 지려고 노력하십시오. 이미지는 1입니다. 전경은 진한 녹색 r : 0 g : 140 b : 0이고, 배경색은 연한 녹색 r : 100 g : 200 b : 100입니다. 그라디언트 도구를 사용하여 다음 이미지를 꺼내십시오. 당신이 그것을 잡아 당기더라도 개인 취향에 따라 왼쪽과 오른쪽으로, 중간과 양쪽으로 당길 수 있습니다.
이것이 우리가 준비 해야하는 유일한 이미지입니다. Photoshop을 닫고, 버리고,이 이미지를 웹 사이트 프로젝트 폴더에 저장할 수 있습니다. 이 이미지는 약 6K에 불과하며 로딩에는 전혀 영향을 미치지 않습니다.
2. 홈페이지
특정 코드는 다음과 같습니다. 그런 다음 코드는 하나씩 설명됩니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/<title> 제목이없는 문서 </title> <meta name = "viewport" content = "width = device-width, 초기 스케일 = 1.0, user-scalable = no"> <link href = "css/bootstrap.css"rel = "stylesheet"media = "screen"> <script type = "text/javaScript"src = "js/jquery-1.11.js"> src = "js/bootstrap.js"> </script> <Style type = "text/css"> h1, h2, h3, h4, h5 {font-family : "microsoft yahei ui", "microsoft yaei", "Helvetica neue", helvetica, arial, "hiragino sans gb", ","hiragino sans gb ","hiragino " "Wenquanyi Micro Hei", Sans-Serif; . data-toggle = "dropdown"> dropdown <span> </span> </button> <ul 역할 = "menu"> <li> <a href = "#"> 드롭 다운 링크 </a> </li> <li> <a href = "#"> 드롭 다운 링크 </a> </li> </ul> </div> </div> <div> <divy> URL (images /bg.jpg); < /h2> <br /> <br /> <br /> <br /<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /<br /> <br /> <br /<br /> <br /> <br /> <br /> <br /> <br /<br /> <br /> <br /<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /<br /> <br /> <br /> <br />. /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /<br /> <br /> <br /> <br /> <br /> <br />>>>>>>>>>>>>>>>>>>>>>>>> <br /> <br /> <br /> <br /<br /> <br /> <br /<br /> <br /> <br /> <br /> <br /> <br /<br /> <br /> <br /<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /<br /> <br /> <br /> <br />. /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />. <div> <div> <h3> column2 </h3> <p> ... </p> <p> <a href = "#"real = "button"> 버튼 </a> <a href = "#"role = "button"> 버튼 </a> </p> </div> </div> </div> </div> <h3> column2 </h3> <p> <p> <p> <p> <p> <p> <p> <h3> href = "#"역할 = "버튼"> 버튼 </a> <a href = "#"role = "button"> 버튼 </a> </a> </div> </div> </div> </div> <div> <div> <h3> column2 </h3> <p> ... </p> <p> <a href = "#"</ef = ""</a> "" "버튼. 역할 = "버튼"> 버튼 </a> </p> </div> </div> </div> <div> <div style = "text-align : center"> 저작권 정보 </div> </div> </div> </body> </html>(1) <head> 부분
<head> <!-웹 사이트 인코딩, 제목, 적응 형 화면 등-> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> 제목이 붙은 문서 </title> <meta name = "viewport"content = "width = device-width, 이니셜 스케일 = 1.0, us user-scalle = no <! 사용해야하는 스타일-> <link href = "css/bootstrap.css"rel = "stylesheet"media = "screen"> <script type = "text/javascript"src = "js/jquery-1.11.1.js"> </script> <script type = "text/javascript"src = "js/boottrap.js"> <!-이것은 Microsoft의 검은 글꼴을 정상적으로 표시 할 수 없지만 Win7 시스템에서 버그를 해결하기 위해 스스로를 정의 해야하는 유일한 CSS 스타일입니다. 그러나 노래 글꼴이 표시됩니다.> <Style Type = "Text/CSS"> H1, H2, H3, H4, H5 {Font-Family : "Microsoft Yahei UI" Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Wenquanyi Micro Hei", Sans-Serif; } </style> </head>(2) 내비게이션 바
Bootstrap에서 제공 한 내비게이션 막대는 적용되지 않기 때문에 Bootstrap에서 제공 한 버튼 그룹을 사용하여 내비게이션 바를 직접 작성해야했습니다.
<!-우선, 내비게이션 바는 웹 페이지의 헤드에 매달려 있어야합니다-> <div style = "위치 : 추상; 상단; 상단; 왼쪽; 왼쪽 : 0; 너비 : 100%;"> <!-버튼 그룹을 정의합니다-> <div> <div> <!-탐색 막대에서 단일 버튼에 대한 단일 버튼에 대한 하이퍼 링크를 정의합니다. 그것은 A 태그를 사용한 다음 공식 웹 사이트에서 제공 한 버튼 태그 대신 클래스 스타일을 추가하는 것입니다.> <a href = "#"> left </a> </a> </a> </a> </a> </a> </a div> <div> <a href = "#"> 오른쪽 </a> </div> <!-드롭 다운 메뉴는 다음과 같이 작성되었습니다. data-toggle = "dropdown"> dropdown "> dropdown <span> </span> </button> <ul 역할 ="menu "> <li> <a href ="#"> 드롭 다운 링크 </a> </li> <li> <a href ="#"> 드롭 다운 링크 </a> </li> </ul> div> </div>
클래스 속성에서 BTN-Success를 BTN- 프라이밍, BTN 위험 등으로 변경하십시오.이 버튼의 색상을 변경할 수 있습니다!
(3) 거대한 화면 부분
거대한 화면은 다음과 같이 작성됩니다. 열쇠는 우리가 Photoshop에서 그린 배경을 소개하는 것입니다.
여기에 너무 많은 것을 추가 해야하는 이유 <br> Enter는이 거대한 화면의 크기를 늘리고 싶기 때문입니다.
<div style = "background-image : url (images /bg.jpg); background-repeat : 반복; 텍스트-정렬 : 중 /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /<br /> <br /> <br /> <br /> <br /> <br />>>>>>>>>>>>>>>>>>>>>>>>> <br /> <br /> <br /> <br /<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> < /div>
(4) 열 섹션
여기에서 Bootstrap의 그리드 조직은 세 열을 입력하는 데 사용됩니다.
자세한 내용은 PC, 태블릿 및 휴대폰 부트 스트랩 그리드 시스템에 자동으로 적응하는 "부트 스트랩"이라는 기사를 참조하십시오. 전체 웹 페이지의 12 개의 그리드를 3 개 조각으로 나누면 각 4 개의 그리드가 옳습니다. 각 열은 패널 헤드가없는 패널, 내부에 큰 H3 제목이 있고 P의 단락 텍스트와 두 개의 버튼이있는 패널입니다.
이러한 것들이 컨테이너에 배치해야한다는 점은 주목할 가치가 있습니다. 그렇지 않으면이 세 가지가 전체 페이지를 채울 것입니다.
<div> <div> <div> <div> <h3> column1 </h3> <p> ... </p> <p> <a href = "#"real = "button"> button </a> <a href = "#"robel = "button"> button </a> </p> </div> </h div> <h3> <h3> </p> <p> <a href = "#"#"robel ="button "> 버튼 </a> </a> <a href ="#"recon ="button "> 버튼 </a> </p> </div> </div> <div> <div> <div> <h3> column2 </h3> <p> ... </p> <p> <a href ="joref = "#" <a href = "#"real = "button"> 버튼 </a> </p> </div> </div> </div> </div> </div> </div> </div>
(5) 저작권 정보 부분
할 말이없고 패널 만 있습니다
<div> <div style = "text-align : center"> 저작권 정보 </div> </div>
3. 내부 페이지
홈페이지를 만드는 방법을 알고 있다면 내부 페이지의 아이디어가 정확히 동일합니다. 다시는 반복하지 않을 것입니다. 마찬가지로 코드는 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/<title> 제목이없는 문서 </title> <meta name = "viewport" content = "width = device-width, 초기 스케일 = 1.0, user-scalable = no"> <link href = "css/bootstrap.css"rel = "stylesheet"media = "screen"> <script type = "text/javaScript"src = "js/jquery-1.11.js"> src = "js/bootstrap.js"> </script> <Style type = "text/css"> h1, h2, h3, h4, h5 {font-family : "microsoft yahei ui", "microsoft yaei", "Helvetica neue", helvetica, arial, "hiragino sans gb", ","hiragino sans gb ","hiragino " "Wenquanyi Micro Hei", Sans-Serif; . data-toggle = "dropdown"> dropdown <span> </span> </button> <ul 역할 = "menu"> <li> <a href = "#"> 드롭 다운 링크 </a> </li> <li> <a href = "#"> 드롭 다운 링크 </a> </li> </ul> </div> </div> <div> <divy> URL (images/bg.jpg); "> <h1> <font color ="#ffffff "> title </font> </h1> </div> <div> <div> 내용 </div> </div> <div> </div> </div> </div>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.