純語(yǔ)義化XHTML CSS設(shè)計(jì)表單方法
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2009-04-02 19:38:51 作者：佚名 
我要評(píng)論
我要評(píng)論網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：網(wǎng)頁(yè)教學(xué)網(wǎng)將分享一種使用純CSS代替HTML表格元素設(shè)計(jì)表單的方法。
很多CSS愛好者不喜歡HTML表格，尤其是在制作表單的時(shí)候，雖然現(xiàn)在已經(jīng)是XHTML CSS的年代，但表單的設(shè)計(jì)大多還在采用table來(lái)布局。
腳本之家將分享一種使用純CSS代替HTML表格元素設(shè)計(jì)表單的方法。
很多CSS愛好者不喜歡HTML表格，尤其是在制作表單的時(shí)候，雖然現(xiàn)在已經(jīng)是XHTML CSS的年代，但表單的設(shè)計(jì)大多還在采用table來(lái)布局。那么，有沒有更好的使用純語(yǔ)義化XHTML CSS設(shè)計(jì)表單方法呢？今天讓我們一起來(lái)嘗試這種更符合語(yǔ)義化的方法來(lái)代替Table嵌套的表單元素吧！
在這里腳本之家要說(shuō)，并不是要完全摒棄table的使用，它有它的語(yǔ)義化布局作用，尤其是在存儲(chǔ)數(shù)據(jù)的時(shí)候。我在大多數(shù)情況下會(huì)使用純CSS來(lái)設(shè)計(jì)表單，但是，我也很喜歡表格，只要我們能在正確的地方使用正確的元素就可以了，不要太過追求所謂的DIV CSS。直接使用table要比使用CSS來(lái)”模擬”(display:table;)表格更方便更快速。下面腳本之家將分享一種使用純CSS代替HTML表格元素設(shè)計(jì)表單的方法。
您可以下載源代碼并使用在自己的網(wǎng)站項(xiàng)目中。
下載源代碼 第一步:HTML代碼
創(chuàng)建一個(gè)新頁(yè)面index.html，然后拷貝并粘貼以下代碼到<body>標(biāo)簽內(nèi)。
<div id=”stylized” class=”myform”>
<form id=”form” name=”form” method=”post” action=”index.html”>
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>
<label>Name
<span class=”small”>Add your name</span>
</label>
<input type=”text” name=”name” id=”name” />
<label>Email
<span class=”small”>Add a valid address</span>
</label>
<input type=”text” name=”email” id=”email” />
<label>Password
<span class=”small”>Min. size 6 chars</span>
</label>
<input type=”text” name=”password” id=”password” />
<button type=”submit”>Sign-up</button>
<div class=”spacer”></div>
</form>
</div>
通過上面的代碼，你是否能看出它的視覺樣式呢？下面是我們的CSS表單結(jié)構(gòu)圖示:
我為每個(gè)input元素使用了<label>標(biāo)簽，并使用<span>標(biāo)簽包含簡(jiǎn)短的描述。所有的label和input元素都是用了CSS的float屬性，值為left。 第二步:CSS代碼
復(fù)制并粘貼以下代碼到你頁(yè)面中的<head>標(biāo)簽中的<style type=”taxt/css”></style>內(nèi)。(也可以單獨(dú)存儲(chǔ)到CSS文件中)
body{
font-family:”Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ———– My Form ———– */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}
/* ———– stylized ———– */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
以上僅僅是表單布局的一種方式，您也可以按照您的喜好來(lái)修改源代碼并重新使用它。
下載源代碼
相關(guān)文章
- 這篇文章主要介紹了HTML5語(yǔ)義化元素的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-22
- HTML5 只有一個(gè)簡(jiǎn)單的文檔類型：<!DOCTYPE html>，表示瀏覽器會(huì)按照標(biāo)準(zhǔn)模式解析。今天小編給大家?guī)?lái)了HTML5新特性之語(yǔ)義化標(biāo)簽，感興趣的朋友一起看看吧2017-10-31
- b 和 i 標(biāo)簽在現(xiàn)在的 Web 標(biāo)準(zhǔn)潛規(guī)則中是不推薦使用，甚至是反對(duì)使用的，因?yàn)檎J(rèn)為他們只是“表現(xiàn)”粗體和斜體，而沒有任何“語(yǔ)義”。更多的用 strong2008-10-17
HTML5 語(yǔ)義化結(jié)構(gòu)化規(guī)范化
HTML結(jié)構(gòu)更加清晰、規(guī)范，學(xué)習(xí)HTML5優(yōu)化結(jié)構(gòu)的思路。 HTML5添加了一些新元素，用來(lái)標(biāo)識(shí)常用的結(jié)構(gòu)，是html更具語(yǔ)義化，可是我們無(wú)法直接使用，即使可能用到還要等他個(gè)十年2008-10-17- 本篇文章小編為大家介紹HTML標(biāo)簽語(yǔ)義化（含H5） ，有需要的朋友可以參考一下2013-04-08
這篇文章主要介紹了詳解HTML5常用的語(yǔ)義化標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2019-09-27淺談HTML的語(yǔ)義化和一些簡(jiǎn)單優(yōu)化
下面小編就為大家?guī)?lái)一篇淺談HTML的語(yǔ)義化和一些簡(jiǎn)單優(yōu)化。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-10-12淺談?wù)Z義化的HTML結(jié)構(gòu)到底有什么好處
下面小編就為大家?guī)?lái)一篇淺談?wù)Z義化的HTML結(jié)構(gòu)到底有什么好處。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-08-05使用語(yǔ)義化標(biāo)簽去寫你的HTML 兼容IE6,7,8
下面小編就為大家?guī)?lái)一篇使用語(yǔ)義化標(biāo)簽去寫你的HTML 兼容IE6,7,8。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧2016-04-14- html標(biāo)簽語(yǔ)義：即html標(biāo)簽的含義2012-11-17
