工作直接--css

今天的任務是完成一個前端界面的布局： 有輸入框、複選框

遇到的問題：

1）、由于參考的代碼是帶table表單的樣式，是以被坑了---table的每一列<td>好像都是按照最長的一列的長度取值的，很難看。

最後，去掉了table樣式，改成<div>嵌套樣式，每一行寫一個<div>。

1、對應主要部分HTML代碼：

 
 <form action="" method="get">        
      
 您喜歡的水果？<br /><br />        
      
 <label><input name="Fruit" type="checkbox" value="" />蘋果 </label>        
      
 <label><input name="Fruit" type="checkbox" value="" />桃子 </label>        
      
 <label><input name="Fruit" type="checkbox" value="" />香蕉 </label>        
      
 <label><input name="Fruit" type="checkbox" value="" />梨 </label>        
      
 </form>        
     
    

2、html案例截圖

html Checkbox用法案例截圖

2）、照搬源程式的按鈕格式，注意display屬性，源程式都是class="XXX"的方式引用的樣式，究其源頭，檢視源代碼

有一個"display: block"，開始的時候以為它沒什麼用，就把各個代碼字段都一個個帶入調試。

使段落生出行内框：

p.inline
  {
           display:inline;                
  }      

 定義和用法       
         
  
display 屬性規定元素應該生成的框的類型。

          
 說明       
         
  
這個屬性用于定義建立布局時元素生成的顯示框類型。對于 HTML 等文檔類型，如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經定義的顯示層次結構。對于 XML，由于 XML 沒有内置的這種層次結構，所有 display 是絕對必要的。

  
注釋：CSS2 中有值 compact 和 marker，不過由于缺乏廣泛的支援，已經從 CSS2.1 中去除了。

        

預設值：	inline
繼承性：	no
版本：	CSS1
JavaScript 文法：	object.style.display="inline"

可能的值

值	描述
none	此元素不會被顯示。
block	此元素将顯示為塊級元素，此元素前後會帶有換行符。
inline	預設。此元素會被顯示為内聯元素，元素前後沒有換行符。
inline-block	行内塊元素。（CSS2.1 新增的值）
list-item	此元素會作為清單顯示。
run-in	此元素會根據上下文作為塊級元素或内聯元素顯示。
compact	CSS 中有值 compact，不過由于缺乏廣泛支援，已經從 CSS2.1 中删除。
marker	CSS 中有值 marker，不過由于缺乏廣泛支援，已經從 CSS2.1 中删除。
table	此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。
inline-table	此元素會作為内聯表格來顯示（類似 <table>），表格前後沒有換行符。
table-row-group	此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。
table-header-group	此元素會作為一個或多個行的分組來顯示（類似 <thead>）。
table-footer-group	此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。
table-row	此元素會作為一個表格行顯示（類似 <tr>）。
table-column-group	此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。
table-column	此元素會作為一個單元格列顯示（類似 <col>）
table-cell	此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）
table-caption	此元素會作為一個表格标題顯示（類似 <caption>）
inherit	規定應該從父元素繼承 display 屬性的值。