您現在的位置是:電腦技術吧?>? 組裝維修 ??>??表單設計,html表單設計??>??正文詳情

表單設計,html表單設計

實方方2019-11-05 11:51:16 人圍觀
簡介表單頁面設計許多css愛好者不喜歡html表格,尤其是在制作表單時。雖然現在是xhtml css的時代,但大多數表單仍然使用表布局進行設計。那么,有沒有更好的方法來使用純語工作流表單設

很多CSS愛好者不喜歡HTML表格,尤其是在制作表單的時候,雖然現在已經是XHTML CSS的年代,但表單的設計大多還在采用table來布局。

那么,有沒有更好的使用純語義化XHTML CSS設計表單方法呢?

今天讓我們一起來嘗試這種更符合語義化的方法來代替Table嵌套的表單元素吧!在這里要說,并不是要完全摒棄table的使用,它有它的語義化布局作用,尤其是在存儲數據的時候。

我在大多數情況下會使用純CSS來設計表單,但是,我也很喜歡表格,只要我們能在正確的地方使用正確的元素就可以了,不要太過追求所謂的DIV CSS。

直接使用table要比使用CSS來模擬(display:table;)表格更方便更快速。

下面將分享一種使用純CSS代替HTML表格元素設計表單的方法。

您可以下載源代碼并使用在自己的網站項目中。

下載源代碼 第一步:HTML代碼創建一個新頁面l,然后拷貝并粘貼以下代碼到body標簽內。

  div id=stylized class=myformform id=form name=form method=post action=lh1Sign-up form/h1pThis is the basic look of my form without table/plabelNamespan class=smallAdd your name/span/labelinput type=text name=name id=name /labelEmailspan class=smallAdd a valid address/span/labelinput type=text name=email id=email /labelPasswordspan class=smallMin. size 6 chars/span/labelinput type=text name=password id=password /button type=submitSign-up/buttondiv class=spacer/div/form/div通過上面的代碼,你是否能看出它的視覺樣式呢?

下面是我們的CSS表單結構圖示:

我為每個input元素使用了label標簽,并使用span標簽包含簡短的描述。

所有的label和input元素都是用了CSS的float屬性,值為left。

第二步:CSS代碼復制并粘貼以下代碼到你頁面中的head標簽中的style type=taxt/css/style內。

(也可以單獨存儲到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;}

版權聲明:本文由 實方方 整理編輯。

原標題:表單設計器怎么做,網頁設計 表單

轉載注明出處:http://www.dn9ww09s.icu/assemble/11164.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦開機花屏,電腦花屏無法開機

    電腦開機花屏,電腦花屏無法開機 相關圖片電腦花屏怎么辦世界上每天都有那么多人使用電腦。所以每天,世界每個角落都有許多人面臨著不同的計算機問題今天,我將討論如何在電腦打開啟動屏幕時解決這個問題所以,伙計們...

  • 元素浮動,浮動元素特點

    元素浮動,浮動元素特點 相關圖片什么是浮動根據css規范,浮動將從文檔流中移出,這不會影響塊框的布局,而只影響內聯框(通常是文本)的排列。因此,當其高度超過包含容器時,父容器將不會自動擴展以關閉浮動...

  • 電腦開機顯示器沒有反應,電腦開機顯示器沒信號的解決方法

    電腦開機顯示器沒有反應,電腦開機顯示器沒信號的解決方法 相關圖片電腦檢測不到顯示器他們都說計算機應該經常使用,否則很容易壞。但是電腦也有很長的壽命如果長期使用,還是會有問題的就像小編今天說監視器沒有信號一樣。那我們怎么解決呢接...

  • tenda路由器怎么設置,tenda路由器重置

    tenda路由器怎么設置,tenda路由器重置 相關圖片tendawifi使用路由器橋接功能可以使路由器網絡覆蓋范圍更廣。騰達路由器具有橋接功能。騰達無線路由器的設置特別簡單。它非常適合許多小的白色設置。那么如何設置tenda路由器呢騰達...

  • 標簽和標識的區別,行標簽和塊標簽的區別

    標簽和標識的區別,行標簽和塊標簽的區別 相關圖片單標簽有哪些(1)觀念的轉變:HTML5注重內容和結構,但不注重標題H組導航相關數據的表現/H組/標題導航菜單/導航文章H1標題:HTML5專題視頻教程/H1(2)聲明和標單標簽...

  • 如何關閉電腦自動更新win10,電腦關閉更新

    如何關閉電腦自動更新win10,電腦關閉更新 相關圖片關閉自動更新自動更新,這四個字最常用于手機或電腦軟件,以及電腦系統但小編今天不是來討論電腦更新的有用性的這是關于當我們不想讓電腦自動更新時如何關閉它。如何關閉自動...

  • HTML5有哪些新特性,HTML新特性

    HTML5有哪些新特性,HTML新特性 相關圖片h5css3新特性HTML5必須對每個人都很熟悉,因為有太多的媒體在討論這項技術。然而,你能確切地告訴HTML5帶來了哪些新功能嗎本文總結了html5帶給您的15個新特性,您必須簡述html5的新特性...

  • 數據線連接電腦沒反應,手機用數據線連接電腦沒反應

    數據線連接電腦沒反應,手機用數據線連接電腦沒反應 相關圖片跳過usb調試連接電腦當我們的手機連接到電腦上時,會出現輸入端口已經插好,但電腦沒有響應,無法檢測到手機的連接提示我們現在該怎么辦?今天,我要告訴你,當手機的數據線連...

  • 表格布局,表格怎么做

    表格布局,表格怎么做 相關圖片表格樣式今天,我帶了一個簡短的教程來制作和實現一個帶有ulli的css表。我聽說過去用css實現一個表是不好的,但是最好直接用傳統的表來實現。實際上,我不這么認為如果您ExceL如何...

  • 計算機丟失msvcr80,計算機丟失msvcr100

    計算機丟失msvcr80,計算機丟失msvcr100 相關圖片計算機丟失msvcp100當用戶一次運行程序時,由于計算機中缺少msvcr.dll,因此無法啟動程序。請嘗試重新安裝程序以解決此問題。“當時,我說不出話來,因為系統剛剛安裝好。怎么處理?...

熱評文章

  • 安全模式進不去,如何退出安全模式

    安全模式進不去,如何退出安全模式 相關圖片退出安全模式我們的電腦使用很長時間后,容易出各種各樣的問題這時我們需要安全模式。因為有時我們需要進入安全模式來改變系統的一些操作。所以問題是,如何進入安全模式所以...

  • 筆記本外接顯示器,筆記本外接顯示器掉幀

    筆記本外接顯示器,筆記本外接顯示器掉幀 相關圖片筆記本外接2k顯示器我們習慣每天做一件事。當我們突然有一天不去做的時候,我們感到很不習慣。這和使用電腦是一樣的。當我們習慣于使用大屏幕的電腦時,突然間我們不習慣使用小...

  • 拍照上傳,拍照上傳改本地上傳

    拍照上傳,拍照上傳改本地上傳 相關圖片本地相冊替換相機拍照在HTML5規范的支持下,webapp可以在手機上拍照接下來,我將解釋web應用如何使用手機拍攝照片,在頁面上顯示并上傳到服務器。一。視頻流HTML5媒體捕獲A拍照識別...

  • 在打印機上怎么掃描,打印機可以掃描嗎

    在打印機上怎么掃描,打印機可以掃描嗎 相關圖片打印機復印掃描一體許多辦公室的朋友經常用打印機打字。你可以看到房間里所有的人,你也可以在盒子里看到他們如果你是一個好人,你可以問一個人關于香煙的事,創建一個打印機...

  • css cursor,css overflow

    css cursor,css overflow 相關圖片css中opacity十字線;十字線光標呈現為十字線光標由十字線光標:指針表示;光標:指針表示;兩個是為了處理IE5而編寫的,IE5只識別指針css z index...

  • 騰訊管家電腦版下載,騰訊手機管家電腦版

    騰訊管家電腦版下載,騰訊手機管家電腦版 相關圖片騰訊安全管家電腦版就像我們使用手機時,通常會下載一些類似手機管理器的軟件來保護手機的安全電腦也是一樣的。計算機需要一些安全軟件來保護它們所以我今天要給大家介紹一種...

  • 對話框有沒有幫助按鈕,對話框沒有最小化按鈕

    對話框有沒有幫助按鈕,對話框沒有最小化按鈕 相關圖片labview單按鈕對話框下面常見的IE下載對話框有三個主要按鈕:運行、保存和取消在某些情況下,您不希望用戶單擊“運行”或“保存”按鈕。您可以在網頁中設置meta name=downlo點擊按鈕彈...

  • 筆記本電腦開機黑屏沒反應,筆記本電腦突然黑屏無法開機

    筆記本電腦開機黑屏沒反應,筆記本電腦突然黑屏無法開機 相關圖片筆記本電腦開機正常但是黑屏有時候,筆記本電腦真的能把我們的心情搞得一團糟。就像我們要打開電腦做生意一樣,只是電腦會打開黑屏。那種情緒真的,簡直難以形容所以我理解你...

  • 透明元素,透明元素的作用

    透明元素,透明元素的作用 相關圖片設計元素rgba是一種在css中聲明包含透明效果的顏色的方法。它的語法如下:div{background:rgba(200,54,54,0.5);}它允許我們向元素添加51元素...

  • 怎么把pdf文件轉換成word,幻燈片文件轉換成word

    怎么把pdf文件轉換成word,幻燈片文件轉換成word 相關圖片word文檔怎樣轉換成pdf實際上,在我們的日常工作中,我們經常要聯系pdf文件。有時候你需要發送pdf文件,有時候你需要接收老板的文件。在這個時候,如果我們不知道如何將PDF文件轉換...

關注微信

变脸官网查询