iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 12
0
自我挑戰組

網頁設計:前端設計+後端基礎建構系列 第 12

[DAY12]製作首頁前端框架

##開始
因為最近我在做網站時,發現我沒有頭緒,功能做出來了但不知怎麼把資料放到頁面上呈現,就是一個很醜的資料顯示在頁面上,所以我這時開始惡補我的前端,用Bootstrap從零打造我的購物網站首頁

##程式碼
引入Bootstrap標頭檔,之後應該要做一個引入檔不然複製貼上真的麻煩。

    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta name=description content="">
    <meta name=author content="">
    <link rel=icon href=/Content/AssetsBS3/img/favicon.ico>
    <link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css rel=stylesheet>
    <link href=/Content/AssetsBS3/examples/justified-nav.css rel=stylesheet>
    <script src=/Scripts/AssetsBS3/ie-emulation-modes-warning.js></script>
    <link rel="stylesheet" href="style.css">

內容

其實這次也很簡單,因為我搞不清楚BS的class用法,class的意思我並不知道,所以我就用最笨的方法(也許這才是最好的?),去找官網範例將我想要的程式碼複製下來研究,所以有搞出一點頭續來。

<div class="container-fluid">
      <div id="shop_head" class=masthead >
          <div role=navigation>
            <ul class="nav nav-justified">
              <li  class=active><a href="#">首頁</a></li>
              <li><a href="#">登入</a></li>
              <li><a href="#">登出</a></li>
              <li><a href="#">上傳商品</a></li>
            </ul>
          </div>
      </div>
      <div class="row">
        <div class="col-md-3 col-sm-4">
            <p>商品陳列地方</p>
        </div>
        <div class="col-md-9 col-sm-8">
            <p>商品列表</p>
        </div>
      </div>
      <div id="shop_foot" class="">
        <div class="">製作人:Aries</div>
      </div>
    </div>

結尾

我之前有看到一篇勵志文順便PO來看看吧180 天寫出 180 個網站,對我這個自學者來說這真的是很勵志的典範


上一篇
[DAY11]解析購物網站範例
下一篇
[DAY13]商品頁面&網址傳值實用技巧
系列文
網頁設計:前端設計+後端基礎建構24
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言