DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> CSS實戰:用dl、dd、dt做一個網頁表單
CSS實戰:用dl、dd、dt做一個網頁表單
編輯:布局實例     

XHTML部分:

<dl>
 <dt>公司名稱:</dt>
 <dd><input name="text" type="text" value="廣州駿寶實業有限公司" size="50" /> <span class="red">*</span></dd>
 <dt>公司工業類別:</dt>
 <dd><select name="select"><option>計算機和消費電子 </option></select>
 <select name="select"><option>空氣調節器</option></select> <span class="red">*</span></dd>
 <dt>公司介紹:</dt>
 <dd><textarea name="textarea" cols="100" rows="9">  廣州駿寶實業有限公司創始於1990年,是集科研、制造、銷售、服務於一體,擁有研究開發中心、模具設計制造中心、電子和電路控制設計制造中心、注塑加工和產品整機生產基地的規模化經濟實體。駿寶公司生產基地約占地 30000平方米,擁有精良的設備,強大的生產能力。公司按照現代化企業的規范組織和管理,堅持誠信、創新、勤奮、進取的企業精神,不斷發展壯大。
  駿寶公司人才荟萃,現有職工326人,擁有研發 ... </textarea> <span class="red">*</span>
 </dd>
</dl>

CSS部分:

dl{padding-left:14px;}
dt{float:left;font-weight:bold;padding:12px 0 4px;}
dd{ text-align:left;height:auto;padding:8px 0;}
input,select{ vertical-align:middle;color:#333333; background: #ffffff; font:12px Arial, Helvetica, sans-serif;}
textarea{color:#333333; background: #ffffff; font:12px Arial, Helvetica, sans-serif;line-height:150%;overflow: auto}

說明:對於dl、dt、dd的設置建議不要用高度(height)和行高(line-height),在FF會產生錯位,由於IE和FF是否自適應造成,建議使用dt、dd的padding屬性來定位!


 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved