表單高級

● 表單高級
○ 表單字段集<fieldset></fieldset>
■ 功能:相當于一個方框,在字段集中可以包含文本和其他元素。該元素用于對表單中的元素進行分組并在文檔中區別標出文本。fieldset元素可以嵌套,在其內部可以在設置多個fieldset對象。
○ 字段級標題<legend></legend>
■ 功能:legend元素可以在fieldset對象繪制的方框內插入一個標題。legend元素必須是fieldset內的第一個元素。
○ 提示信息標簽<label for="綁定控件id名"></label>
■ 功能:label元素用來定義標簽,為頁面上的其他元素指定提示信息。要將label元素綁定到其他的控件上,可以將label元素的for屬性設置為與該控件的id屬性值相同。
○ 上傳文件框
■ 文件域:<input type="file" />
○ 圖像域
■ <input type="image" width="100" height="100" alt="上傳圖片"src="圖片路徑" />作用跟提交按鈕一樣,可以說是美化后的提交按鈕
○ 說明: 表單的組成:表單域,表單控件,提示信息
例:表單域<form name="" method="" action=""></form>
表單控件<input type="text" value=""/>

● 表格高級
● 關于表格的CSS屬性
○ 單元格間距(該屬性必須給table添加)
■ border-spacing:value;(ie7及以下不支持,相當于屬性cellspacing)
○ 合并相鄰單元格邊框
■ border-collapse:separate(邊框分開)/collapse(邊框合并);
○ 無內容單元格顯示、隱藏
■ empty-cells:show/hide;
○ 表格布局算法(加快運行的速度)
■ table-layout:auto/fixed(固定寬度,不會隨內容多少改變單元格寬度)
○ 表格標題
■ <caption>標題內容</caption>
■ 表格標題位置:caption-side:top/right/bottom/left
■ 說明:left,right位置只有火狐識別,top,bottom IE6以上版本支持,ie6以下版本不支持其它屬性值,只識別top;
● html重要屬性:
○ colspan="value" 合并列
○ rowspan="value" 和并行
○ valign="top/bottom/middle/baseline" 垂直對齊方式
○ rules="groups/rows/cols/all/none" 添加組分隔線
○ 說明:
■ rows:位于行之間的線條
■ cols:位于列之間的線條
■ all:位于行和列之間的線條
■ none:沒有線條
■ groups:位于行組和列組之間的線條
○ 數據行分組
■ <thead></thead> 表頭
■ <tbody></tbody> 表體
■ <tfoot></tfoot> 表尾
● 說明:一個Table中,只能包含一個thead,一個tfoot,但可包含多個tbody。
○ 數據列分組
■ <colgroup span="value"></colgroup>
■ <col span="value" />
■ 說明:
● col和colgroup元素會根據從左到右的順序依次對數據表格進行分組。
● span屬性顯示指定相鄰幾列組成一組,span屬性值默認為1,默認時僅定義一列為一組。
● 可以通過給table添加rules="groups"屬性來給分組列添加組分割線。
● 注意:雖然col和colgroup具有相同的功能,但是,我們只能使用colgroup元素來決定表格內容部分分割線(rules)應該處于的位置,而col沒有這個功能。
● CSS 統籌
○ 命名規范
■ 必須以英文數字下劃線組成,不能有中文以及特殊符號,開頭必須以英文開頭不能以數字或者下劃線開頭
○ 網站優化
■ 詳情文件
● BFC模式(塊級格式化上下文)
○ 產生BFC的環境
■ 根元素
■ float不為none
■ position為absolute和fixed
■ display為inline-block、table-cell, table-caption, flex, inline-flex。
■ overflow不為visible
○ BFC作用及原理
■ 內部的Box會在垂直方向,一個接一個地放置。
■ Box垂直方向的距離有margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
■ 每個元素的margin box的左邊,與包含塊border box的左邊相接觸(對于從左往右的格式化,否則相反)。即使存在浮動也是如此
■ BFC的區域不會與float box重疊
■ BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。反之也是如此。
■ 計算BFC的高度時,浮動元素也參與計算
● 擴展
● th:表格列標題(放在tr里)
● <input type="hidden"/>隱藏域
● CSS 濾鏡

轉載于:https://www.cnblogs.com/RuMengkai/articles/6198341.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/253699.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/253699.shtml
英文地址,請注明出處:http://en.pswp.cn/news/253699.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

CMOS圖像傳感器——TDI CIS

一、面陣與線陣圖像傳感器 人們在日常生活中見到的相機大多基于普通的面陣圖像傳感器,這種相機多用來拍攝靜止的物體。即使用它們來拍攝運動的物體,也僅僅是縮短了相鄰兩次拍攝的時間間隔,無需對所拍攝圖像進行額外操作,對物體的運動方向和速度也沒有限定條件。 除此之外,…

gpio_request 原形代碼

其原型為 int gpio_request(unsigned gpio, const char *label) 先說說其參數&#xff0c;gpio則為你要申請的哪一個管腳&#xff0c;label則是為其取一個名字。其具體實現如下&#xff1a; [cpp] view plaincopyprint?int gpio_request(unsigned gpio, const char *label) …

【noip模擬】德充符

時間限制&#xff1a;2s 內存限制&#xff1a;512MB 【題目描述】 申徒嘉和鄭子產都是伯昏無人的學生&#xff0c;子產因為申徒嘉是殘疾人&#xff0c;非常看不起他&#xff0c;于是想要刁難他。 子產給了申徒嘉 n個數 a1,a2...an。 現在他要求申徒嘉重新排列這些數&#xff0c…

做好數據挖掘模型的9條經驗總結

愛數據學習社 welcome數據挖掘是利用業務知識從數據中發現和解釋知識(或稱為模式)的過程&#xff0c;這種知識是以自然或者人工形式創造的新知識。當前的數據挖掘形式&#xff0c;是在20世紀90年代實踐領域誕生的&#xff0c;是在集成數據挖掘算法平臺發展的支撐下適合商業分析…

json及JavaBean轉json

先來看看JSON&#xff1a; 什么是JSON&#xff1a; JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。 JSON是用字符串來表示Javascript對象&#xff0c;例如可以在Servlet中發送一個JSON格式的字符串給客戶端Javascript&#xff0c;Javascript可以執行這個字符串…

數字后端——低功耗設計物理實施

一、低功耗設計方案綜述 為了實現集成電路的低功耗設計目標&#xff0c;我們需要在系統設計階段就采用低功耗設計方案&#xff0c;因為隨著設計流程的逐步推進&#xff0c;到了芯片設計實現階段&#xff0c;降低芯片功耗的方法將越來越少&#xff0c;可節省功耗的百分比將不斷下…

Eclipse里修改SVN的用戶名和密碼

刪除Eclipse subclipse plugin中記住的SVN用戶名密碼&#xff1a; 1&#xff09; 查看你的Eclipse中使用的是什么SVN Interface windows > preference > Team > SVN #SVN Interface 2.&#xff09;如果是用的JavaHL, 找到以下目錄并刪除auth目錄. 刪除C:\Users\…

Omap3530 的GPIO中斷設置

Omap3530 的GPIO中斷設置&#xff1a; 1.配置成GPIO&#xff0c;申請GPIO中斷 omap_cfg_reg(OMAP3_KBD_GPIO);配置成gpio if (gpio_request(OMAP3_KBD_GPIO, "kbd7279 IRQ") < 0) printk(KERN_ERR "Failed to request GPIO%d for kbd IRQ/n");//申請GPI…

H5項目開發分享——用Canvas合成文字

以前曾用Canvas合成、裁剪、圖片等《用H5中的Canvas等技術制作海報》。這次用Canvas來畫文字。 下圖中“老王考到駕照后”這幾個字是畫在Canvas上的&#xff0c;與在PS中打入的字非常接近&#xff0c;毫無違和感。 前面一段時間也在研讀JavaScript設計模式相關的知識&#xff0…

SQLServer約束介紹

約束定義 對于數據庫來說&#xff0c;基本表的完整性約束分為列級約束條件和表級約束條件&#xff1a; 列級約束條件 列級約束條件是對某一個特定列的約束&#xff0c;包含在列定義中&#xff0c;可以直接跟在該列的其他定義之后&#xff0c;用空格分隔&#xff0c;不用指定列名…

CMOS圖像傳感器——SNR計算

圖像質量評價在計算機視覺,人工智能,高清視頻傳輸上面有很廣泛的應用。目前,圖像質量評價主要分為三個方向,有參考圖像的質量評價,半參考的圖像質量評價,以及無參考的圖像質量評價。許多時候,我們利用CIS采集的RAW DATA本身就是含噪信號,因為我們往往不知道感興趣的像素…

Java this 關鍵字的用法

this 關鍵字的用法 this 在類中就是代表當前對象&#xff0c;可以通過 this 關鍵字完成當前 對象的成員屬性、成員方法和構造方法的調用。 那么何時用 this? 當在定義類中的方法時&#xff0c;如果需要調用該類對象&#xff0c;就可以用 this 來表示這個對象。也就是說&#x…

TMDS——最小化傳輸差分信號及其協議

過渡調制差分信號&#xff0c;也被稱為最小化傳輸差分信號&#xff0c;是指通過異或及異或非等邏輯算法將原始信號數據轉換成10位&#xff0c;前8為數據由原始信號經運算后獲得&#xff0c;第9位指示運算的方式&#xff0c;第10位用來對應直流平衡&#xff08;DC-balanced&…

順大勢逆小勢策略之代碼實現及可行性分析

閱讀原文&#xff1a;quant.la/Article/Vie… 前言 資產配置多元化是投資的唯一免費午餐 —— 馬克維茨。 在市場中有兩種策略&#xff1a;趨勢策略和震蕩策略。趨勢追蹤策略的特點在大行情的波動段找到有效的交易信號。而震蕩策略則是一種反趨勢策略&#xff0c;一波大幅上漲后…

數字圖像處理——中值濾波及其改進算法

一、算法介紹 中值濾波器是非線性濾波器的一個例子&#xff0c;它在保留圖像特征方面非常有效。 但是&#xff0c;濾波器的窗口大小直接影響中值濾波器的性能。 較小的窗口保留了特征&#xff0c;但會導致噪聲抑制的減少。 在較大窗口的情況下&#xff0c;噪聲抑制很高&#xf…

Spring整合web開發

正常整合Servlet和Spring沒有問題的 public class UserServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {ApplicationContext applicationContext new ClassPathXmlApplica…

環信快速集成,以及實際集成中遇到的坑

一.pod集成遇到的問題 1.直接pod 安裝 pod EaseUI, :git > https://github.com/easemob/easeui-ios-hyphenate-cocoapods.git 在這個過程中&#xff0c;如果你pod已經安裝了sdwebimage&#xff0c;mjrefresh等他自身包含的三方&#xff0c;就需要在你的podfile里面把這個給刪…

PAFF 和MBAFF

PAFF 和MBAFF&#xff1a;當對隔行掃描圖像進行編碼時&#xff0c;每幀包括兩個場&#xff0c;由于兩個場之間存在較大的掃描間隔&#xff0c;這樣&#xff0c;對運動圖像來說&#xff0c;幀中相鄰兩行之間的空間相關性相對于逐行掃描時就會減小&#xff0c;因此這時對兩個場分…

Test435678

2345魚57洋炮456789轉載于:https://www.cnblogs.com/rhxuza1993/p/9534938.html

用NPOI從DataBase到Excel '2

NPOI的C# Helper代碼2 1 public static MemoryStream ExportXls(DataTable dt)2 {3 HSSFWorkbook wk new HSSFWorkbook();4 ISheet sheet null;5 6 string sheetName "Sheet1";7 if (!string.Is…