2. 程式人生 > >Bootstrap3 CSS樣式基本用法總結

Bootstrap3 CSS樣式基本用法總結

阿新 • • 發佈：2019-02-09

按鈕

a,input,button都可以設定為按鈕

a標籤按鈕  

        <a class="btn btn-default" href="#" role="button">a標籤按鈕</a>
        <input type="button" class="btn btn-default" value="input的button標籤按鈕" />
        <input type="submit" class="btn btn-default" value="input的submit標籤按鈕" />
        <button class="btn btn-default">button標籤按鈕</button>

預置樣式

        <button class="btn btn-default">default樣式</button>
        <button class="btn btn-primary">primary樣式</button>
        <button class="btn btn-success">success樣式</button>
        <button class="btn btn-info">info樣式</button>
        <button class="btn btn-warning">warning樣式</button>
        <button class="btn btn-danger">danger樣式</button>
        <button class="btn btn-link">link樣式</button>

按鈕大小

        <button class="btn btn-info btn-lg">大按鈕btn-lg</button>
        <button class="btn btn-info">預設按鈕</button>
        <button class="btn btn-info btn-sm">小按鈕btn-sm</button>
        <button class="btn btn-info btn-xs">超小按鈕btn-xs</button>

塊級按鈕-btn-block

        <button class="btn btn-success btn-block">塊級按鈕，與父元素等寬</button>
        <button class="btn btn-warning btn-lg btn-block">塊級按鈕，與父元素等寬</button>

禁用狀態 class="disabled"

        <button class="btn btn-success disabled">被禁用的按鈕</button>

啟用狀態 class="active"

        <button class="btn btn-success active">啟用狀態的按鈕</button>

圖片

響應式圖片-img-responsive

        <img class="img-responsive" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/783931/o_%e8%83%8c%e6%99%af%e5%9b%be1.png" />

圖片的三種形狀

  

        <img class="img-rounded" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" />
        <img class="img-thumbnail" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" />
        <img class="img-circle" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" />

表格

基本表格 .table

表格標題 表格標題 表格標題
表格單元 表格單元 表格單元
表格單元 表格單元 表格單元
表格單元 表格單元 表格單元 
        <table class="table">
          <thead>
            <tr>
              <th>表格標題</th>
              <th>表格標題</th>
              <th>表格標題</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
          </tbody>
        </table>

斑馬線表格 .table .table-striped

表格標題 表格標題 表格標題
表格單元 表格單元 表格單元
表格單元 表格單元 表格單元
表格單元 表格單元 表格單元 
        <table class="table table-striped">
          <thead>
            <tr>
              <th>表格標題</th>
              <th>表格標題</th>
              <th>表格標題</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
          </tbody>
        </table>

帶邊框表格 .table .table-bordered

表格標題 表格標題 表格標題
表格單元 表格單元 表格單元
表格單元 表格單元 表格單元
表格單元 表格單元 表格單元 
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>表格標題</th>
              <th>表格標題</th>
              <th>表格標題</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
          </tbody>
        </table>

滑鼠懸停表格 .table .table-hover

表格標題 表格標題 表格標題
表格單元 表格單元 表格單元
表格單元 表格單元 表格單元
表格單元 表格單元 表格單元 
        <table class="table table-hover">
          <thead>
            <tr>
              <th>表格標題</th>
              <th>表格標題</th>
              <th>表格標題</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
          </tbody>
        </table>

緊湊表格 .table .table-condensed

表格標題 表格標題 表格標題
表格單元 表格單元 表格單元
表格單元 表格單元 表格單元
表格單元 表格單元 表格單元 
        <table class="table table-condensed">
          <thead>
            <tr>
              <th>表格標題</th>
              <th>表格標題</th>
              <th>表格標題</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
          </tbody>
        </table>

響應式表格 .table .table-responsive

表格標題 表格標題 表格標題
表格單元 表格單元 表格單元
表格單元 表格單元 表格單元
表格單元 表格單元 表格單元 
      <div class="myborder">
        <table class="table table-responsive">
          <thead>
            <tr>
              <th>表格標題</th>
              <th>表格標題</th>
              <th>表格標題</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
             <tr>
              <td>表格單元</td>
              <td>表格單元</td>
              <td>表格單元</td>
            </tr>
          </tbody>
        </table>

狀態類

表格標題 表格標題 表格標題
狀態active 狀態active 狀態active
狀態success 狀態success 狀態success
狀態info 狀態info 狀態info
狀態warning 狀態warning 狀態warning
狀態danger 狀態danger 狀態danger 
        <table class="table">
          <thead>
            <tr>
              <th>表格標題</th>
              <th>表格標題</th>
              <th>表格標題</th>
            </tr>
          </thead>
          <tbody>
            <tr class="active">
              <td>狀態active</td>
              <td>狀態active</td>
              <td>狀態active</td>
            </tr>
             <tr class="success">
              <td>狀態success</td>
              <td>狀態success</td>
              <td>狀態success</td>
            </tr>
             <tr class="info">
              <td>狀態info</td>
              <td>狀態info</td>
              <td>狀態info</td>
            </tr>
            <tr class="warning">
              <td>狀態warning</td>
              <td>狀態warning</td>
              <td>狀態warning</td>
            </tr>
            <tr class="danger">
              <td>狀態danger</td>
              <td>狀態danger</td>
              <td>狀態danger</td>
            </tr>
          </tbody>
        </table>

表單

基本表單-.from-control 和.from-group搭配

        <form>
            <div class="form-group">
              <label for="userName">使用者名稱</label>
              <input type="text" class="form-control" name="userName" placeholder="請輸入使用者名稱"/>
            </div>
            <div class="form-group">
              <label for="password">密碼</label>
              <input type="password" class="form-control" name="password" placeholder="請輸入密碼"/>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox">記住密碼</input>
              </label>
            </div>
            <button type="submit" class="btn btn-info">確定</button>
          </div>
        </form>

內聯表單-.from-inline

       <form class="form-inline">
            <div class="form-group">
              <label for="userName">使用者名稱</label>
              <input type="text" class="form-control" name="userName" placeholder="請輸入使用者名稱"/>
            </div>
            <div class="form-group">
              <label for="password">密碼</label>
              <input type="password" class="form-control" name="password" placeholder="請輸入密碼"/>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox">記住密碼</input>
              </label>
            </div>
            <button type="submit" class="btn btn-info">確定</button>
          </div>
        </form>

移動端注意(隱藏label)

       <form class="form-inline">
            <div class="form-group">
              <label class="sr-only" for="userName">使用者名稱</label>
              <input type="text" class="form-control" name="userName" placeholder="請輸入使用者名稱"/>
            </div>
            <div class="form-group">
              <label class="sr-only" for="password">密碼</label>
              <input type="password" class="form-control" name="password" placeholder="請輸入密碼"/>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox">記住密碼</input>
              </label>
            </div>
            <button type="submit" class="btn btn-info">確定</button>
          </div>
      </form>

input的內聯組合

        <form class="form-inline">
          <div class="form-group">
            <div class="input-group">
              <div class="input-group-addon">前面</div>
                <input class="form-control" type="text" placeholder="輸入測試" />
              <div class="input-group-addon">後面</div>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
          </div>
        </form>

水平排列表單(用柵格系統)

       <form class="form-horizontal">
            <div class="form-group">
              <label for="userName" class="control-label col-sm-2">使用者名稱</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" name="userName" placeholder="請輸入使用者名稱"/>
              </div>
            </div>
            <div class="form-group">
              <label for="password" class="control-label col-sm-2">密碼</label>
              <div class="col-sm-10">
                <input type="password" class="form-control" name="password" placeholder="請輸入密碼"/>
              </div>  
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                  <label>
                    <input type="checkbox">記住密碼</input>
                  </label>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-info">確定</button>
              </div>
            </div>
      </form>

單選框和複選框的內聯形式

      
          <label class="checkbox-inline">
            <input type="checkbox">選擇1
          </label>
          <label class="checkbox-inline">
            <input type="checkbox">選擇2
          </label>
          <label class="checkbox-inline">
            <input type="checkbox">選擇3
          </label>

          <div class="form-group">
            <label class="radio-inline">
              <input type="radio" name="myradio">選擇1
            </label>
            <label class="radio-inline">
              <input type="radio" name="myradio">選擇2
            </label>
            <label class="radio-inline">
              <input type="radio" name="myradio">選擇3
            </label>
          </div>

靜態控制元件 .form-control-static

Tab Weng

      <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">使用者名稱</label>
            <div class="col-sm-10">
              <p class="form-control-static">Tab Weng</p>
            </div>
        </div>
      </form>

標題

（提示：由於預設的h1~h7在部落格園編輯器中受預設樣式的影響，所以無法顯示bootstrap的樣式，其具體樣式與下面的class="h1"等相同）

h1標題樣式

h4標題樣式

h5標題樣式

h6標題樣式
      <h1>h1標題樣式</h1>
      <h4>h4標題樣式</h4>
      <h5>h5標題樣式</h5>
      <h6>h6標題樣式</h6>

標題也可用class="h1"設定

通過class="h1"來設定樣式

通過class="h4"來設定樣式

通過class="h5"來設定樣式

通過class="h6"來設定樣式

        <div class="h1">通過class="h1"來設定樣式</div>
        <div class="h4">通過class="h4"來設定樣式</div>
        <div class="h5">通過class="h5"來設定樣式</div>
        <div class="h6">通過class="h6"來設定樣式</div>

副標題-<small>(或class="small")

設定樣式h1 這裡是副標題

設定樣式h4 這裡是副標題

設定樣式h5 這裡是副標題

設定樣式h6 這裡是副標題

        <div class="h1">設定樣式h1<small>這裡是副標題</small></div>
        <div class="h4">設定樣式h4<small>這裡是副標題</small></div>
        <div class="h5">設定樣式h5<small>這裡是副標題</small></div>
        <div class="h6">設定樣式h6<small>這裡是副標題</small></div>

頁面內容

p標籤

Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各種Web技術進行產品的介面開發。 製作標準優化的程式碼，並增加互動動態功能，開發JavaScript以及Flash模組，同時結合後臺開發技術模擬整體 效果，進行豐富網際網路的Web開發，致力於通過技術改善使用者體驗。

        <p>
          Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各種Web技術進行產品的介面開發。
          製作標準優化的程式碼，並增加互動動態功能，開發JavaScript以及Flash模組，同時結合後臺開發技術模擬整體
          效果，進行豐富網際網路的Web開發，致力於通過技術改善使用者體驗。
        </p>

突出段落-class="lead"

Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各種Web技術進行產品的介面開發。 製作標準優化的程式碼，並增加互動動態功能，開發JavaScript以及Flash模組，同時結合後臺開發技術模擬整體 效果，進行豐富網際網路的Web開發，致力於通過技術改善使用者體驗。

      <p class="lead">
        Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各種Web技術進行產品的介面開發。
        製作標準優化的程式碼，並增加互動動態功能，開發JavaScript以及Flash模組，同時結合後臺開發技術模擬整體
        效果，進行豐富網際網路的Web開發，致力於通過技術改善使用者體驗。
      </p>

內聯文字元素

標記-<mark>

使用mark來標記一下

        使用mark來<mark>標記</mark>一下

刪除線-<del>或<s>

用del標籤來刪除這段話

用s標籤來刪除這段話

        <p><del>用del標籤來刪除這段話</del></p>
        <p><s>用s標籤來刪除這段話</s></p>

下劃線-<ins>或<u>

ins標籤表示插入文字 u標籤表示加上下劃線 
        <p><ins>ins標籤表示插入文字</ins></p>
        <u>u標籤表示加上下劃線</u>

小號文字-<small>

這是小號文字

        <small>這是小號文字</small>

強調-<strong>

這是加強字型，用strong

        <strong>這是加強字型，用strong</strong>

斜體-<em>

這是斜體，用em

        <em>這是斜體，用em</em>

對齊

居左對齊

居中對齊

居右對齊

[兩端對齊] 現代專案的開發，需要掌握多種技術。網際網路專案，需要用到後端開發、 前端開發、介面設計、產品設計、資料庫、各種移動客戶端、三屏相容、restFul API設計 和OAuth等等，比較前衛的專案，還會用到Single Page Application、Web Socket、HTML5/CSS3 這些技術以及像第三方開發像微信公眾號微博應用等等。

[沒有對齊] 現代專案的開發，需要掌握多種技術。網際網路專案，需要用到後端開發、 前端開發、介面設計、產品設計、資料庫、各種移動客戶端、三屏相容、restFul API設計 和OAuth等等，比較前衛的專案，還會用到Single Page Application、Web Socket、HTML5/CSS3 這些技術以及像第三方開發像微信公眾號微博應用等等。

      <p class="text-left">居左對齊</p>
      <p class="text-center">居中對齊</p>
      <p class="text-right">居右對齊</p>
      <p class="text-justify">
        [兩端對齊] 現代專案的開發，需要掌握多種技術。網際網路專案，需要用到後端開發、
        前端開發、介面設計、產品設計、資料庫、各種移動客戶端、三屏相容、restFul API設計
        和OAuth等等，比較前衛的專案，還會用到Single Page Application、Web Socket、HTML5/CSS3
        這些技術以及像第三方開發像微信公眾號微博應用等等。
      </p>
      <p class="text-nowrap">
         [沒有對齊] 現代專案的開發，需要掌握多種技術。網際網路專案，需要用到後端開發、
        前端開發、介面設計、產品設計、資料庫、各種移動客戶端、三屏相容、restFul API設計
        和OAuth等等，比較前衛的專案，還會用到Single Page Application、Web Socket、HTML5/CSS3
        這些技術以及像第三方開發像微信公眾號微博應用等等。
      </p>

改變大小寫

LowerCase HahaHa

UpperCase Hahaha

capitalize haHaha

      <p class="text-lowercase">LowerCase HahaHa</p>
      <p class="text-uppercase">UpperCase Hahaha</p>
      <p class="text-capitalize">capitalize haHaha</p>

縮略語 <abbr>標籤

bootstrap是一個高度整合化的開發框架 此處縮略

bootstrap是一個高度整合化的開發框架 此處縮略

        <p class="lead">
          bootstrap是一個高度整合化的開發框架 <abbr title="這裡顯示了縮略語的內容">此處縮略</abbr><br />
          bootstrap是一個高度整合化的開發框架 <abbr class="initialism" title="這裡加了類.initialism所以變小了">此處縮略</abbr>
        </p>

引用

基本引用

這是html的基本引用標籤blockquote，bootstrap為它左邊添加了一個灰色帶

        <blockquote>
          <p>這是html的基本引用標籤blockquote，bootstrap為它左邊添加了一個灰色帶</p>
        </blockquote>

引用來源<footer>

這世界並不會在意你的自尊。這世界指望你在自我感覺良好之前先要有所成就。

比爾蓋茨

        <blockquote>
          <p>這世界並不會在意你的自尊。這世界指望你在自我感覺良好之前先要有所成就。</p>
          <footer>比爾蓋茨</footer>
        </blockquote>

居右的引用，新增類.blockquote-reverse

這世界並不會在意你的自尊。這世界指望你在自我感覺良好之前先要有所成就。

比爾蓋茨

        <blockquote class="blockquote-reverse">
          <p>這世界並不會在意你的自尊。這世界指望你在自我感覺良好之前先要有所成就。</p>
          <footer>比爾蓋茨</footer>
        </blockquote>

列表

無樣式列表.list-unstyled

  • 這裡是列表
  • 這裡是列表
    • 這裡是二級列表
    • 這裡是二級列表
    • 這裡是二級列表
    • 這裡是二級列表
  • 這裡是列表
  • 這裡是列表
  • 這裡是列表
        <ul class="list-unstyled">
          <li>這裡是列表</li>
          <li>這裡是列表</li>
            <ul>
              <li>這裡是二級列表</li>
              <li>這裡是二級列表</li>
              <li>這裡是二級列表</li>
              <li>這裡是二級列表</li>
            </ul>
          <li>這裡是列表</li>
          <li>這裡是列表</li>
          <li>這裡是列表</li>
        </ul>

內聯列表-同一行顯示.list-inline

  • 這裡是列表
  • 這裡是列表
    • 這裡是二級列表
    • 這裡是二級列表
    • 這裡是二級列表
    • 這裡是二級列表
  • 這裡是列表
  • 這裡是列表
  • 這裡是列表
        <ul>
          <li>這裡是列表</li>
          <li>這裡是列表</li>
            <ul class="list-inline">
              <li>這裡是二級列表</li>
              <li>這裡是二級列表</li>
              <li>這裡是二級列表</li>
              <li>這裡是二級列表</li>
            </ul>
          <li>這裡是列表</li>
          <li>這裡是列表</li>
          <li>這裡是列表</li>
        </ul>

普通描述

名言
如果你陷入困境，那不是你父母的過錯，所以不要尖聲抱怨我們的錯誤，要從中吸取教訓。
比爾蓋茨的名人名言是這樣描述的
在你出生之前，你的父母並非像他們現在這樣乏味。 他們變成今天這個樣子是因為這些年來他們一直在為你付賬單，給你洗衣服，聽你大談你是如何的酷。 所以，如果你想消滅你父母那一輩中的"寄生蟲"來拯救雨林的話，還是先去清除你房間衣櫃裡的蟲子吧。
        <dl>
          <dt>名言</dt>
          <dd>如果你陷入困境，那不是你父母的過錯，所以不要尖聲抱怨我們的錯誤，要從中吸取教訓。</dd>
          <dt>比爾蓋茨的名人名言是這樣描述的</dt>
          <dd>在你出生之前，你的父母並非像他們現在這樣乏味。
            他們變成今天這個樣子是因為這些年來他們一直在為你付賬單，給你洗衣服，聽你大談你是如何的酷。
            所以，如果你想消滅你父母那一輩中的"寄生蟲"來拯救雨林的話，還是先去清除你房間衣櫃裡的蟲子吧。
          </dd>
        </dl>

水平排列描述.dl-horizontal

名言
如果你陷入困境，那不是你父母的過錯，所以不要尖聲抱怨我們的錯誤，要從中吸取教訓。
比爾蓋茨的名人名言是這樣描述的
在你出生之前，你的父母並非像他們現在這樣乏味。 他們變成今天這個樣子是因為這些年來他們一直在為你付賬單，給你洗衣服，聽你大談你是如何的酷。 所以，如果你想消滅你父母那一輩中的"寄生蟲"來拯救雨林的話，還是先去清除你房間衣櫃裡的蟲子吧。
        <dl class="dl-horizontal">
          <dt>名言</dt>
          <dd>如果你陷入困境，那不是你父母的過錯，所以不要尖聲抱怨我們的錯誤，要從中吸取教訓。</dd>
          <dt>比爾蓋茨的名人名言是這樣描述的</dt>
          <dd>在你出生之前，你的父母並非像他們現在這樣乏味。
            他們變成今天這個樣子是因為這些年來他們一直在為你付賬單，給你洗衣服，聽你大談你是如何的酷。
            所以，如果你想消滅你父母那一輩中的"寄生蟲"來拯救雨林的話，還是先去清除你房間衣櫃裡的蟲子吧。
          </dd>
        </dl>

程式碼

內聯程式碼 code

Let's add a headFile #include<stdio>

          Let's add a headFile <code>#include<stdio></code>

使用者輸入 kbd

請按 F5 重新整理

          請按 <kbd>F5</kbd> 重新整理

程式碼塊 pre

<div>This is a tag name div </div>
          <pre><div>This is a tag name div </div></pre>

變數 var

a

          <var>a</var>

程式輸出 samp

Hello World!

          <samp>Hello World!</samp>


源引：http://www.cnblogs.com/hlwyfeng/p/5182722.html

相關推薦

Bootstrap3 CSS樣式基本用法總結

按鈕 a,input,button都可以設定為按鈕 a標籤按鈕   <a class="btn btn-default" href="#" role="button">a標籤按鈕</a> <input

CSS樣式表知識總結

adf aid 大於 d+ pre sheet 選擇 order 重用 分類 |------內聯 寫在標簽裏面，控制精確，代碼重用性差 |---------style=樣式 <div style="background: yellow; width: 1

vue基本用法總結

vue.js 是一個構建使用者介面的框架 是一個輕量級MVVM（Model-View-ViewModel)框架，和angular，react框架類似，其實就是所謂的資料雙向繫結 資料驅動+元件化的前端開發（核心思想） 通過簡單的api實現**

spring boot thymeleaf基本用法總結

根據我看的文件，我建立了個簡單的spring boot +thymeleaf專案 pom.xml <!--spring mvc必須的--> <dependency> <groupId>org.springframew

Thymeleaf 基本用法總結

轉自https://www.cnblogs.com/topwill/p/7434955.html 一、引用名稱空間 在html中引入此名稱空間，可避免編輯器出現html驗證錯誤，雖然加不加名稱空間對Thymeleaf的功能沒有任何影響。 二、輸出內容

CSS樣式基本知識

目錄 內聯式css樣式，直接寫在現有的HTML標籤中 CSS樣式可以寫在哪些地方呢？從CSS 樣式程式碼插入的形式來看基本可以分為以下3種：內聯式、嵌入式和外部式三種。這一小節先來講解內聯式。 內聯式css樣式表就是把css程式碼直接寫在現有的HTM

(7)CSS樣式基本知識

CSS樣式基本知識 內聯式css樣式，直接寫在現有的HTML標籤中。 嵌入式css樣式，寫在當前的檔案中。 外部式css樣式，寫在單獨的一個檔案中。 三種方法的優先順序：總結來說，就是–

CSS樣式基本知識，新增樣式,

認識CSS樣式 CSS全稱為”層疊樣式表(Cascading Style Sheets)”, 它主要是用於定於HTML內容在瀏覽器內的顯示樣式，如文字大小，顏色，字型加粗等。 如下列程式碼: p{ font-size:12px; c

第七章 CSS樣式基本知識

宣告：這篇博文是通過在慕課網課程學習後，整理的筆記用來複習，在這裡非常感謝老師的講解。（我是在☞html+css基礎學習☜學習的） 內聯式css樣式，直接寫在現有的HTML標籤中 CSS樣式可以寫在哪些地方呢？從CSS 樣式程式碼插入的形式來看基本可

7. CSS樣式基本知識與選擇器、繼承、層疊和特殊性

css 樣式由選擇符和宣告組成，而宣告又由屬性和值組成   p{ color: blue }   p_選擇符   {}_宣告   color_屬性   blue_值 第7章 CSS樣式基本知識     內聯式、嵌入式和外部式三種   三種方法的優先順序:內聯式 >

HTML與CSS學習記錄（3）————CSS樣式基本知識

認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字型加粗等。如下列程式碼： p{ font-size:12px;/*設定文字字號*/ color:

【CSS筆記二】CSS樣式基本知識

一、內聯式css樣式，直接寫在現有的HTML標籤中 CSS樣式可以寫在哪些地方呢？從CSS 樣式程式碼插入的形式來看基本可以分為以下3種：內聯式、嵌入式和外部式三種。 內聯式css樣式表就是把css程式碼直接寫在現有的HTML標籤中，如下面程式碼： &

七.CSS樣式基本知識

外部式css樣式(也可稱為外聯式)就是把css程式碼寫一個單獨的外部檔案中，這個css樣式檔案以“.css”為副檔名，在<head>內（不是在<style>標籤內）使用<link>標籤將css樣式檔案連結到HTML檔案內，如下面程式碼：<

Web開發之CSS樣式基本知識

定義 CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字型加粗等 語法 css 樣式由選擇符和宣告組成，而宣告又由屬性和值組成，如下圖所示：

Static基本用法總結

/* int test::num=120; int test::getNum() {       //return this->num;  //錯誤：靜態成員函式中不能使用‘this’                 // 靜態成員函式沒有this指標return  num; } 總結： 靜態成員和靜態

spring基本用法總結

使用兩年spring後，發現對spring依舊陌生，遂重新總結spring基礎用法 特性：1，依賴注入的核心機制；2，Aop的宣告式事務管理；3與多種持久層結合使用；4，web MVC的優秀使用； 一、下載安裝        1，http://repo.springsour

CSS Modules 基本用法

寫在前面      原本很早之前就想寫這個文章，但是因為種種原因寫了一半，一直放在也草稿箱裡面。現在正好是大年三十的前一天，閒來無事剛好有時間把這個補全一下。      CSS Modules顧名思義就是CSS模組化的意思，模組化和麵向物件的思想之前一直無法

C#泛型列表List實現二維陣列的功能（令附C#泛型列表List基本用法總結）

          // 搜尋有很多種方式,可以使用IndexOf LastIndexOf FindIndex FindLasIndex Find FindLas ,如果只是檢視元素存不,可以使用Exists()方法          // IndexOf() 方法 需要將一個物件做引數, 如果打到,就返回本

oracle資料庫觸發器，儲存過程，定時器job，package的基本用法總結

--定時器job語法引數解析 使用Submit()過程，工作被正常地計劃好。 這個過程有五個引數：job、what、next_date、interval與no_parse。 PROCEDURE Submit ( job       OUT binary_ineger, W

JQuery的基本用法總結

bsp ... 綁定 回調函數 框架 turn 自定義 立即執行 idt 1、jquery概念 是js的一個類庫 （對js中某些功能的封裝） 用jq實現的功能一定能用js實現 反過來 不一定 ，js實現的功能jq不一定能實現 2、jquery好處 1、代碼簡潔