上一次寫的《Bootstrap編寫一個(gè)兼容主流瀏覽器的受眾巨幕式風(fēng)格頁(yè)面》（點(diǎn)擊打開(kāi)鏈接）部分老一輩的需求可能對(duì)這種后現(xiàn)代的風(fēng)格并不滿意，沒(méi)關(guān)系，我們完全可以改變布局拉成門戶式的風(fēng)格，他們馬上就接受了：
首先，門戶式的布局的大概你要清楚，這一才利于我們快速布局開(kāi)頭是一個(gè)較小的巨幕，后是一個(gè)導(dǎo)航欄，這里還是用到了按鈕組接著是各個(gè)專欄，這里是關(guān)于bootstrap柵格系統(tǒng)與面板的運(yùn)用，最后是版權(quán)信息，這里還是一個(gè)面板。
反正個(gè)人覺(jué)得這種門戶式的布局風(fēng)格爛大街，但不知道為何似乎很受眾的樣子。
我們需要準(zhǔn)備東西同樣只是photoshop里面的一幅高度為1的漸變條， 首先打開(kāi)photoshop，新建一個(gè)1024x1的圖像，寬度隨意，盡量寬就可以了，圖像是1就可以了，前景色為深綠色R:0 G:140 B:0，背景色為淺綠色R:100 G:200 B:100，用漸變工具拉出如下的圖像，怎么拉都可以向左往右拉可以，向中間往兩邊也可以，看個(gè)人喜好：
這是我們需要準(zhǔn)備的唯一一個(gè)圖像，可以把photoshop關(guān)閉，拋在一邊，把這個(gè)圖像保存在網(wǎng)站工程文件夾，這個(gè)圖像才6k左右，根本不影響加載。
之后，具體的網(wǎng)頁(yè)代碼如下，原理與《Bootstrap編寫一個(gè)兼容主流瀏覽器的受眾巨幕式風(fēng)格頁(yè)面》（點(diǎn)擊打開(kāi)鏈接）中的各個(gè)部分完全一模一樣，只是代碼的位置不同而已，這里就不再敘述。
<!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>testa</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 class="container"> <div class="jumbotron masthead" style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align:center"> <h1> <font color="#ffffff">Banner : the Main headline</font> </h1> <h2> <font color="#ffffff">Sub-heading</font> </h2> </div> <div class="panel panel-success"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <a href="#" class="btn btn-success"> button1 </a> </div> <div class="btn-group"> <a href="#" class="btn btn-success"> button2 </a> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown1 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">button1</a> </li> <li> <a href="#">button2</a> </li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> Dropdown2 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">button1</a> </li> <li> <a href="#">button2</a> </li> <li> <a href="#">button3</a> </li> <li class="divider"></li> <li> <a href="#">button4</a> </li> </ul> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 "> <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-6 col-sm-6 col-md-6 col-lg-6"> <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="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div class="panel panel-default"> <div class="panel-body"> <h3> Column3 </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>如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
