DIV+CSS表單布局的五個小技巧

2020-12-20 站長之家
首頁

 > 

教程

 > 

關鍵詞

 > 

CSS最新資訊

 > 

正文

DIV+CSS表單布局的五個小技巧

DIV+CSS表單布局的五個小技巧可以幫助你更靈活的控制表單,使頁面更加滿意。

1、表單文本輸入的移動選擇:

在文本輸入欄中,如果加入了提示,來訪者往往要用滑鼠選取後刪除,再輸入有用的信息。其實只要加入onMouseOver="this.focus()" onFocus="this.select()" 代碼到 <textarea> 中,一切就會變得簡單多了,如:

<textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">站長之家 www.chinaz.com</textarea>

類似的,可以加入代碼到<input>。

2、表單輸入單元點擊刪除:

本列同上則作用類似,只是使用滑鼠上略有變化,需要點擊而不像上則的只要滑鼠覆蓋。如:

<input type=text name="address" size=19 value="站長之家 www.chinaz.com" onFocus="this.value=''">

點擊輸入單元後,提示信息會刪除,是不是很方便。

3、表單輸入單元的邊框設置:

更改傳統的表單單元邊框,會讓你的主頁生色不少。如:

<input type=radio name=action value=subscribe checked style="BORDER-BOTTOM: dashed 1px; BORDER-LEFT: dashed 1px; BORDER-RIGHT: dashed 1px; BORDER-TOP: dashed 1px;background-color: #FEF5C8">

其中"style=***"為左右上下和背景色設置,適用於其它單元,請讀者親自試試。

4、表單輸入單元的文字設置:

表單中單元的字體是可以修改的,如:

<input type=text name="address" size=19 value="站長之家 www.chinaz.com" style=「font-size:10px」>

其中"style=***"為字體和字大小設置。

5、修改表單屬性為彈出窗口:

大多數表單激活後,會在當前頁面中打開,影響正常瀏覽。不如修改一下,如:

<form method=POST action=url target=_blank>

其中"target=_blank"為控制在彈出窗口打開。

相關焦點

  • DIV+CSS教程_DIV+CSS布局_DIV+CSS實例教程手冊
    >4,一列自適應寬度居中5,兩對多的布局第3天:兩列和三列布局1,兩列自適應寬度2,兩列固定寬度如圖3所示,第二列具有固定寬度居中4,xhtml塊級元素(div)和內聯元素(span)5,float屬性6,三列自適應寬度
  • CSS技巧學習:像table一樣布局div
    首頁 > 教程 > 關鍵詞 > 最新資訊 > 正文 CSS技巧學習:像table一樣布局div
  • div css網站布局的八個小技巧
    首頁 > 教程 > 關鍵詞 > CSS最新資訊 > 正文 div css網站布局的八個小技巧
  • CSS技巧,像table一樣布局div
    許多網頁設計師都喜歡,將兩個或者多個容器等高的並排放置,並在裡面展示每個容器的內容,就象經典表格布局中的單元格控制幾個欄目的位置,也喜歡容器的內容居中或頂部對齊顯示。  但是你又不喜歡用table來實現他,那怎麼辦呢?
  • div+css布局時比較好的命名
    頭:header   內容:content/container   尾:footer   導航:nav   側欄:sidebar   欄目:col   頁面外圍控制整體布局寬度:wrapper
  • css 表單效果,純div+css實現
    純div+css實現,大家可以參考下,也許有一些問題,大家可以修正下<!lis[i].style.left = initleft + i*100 + "px";}}</script><style type="text/css
  • php學習之div+css標準化布局(一)
    1.div+css布局說明:在網頁開發中,需要對頁面內容進行「模塊化標準布局」,把內容放入到某個位置,讓頁面形成固定規律展示出來模塊化:在網頁中所有的內容都是以塊來展示的>標準化:在開發網站時是有一定的標準的,w3c標準好處:為了把html頁面和css代碼進行分離,在以後的維護時和合作開發、有利於搜索引導的抓取2.無意義div和span說明:在html標記中一般都是有自帶名稱。
  • div+css網站布局設計常見錯誤大全
    div+css是網站設計標準(或稱「WEB標準」)中常用的術語之一,通常為了說明與HTML網頁設計語言中的表格(table)定位方式的區別,因為XHTML網站設計標準中,不再使用表格定位技術,而是採用css+div的方式實現各種定位
  • 網頁設計之css+div PK table+css
    首頁 > 教程 > 關鍵詞 > CSS最新資訊 > 正文 網頁設計之css+div PK table+css
  • div css布局命名時儘量避免下劃線
    首頁 > 教程 > 關鍵詞 > CSS最新資訊 > 正文 div css布局命名時儘量避免下劃線
  • 常用DIV+CSS網頁製作布局技術技巧
    首頁 > 教程 > 關鍵詞 > CSS最新資訊 > 正文 常用DIV+CSS網頁製作布局技術技巧
  • div+css對SEO的影響-專業SEO技術教程(35)
    首先,使用div+css設計的網站有助於提升搜尋引擎spider提升爬行效率。div+css的代碼精簡是table無法比擬的,即使div+css的HTML加上對應css文件一般都小於table的HTML文件。div+css實現了樣式和布局完全分離,前臺垃圾代碼大量減少,內容更加突出,讓蜘蛛在你的網站上快速爬行,短時間內爬完你的網站。
  • 網頁表單的Web標準解決方案
    當然會遇到新的問題,比如,平時做網頁,因為沒有跟程序打過什麼交道,較少使用表單。還好,世界還有Google,讓我可以輕鬆應對新挑戰。一些經驗,寫出來大家分享。基於易用性(accesibility)的考慮,表單的標準寫法應該在<form>和</form>之中包含fieldset和legend(說明),讓用戶明白該表單域的內容概要。
  • 網頁設計基礎:Div+CSS布局入門教程
    下面我們就開始一步一步使用DIV+CSS進行網頁布局設計吧。所有的設計第一步就是構思,構思好了,一般來說還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟體將需要製作的界面布局簡單的構畫出來,以下是我構思好的界面布局圖。
  • CSS中behavior屬性語法簡介
    CSS中behavior屬性語法簡介 你對CSS中behavior屬性的語法是否熟悉,這裡向大家簡單描述一下,在進行CSS網頁布局的時候,我們經遇到刷新要保留表單裡內容的時候,CSS中的behavior就為我們很好的解決了這個問題。
  • DIV+CSS網頁布局常用的一些基礎知識整理
    CSS命名規範一.文件命名規範全局樣式:global.css;框架布局:layout.css;字體樣式:font.css;連結樣式:link.css;列印樣式:print.css;二.常用類/ID命名規範
  • CSS 布局經典問題初步整理
    10個文檔學布局:通過十個例子講解布局,主要涉及相對布局,絕對布局,浮動。百度前端學院筆記 – 理解絕對定位:文章本身一般,幾篇參考文獻比較詳細HTML和CSS高級指南之二——定位詳解(譯文):介紹浮動的使用,詳細介紹定位的技巧,包括如何準確的給元素在 X 軸、Y 軸和 Z 軸定位三欄式布局涉及浮動和清除浮動,主要講解「聖杯」和「雙飛翼」兩種解決方法。
  • CSS中內聯元素與塊級元素
    C:一般的 塊級元素諸如段落<p>、標 題<h1><h2>…、列表,<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。
  • CSS新手閱讀的CSS技巧十則
    也就是說,可以為頁面指定兩個CSS文件,一個用於屏幕顯示,一個用於列印:<link type=」text/css」 rel=」stylesheet」 href=」stylesheet.css」 media=」screen」 /><link type=」text/css」 rel=」stylesheet」 href=」printstyle.css」 media
  • 最受歡迎的 HTML、CSS 和 JS 框架
    有些時候,當我們打開一個網頁,最開始注意的大概就是網頁的設計布局了,然後就會感慨,怎麼他們是這麼好,頁面太絢麗了!!  在沒有接觸框架之前,頁面的布局,格式的設定基本是根據css和javascript等來進行頁面的美化,這樣代碼量就大大增加,所以就誕生了一個方便開發人員進行頁面編寫的框架。