欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap編寫一個兼容主流瀏覽器的受眾巨幕式風(fēng)格頁面

 更新時間：2016年07月01日 10:07:29   作者：yongh701  
這篇文章主要介紹了Bootstrap編寫一個兼容IE8、谷歌等主流瀏覽器的受眾巨幕式風(fēng)格頁面，感興趣的小伙伴們可以參考一下

雖然說IE6除了部分要求苛刻的需求以外已經(jīng)被可以不考慮了，但是WIN7自帶的瀏覽器IE8還是需要支持的。
本文這個方法主要的優(yōu)點，個人覺得就是準備少，不需要上網(wǎng)尋找大量的圖片做素材，你只要準備好一個bootstrap、jquery與photoshop就可以了，bootstrap與jquery怎么配置，可以參考《Bootstrap編寫一個在當(dāng)前網(wǎng)頁彈出可關(guān)閉的對話框 非彈窗》（點擊打開鏈接）
被要求編寫一個網(wǎng)站，常常會被如何布局困擾，其實也不難，如果能夠熟練使用Bootstrap，并且有一套特定的方法，那么應(yīng)對普通的需求還是能夠快速輕松地交功課的。 
雖然網(wǎng)上的頁面模板一搜一大段，但是能夠庖丁解牛地了解這些頁面模板的創(chuàng)造過程才是關(guān)鍵。
一旦下載這些模板與瀏覽器不兼容，又不會修改，那就麻煩大了。 

一、基本目標

使用BootstrapV3來創(chuàng)造如下的頁面：


主頁如上所示，首先掛在頁頭是這個網(wǎng)站的導(dǎo)航，分別為left,middle,right三個按鈕與下拉菜單dropdown。這里的實質(zhì)是一個按鈕組，不能使用Bootstrap提供的導(dǎo)航欄組件，因為這個導(dǎo)航欄組件不兼容IE8，具體見：《解決bootstrap導(dǎo)航欄navbar在IE8上存在缺陷的方法》一文（點擊打開鏈接）

之后，在巨幕之下，還有三個專欄，與相應(yīng)的兩個按鈕，這里可以放置網(wǎng)站上最重要的幾個部分，最后按照慣例是版權(quán)信息。

而內(nèi)頁則如下所示：


同樣是置頂?shù)膶?dǎo)航條，然后是這個內(nèi)頁的標題與內(nèi)容。內(nèi)頁的標題實質(zhì)上還是一個巨幕，只是比主頁的尺寸少而已。

接下來是還是版權(quán)信息。

二、制作過程
 1.首先打開photoshop，新建一個1024x1的圖像，寬度隨意，盡量寬就可以了，圖像是1就可以了，前景色為深綠色R:0 G:140 B:0，背景色為淺綠色R:100 G:200 B:100，用漸變工具拉出如下的圖像，怎么拉都可以向左往右拉可以，向中間往兩邊也可以，看個人喜好： 


這是我們需要準備的唯一一個圖像，可以把photoshop關(guān)閉，拋在一邊，把這個圖像保存在網(wǎng)站工程文件夾，這個圖像才6k左右，根本不影響加載。 

2、主頁
具體代碼如下，然后一段一段代碼說明： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.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,initial-scale=1.0,user-scalable=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/bootstrap.js"></script>
 <style type="text/css">
 h1,h2,h3,h4,h5 {
 font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue",
 Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3",
 "WenQuanYi Micro Hei", sans-serif;
 }
 </style>
 </head>
 <body>
 <div style="position: absoulted; top: 0; left: 0; width: 100%;">
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 <button type="button" class="btn btn-success">
 Left
 </button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-success">
 Middle
 </button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-success">
 Right
 </button>
 </div>

 <div class="btn-group">
 <button type="button" class="btn btn-success dropdown-toggle"
 data-toggle="dropdown">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li>
 <a href="#">Dropdown link</a>
 </li>
 <li>
 <a href="#">Dropdown link</a>
 </li>
 </ul>
 </div>

 </div>
 </div>

 <div class="jumbotron masthead"
 style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align: center">
 <br />
 <br />
 <br />
 <br />
 <br />
 <h1>
 <font color="#ffffff">Banner : the Main headline</font>
 </h1>
 <h2>
 <font color="#ffffff">Sub-heading</font>
 </h2>
 <br />
 <br />
 <br />
 <br />
 <br />
 </div>


 <div class="container">
 <div class="row">
 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 ">
 <div class="panel panel-default">
 <div class="panel-body">
 <h3>
 Column1
 </h3>
 <p>
 ...
 </p>
 <p>
 <a href="#" class="btn btn-success" role="button">Button</a>
 <a href="#" class="btn btn-default" role="button">Button</a>
 </p>
 </div>
 </div>
 </div>

 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 <div class="panel panel-default">
 <div class="panel-body">
 <h3>
 Column2
 </h3>
 <p>
 ...
 </p>
 <p>
 <a href="#" class="btn btn-success" role="button">Button</a>
 <a href="#" class="btn btn-default" role="button">Button</a>
 </p>
 </div>
 </div>
 </div>

 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 <div class="panel panel-default">
 <div class="panel-body">
 <h3>
 Column2
 </h3>
 <p>
 ...
 </p>
 <p>
 <a href="#" class="btn btn-success" role="button">Button</a>
 <a href="#" class="btn btn-default" role="button">Button</a>
 </p>
 </div>

 </div>
 </div>
 </div>


 <div class="panel panel-default">
 <div class="panel-body" style="text-align: center">
 Copyright information
 </div>
 </div>

 </div>
 </body>
</html>

 （1）<head>部分 

 <head>
 <!--網(wǎng)站編碼，標題，自適應(yīng)屏幕等-->
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>無標題文檔</title>
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <!--需要使用的js與css樣式-->
 <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/bootstrap.js"></script>
 <!--這是唯一需要我們自己定義的css樣式，用來解決win7系統(tǒng)下，微軟雅黑字體無法正常顯示，而顯示宋體的bug-->
 <style type="text/css">
 h1,h2,h3,h4,h5 {
 font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue",
 Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3",
 "WenQuanYi Micro Hei", sans-serif;
 }
 </style>
 </head>

（2）導(dǎo)航欄
 由于bootstrap提供的導(dǎo)航欄不適用，我們只好用bootstrap提供的按鈕組來自己寫導(dǎo)航欄 

<!--首先導(dǎo)航欄必必須掛在網(wǎng)頁頭-->
 <div style="position: absoulted; top: 0; left: 0; width: 100%;">
 <!--定義一個按鈕組-->
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 <!--導(dǎo)航欄中單個按鈕，也就是沒有下拉菜單的按鈕的超級鏈接寫作方式需要注意，是使用a標簽，然后加上class樣式的，而不是官網(wǎng)提供的button標簽-->
 <a href="#" class="btn btn-success">
  Left
  </a>
 </div>
 <div class="btn-group">
 <a href="#" class="btn btn-success">
 Middle
 </a>
 </div>
 <div class="btn-group">
 <a href="#" class="btn btn-success">
 Right
 </a>
 </div>
 
 <!--下拉菜單的寫法如下：-->
 <div class="btn-group">
 <button type="button" class="btn btn-success dropdown-toggle"
 data-toggle="dropdown">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li>
 <a href="#">Dropdown link</a>
 </li>
 <li>
 <a href="#">Dropdown link</a>
 </li>
 </ul>
 </div>

 </div>
 </div>

改變class屬性中btn-success變成btn-primary，btn-danger等能夠改變這個按鈕的顏色哦！
 （3）巨幕部分 
巨幕的寫法如下，關(guān)鍵是引入我們剛才用photoshop畫出來的背景 

這里之所以要加這么多<br>回車是因為要拉大這個巨幕的尺寸 

 <div class="jumbotron masthead"
 style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align: center">
 <br />
 <br />
 <br />
 <br />
 <br />
 <h1>
 <font color="#ffffff">Banner : the Main headline</font>
 </h1>
 <h2>
 <font color="#ffffff">Sub-heading</font>
 </h2>
 <br />
 <br />
 <br />
 <br />
 <br />
 </div>

（4）專欄部分 
這里運用到bootstrap的柵格組織，進行對三個專欄的排版 
具體可以參考Bootstrap自動適應(yīng)PC、平板、手機的Bootstrap柵格系統(tǒng)一文，把整個網(wǎng)頁的12格分成3份，每份4格就剛剛好了 ，而每個專欄就是一個沒有面板頭的面板，里面一個h3的大標題，然后p的一個段落文本，再兩個按鈕。
值得注意的是，這些東西必須放到一個容器以內(nèi)，不然這三個東西會占滿整個頁面：

<div class="container">
 <div class="row">
 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 ">
 <div class="panel panel-default">
 <div class="panel-body">
 <h3>
 Column1
 </h3>
 <p>
 ...
 </p>
 <p>
 <a href="#" class="btn btn-success" role="button">Button</a>
 <a href="#" class="btn btn-default" role="button">Button</a>
 </p>
 </div>
 </div>
 </div>

 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 <div class="panel panel-default">
 <div class="panel-body">
 <h3>
 Column2
 </h3>
 <p>
 ...
 </p>
 <p>
 <a href="#" class="btn btn-success" role="button">Button</a>
 <a href="#" class="btn btn-default" role="button">Button</a>
 </p>
 </div>
 </div>
 </div>

 <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
 <div class="panel panel-default">
 <div class="panel-body">
 <h3>
 Column2
 </h3>
 <p>
 ...
 </p>
 <p>
 <a href="#" class="btn btn-success" role="button">Button</a>
 <a href="#" class="btn btn-default" role="button">Button</a>
 </p>
 </div>

 </div>
 </div>
 </div>

（5）版權(quán)信息部分
 沒什么好說的，就是一個面板 

<div class="panel panel-default">
 <div class="panel-body" style="text-align: center">
 Copyright information
 </div>
 </div>

 3、內(nèi)頁
 會做主頁，那么內(nèi)頁的思想也就完全相同了，不再贅述，同理，代碼如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.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,initial-scale=1.0,user-scalable=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/bootstrap.js"></script>
 <style type="text/css">
 h1,h2,h3,h4,h5 {
 font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue",
 Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3",
 "WenQuanYi Micro Hei", sans-serif;
 }
 </style>
 </head>

 <body>
 <div style="position: absoulted; top: 0; left: 0; width: 100%;">
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 <a href="#" class="btn btn-success">
  Left
  </a>
 </div>
 <div class="btn-group">
 <a href="#" class="btn btn-success">
 Middle
 </a>
 </div>
 <div class="btn-group">
 <a href="#" class="btn btn-success">
 Right
 </a>
 </div>

 <div class="btn-group">
 <button type="button" class="btn btn-success dropdown-toggle"
 data-toggle="dropdown">
 Dropdown
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
 <li>
 <a href="#">Dropdown link</a>
 </li>
 <li>
 <a href="#">Dropdown link</a>
 </li>
 </ul>
 </div>

 </div>
 </div>
 
 <div class="jumbotron masthead"
 style="background-image: url(images/bg.jpg); background-repeat: repeat;">
 <h1>
 <font color="#ffffff">Title</font>
 </h1>
 </div>
 
 <div class="container-fluid">
 <div class="panel panel-default">
 <div class="panel-body">
 Content
 </div>
 </div>
 <div class="panel panel-default">
 <div class="panel-body" style="text-align: center">
  Copyright information
 </div>
 </div>
 </div>
 

 
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript Alert通用美化類

    JavaScript Alert通用美化類

    只有msg是必須的，后面的參數(shù)可以省略。如果中間的參數(shù)為空則在對應(yīng)位置上''或者""表示（根據(jù)實際情況選擇單雙引號） 調(diào)用此方法須在每個使用的頁面的head區(qū)域加入下面代碼。
    2009-11-11
  • 用JavaScript對JSON進行模式匹配(Part 1-設(shè)計)

    用JavaScript對JSON進行模式匹配(Part 1-設(shè)計)

    在《從 if else 到 switch case 再到抽象》這篇文章里面說到，解決 if else 和 switch case 分支過多的一個方法，就是做一個專用的 dispatcher ，讓它來負責(zé)進行篩選與轉(zhuǎn)發(fā)。
    2010-07-07
  • JS判斷數(shù)組那點事

    JS判斷數(shù)組那點事

    在面試過程中經(jīng)常被面試官問到這樣的題目：如何判斷數(shù)組？下面小編就針對這個問題給大家收集整理了份資料，感興趣的朋友一起看看吧
    2017-10-10
  • 淺談js中幾種實用的跨域方法原理詳解

    淺談js中幾種實用的跨域方法原理詳解

    本篇文章主要介紹了js中幾種實用的跨域方法原理詳解 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。
    2016-12-12
  • 原來JS還可以這樣拆箱轉(zhuǎn)換詳解

    原來JS還可以這樣拆箱轉(zhuǎn)換詳解

    這篇文章主要給大家介紹了關(guān)于JS拆箱轉(zhuǎn)換的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-02-02
  • 用JS寫一段判斷搜索引擎來路并且屏蔽PC的跳轉(zhuǎn)代碼

    用JS寫一段判斷搜索引擎來路并且屏蔽PC的跳轉(zhuǎn)代碼

    以下是用JS寫的判斷搜索引擎來路并屏蔽PC跳轉(zhuǎn)的代碼,需要的朋友可以參考下
    2023-12-12
  • javascript cloneNode()方法的使用

    javascript cloneNode()方法的使用

    控件cloneNode（）方法的使用 實例代碼。
    2009-07-07
  • JS實現(xiàn)的驗證身份證及獲取地區(qū)功能示例

    JS實現(xiàn)的驗證身份證及獲取地區(qū)功能示例

    這篇文章主要介紹了JS實現(xiàn)的驗證身份證及獲取地區(qū)功能,結(jié)合實例形式分析了JS字符串、數(shù)組及正則操作相關(guān)技巧,需要的朋友可以參考下
    2017-01-01
  • 使用cypress編寫第一個測試用例

    使用cypress編寫第一個測試用例

    這篇文章主要為大家介紹了使用cypress編寫第一個測試用例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-06-06
  • javascript算法解數(shù)獨實現(xiàn)方案示例

    javascript算法解數(shù)獨實現(xiàn)方案示例

    這篇文章主要為大家介紹了javascript算法解數(shù)獨實現(xiàn)方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08

最新評論