天給大家分享一個挺不錯的Web多功能擴展表格組件LayuiSoulTable。
layui-soul-table 基于layui風格的table擴展表格組件。提供了超過40+功能。
將下列模塊導入到項目中。
// 自定義模塊,這里只需要開放soulTable即可
layui.config({
base: 'ext/', // 模塊目錄
}).extend({
soulTable: 'soulTable' // 模塊別名
})
table.render({
elem: '#myTable'
,height: $(document).height() - $('#myTable').offset().top - 20
,limit: 20
,page: true
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'poetry', title:'詩詞', width:188, filter:true, sort: true}
,{field:'name', title:'詩人', width:100, filter:true, sort: true}
,{field:'type', title:'類型', width:100, filter:true}
,{field:'dynasty', title:'朝代', width:150, filter:true}
,{field:'sentences', title:'名句', width:400, filter:true}
,{title:'操作', toolbar: '#barDemo', width:150}
]]
,done: function () {
soulTable.render(this)
}
})
layui-soul-table提供了非常豐富的使用說明文檔,有需要的可以去看看哈。
# 預覽地址
https://saodiyang.gitee.io/layui-soul-table/
# 倉庫地址
https://gitee.com/saodiyang/layui-soul-table
好了,今天就分享到這里。如果web項目有需要table功能,不妨可以試一試。
<html></html>雙標簽 開頭結尾 HTML標簽為最大的標簽 稱為根標簽
<head></head> 文檔頭部標簽 且必須設置title
<title></title> 頁面標題
<body></body> 文檔的主體 包含頁面的內容
<h1>-<h6> HTML提供6個等級的頁面標題 有大到小
<p></p> p標簽用于定義段落 可以將頁面分為若干個段落 根據窗口大小自動換行
<br/>單標簽 換行標簽 (break打斷)
加粗 <strong></strong>or<b></b>
斜線 <em></em>or<i></i>
刪除線 <del></del>or<s></s>
下劃線 <ins></ins>or<u></u>
沒有語義 屬于一種盒子 來裝內容
<div></div> 表示分割分區 用來布局 一行一個 大盒子
<span></span>意為跨度,跨距 一行可以哦有多個 小盒子
<img src="圖像路徑(url)"/> 定義頁面中的圖像
圖像標簽包含多個屬性
src 圖片路徑 必須屬性
alt 文本 替換文本 圖像不能顯示的文字
title 文本 鼠標放到圖像上顯示文字
width 像素 寬度
height 高度
border 邊框
相對路徑和絕對路徑
相對路徑:以引用文件所在位置為參考基礎,而建立出的目錄路徑
分類:下級路徑/ 上級路徑../
絕對路徑:是指目錄下的絕對位置,如硬盤中的路徑或網路地址
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
href用于指定鏈接目標的url地址(必須屬性)
target用于指定鏈接打卡方式 _self為默認值 _blank為在新窗口打開方式
錨點鏈接:可以快速到頁面某個位置
在鏈接文本中的href屬性中,設置屬性值為#名字的形式,如<a href="#two">目標</a>
找到目標位置標簽,里面添加一個id屬性=名字,如:<h3 id="two">目標</h3>
<!-- 注釋語句 --> 快捷鍵CTRL + /
HTML 原代碼 | 顯示結果 | 描述 |
< | < | 小于號或顯示標記 |
> | > | 大于號或顯示標記 |
& | & | 可用于顯示其它特殊字符 |
" | “ | 引號 |
? | ? | 已注冊 |
? | ? | 版權 |
? | ? | 商標 |
半個空白位 | ||
一個空白位 | ||
不斷行的空白 |
<table></table> 是用于定義表格的標簽
<tr></tr> 標簽用于定義表格中的行,必須嵌套在<table></table>標簽中
<tb></tb> 用于定義表格的單元格,必須嵌套在<tr></tr>標簽中
<td> 元素中的文本通常是普通的左對齊文本。字母td指表格數據(table data),即數據單元格的內容
表頭單元格標簽:
<th>標簽表示HTML表格的表頭部分 <th> 元素中的文本通常呈現為粗體并且居中。
表格屬性:
align left center right 規定表格相對于周圍元素的對齊方式
border 1or"" 規定表格單元是否擁有邊框默認為"",表示沒有邊框
cellpadding 像素值 規定單元邊沿與其內容的空白,默認1像素
cellspacing 像素值 規定單元格直接的空白 默認2像素
with 像素值or百分比 規定表格的寬度
合并單元表格方式:
跨行合并:rowspan="合并單元格的個數"
跨列合并:colspan="合并單元格的個數"
<ul>標簽表示無序列表 里面只能包含li
<ol>有序標簽 里面只能包含li
<li>相當于一個容器定義列表項 與<ui>or<li>嵌套使用 li里面可以包含任何標簽
<dl>標簽用于定義描述列表(或自定義列表),該標簽會與<dt>(定義項目和名字)和<dd>(描述每一個項目名字)一起使用
標簽 | 描述 |
<form> | 定義供用戶輸入的表單 |
<input> | 定義輸入域 |
<textarea> | 定義文本域 (一個多行的輸入控件) |
<label> | 定義了 <input> 元素的標簽,一般為輸入標題 |
<fieldset> | 定義了一組相關的表單元素,并使用外框包含起來 |
<legend> | 定義了 <fieldset> 元素的標題 |
<select> | 定義了下拉選項列表 |
<optgroup> | 定義選項組 |
<option> | 定義下拉列表中的選項 |
<button> | 定義一個點擊按鈕 |
<datalist> New | 指定一個預先定義的輸入控件選項列表 |
<keygen> New | 定義了表單的密鑰對生成器字段 |
<output> New | 定義一個計算結果 |
<input>標簽用于收集用戶信息 包含一個type屬性 可以有多種樣式
<input type="value">
<input type="屬性值" />
屬性值:
button | 定義可點擊按鈕(多數情況下,用于通過 JavaScript 啟動腳本)。 |
checkbox | 定義復選框。 |
file | 定義輸入字段和 "瀏覽"按鈕,供文件上傳。 |
hidden | 定義隱藏的輸入字段。 |
image | 定義圖像形式的提交按鈕。 |
password | 定義密碼字段。該字段中的字符被掩碼。 |
radio | 定義單選按鈕。 |
reset | 定義重置按鈕。重置按鈕會清除表單中的所有數據。 |
submit | 定義提交按鈕。提交按鈕會把表單數據發送到服務器。 |
text | 定義單行的輸入字段,用戶可在其中輸入文本。默認寬度為 20 個字符。 |
<label> 標簽為 input 元素定義標注(標記)。 label是標注的意思
label 元素不會向用戶呈現任何特殊效果。不過,它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本,就會觸發此控件。就是說,當用戶選擇該標簽時,瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同
詳情可參考
https://www.runoob.com/ 菜鳥教程
https://www.w3school.com.cn/ w3c
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
<!DOCTYPE HTML>
<html>
<head>
<title>文內鏈接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head>
<body >
<div style="width:50%;margin:auto;"><!--使頁面居中顯示,并展視窗50%寬度-->
<div style="position:fixed; top:0px;"><!--使導航菜單懸停在頂端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情況</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役動態</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>
</div><!--使導航菜單懸停在頂端(結尾)-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隱藏滾動條-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >試飛進程</a></h2>
殲-20隱形戰斗機首架技術驗證機于2011年1月11日中午12時50分左右進行首次升空飛行測試,13時08分成功著陸,歷時18分鐘。<br>
整個首飛過程在殲-10S戰斗教練機陪伴下完成 。
2016年10月28日,首次發布“空軍試飛員將駕殲-20飛機亮相中國航展”后,還陸續發布了“殲-20戰機列裝空軍作戰部隊”“空軍殲-20戰機首次開展海上方向實戰化訓練”等。
<h2><a id="chapter2">研制情況</a></h2>
在2016年11月1日,第十一屆珠海航展,殲-20首次進行空中飛行展示。兩架殲-20做了公開飛行,不僅在現場引起轟動,也立刻被西方媒體大量報道。殲-20是中國現代空中力量的代表作,也進入了世界最先進的第五代戰斗機行列,它是中國國防能力高速發展的一個象征。<br>
2018年11月11日,第十二屆中國航展在珠海迎來“高光時刻”:殲-20戰機在公開飛行展示中掛彈開倉,震撼獻禮人民空軍成立69周年紀念日。 <br>
2019年10月13日,慶祝人民空軍成立70周年航空開放活動新聞發布上,空軍新聞發言人申進科大校介紹殲-20戰機列陣人民空軍“王牌部隊”
<h2><a id="chapter3" >服役動態</a></h2>
2017年3月9日,中央電視臺報道殲-20戰斗機正式進入空軍序列。<br>
2017年3月13日,《中國日報》發布消息稱,中國自主研制的殲-20近期將裝配國產發動機。<br>
2017年7月30日,殲-20三機編隊參加在朱日和舉行的慶祝中國人民解放軍成立90周年閱兵。殲擊機梯隊飛來,3架殲-20隱形戰斗機以楔形編隊的形式在天空中飛過。<br>
2017年9月28日,在中國國防部行記者會上,國防部新聞發言人吳謙大校介紹殲-20飛機已經列裝部隊。<br>
2017年11月10日上午,中國空軍發言人申進科大校表示,殲-20 列裝部隊后,已經開展編隊訓練。<br>
2018年2月9日,中國空軍新聞發言人申進科大校發布消息,殲-20開始列裝空軍作戰部隊。<br>
2018年10月30日,中國空軍4架殲-20隱形戰斗機現身珠海金灣機場上空。<br>
2019年10月1日,殲-20現身慶祝中華人民共和國成立70周年閱兵式;閱兵中,殲-20與殲-16、殲-10C三型飛機分別以5機楔隊組成戰斗隊形接受檢閱;該三款殲擊機被譽為中國空軍殲擊機家族的“三劍客”,是未來聯合作戰的骨干力量
<h2><a id="chapter4" >總體評價</a></h2>
殲-20是眼下亞洲區域最先進的戰機,這讓中國空軍在面對日本、韓國與印度等國家的空軍時占有顯著優勢。外媒將殲-20與其他國家戰機進行了對比。俄羅斯蘇霍伊蘇-57戰斗機由于研制進度幾度推遲,尚未正式交付入役;美國F-35戰斗機也多次出現飛機供氧不足的問題,大面積停飛,出口受阻;韓國KF-X隱形戰機先是被爆出因掌握不了關鍵技術而被迫降成四代半戰機的情況,后又傳出了合作方印尼打算撤資并已告知韓國的消息。因此,中國殲-20戰機成為亞太區域領跑的優勢戰機。<br>
中國空軍正向全疆域作戰的現代化戰略性軍種邁進,成為有效塑造態勢、管控危機、遏制戰爭、打贏戰爭的重要力量。殲-20戰機列裝空軍作戰部隊,將進一步提升空軍綜合作戰能力,有助于空軍更好的肩負起維護國家主權、安全和領土完整的神圣使命。<br>
殲20是我國自主研制的第五代戰斗機,它的研制實現了既定的四大目標——打造跨代新機、引領技術發展、創新研發體系、建設卓越團隊。打造跨代新機,是按照性能、技術和進度要求,研制開發我國自己的新一代隱身戰斗機。引領技術發展,指通過自主創新實現強軍興軍的目標。殲20在態勢感知、信息對抗、協同作戰等多方面取得了突破,這是中國航空工業從跟跑到并跑,再到領跑的必由之路。創新研發體系,是指建設最先進的飛機研制條件和研制流程。通過一大批大國重器的研制,我們建立了具有我國特色的數字化研發體系。建設卓越團隊,是指通過型號研制,錘煉一支愛黨愛國的研制隊伍,這些擁有報國情懷、創新精神的優秀青年是航空事業未來發展的生力軍。未來,我們將在戰斗機的機械化、信息化、智能化發展征程上不斷前行。
</p>
<img border="0" src="img/image1.jpg" usemap="#map" / >
<map name="map" id="map">
<area shape="poly" coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="殲20氣動外形分析"><!--必須保證畫面尺寸與頁面顯示尺寸一致!-->
</map>
</div><!--小div(結尾)-->
</div><!--小div套大div隱藏滾動條(結尾)-->
</div><!--使頁面居中顯示,并展視窗50%寬度(結尾)-->
</body>
</html>
1.頁面內容居中顯示方法
2.導航欄懸停頂端方法
3.鼠標滑過導航標題或鏈接時改變背景色提示
3.隱藏滾動條方法
4.圖片區域鏈接
大家結合代碼和技術解析,先自行分析一下每段代碼的作用,以及它們之間的前后關系。這一步練習對培養代碼閱讀能力很有好處,希望大家可以先自行閱讀分析。
下一次,我會逐步演示“頁面制作技術解析”中的五個步驟以及一些注意事項。
使用碎片時間,學習完整知識!關注大魚師兄,一起精研技藝。
HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作
HTML是什么?——零基礎自學網頁制作
第一個HTML頁面如何寫?——零基礎自學網頁制作
HTML頁面中head標簽有啥用?——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作
使用HTML添加表格1(基本元素)——零基礎自學網頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作
使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作
HTML表單4(form的action、method屬性)——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
HTML中的圖片區域鏈接方法詳解——零基礎自學網頁制作
HTML圖片區域鏈接注意事項與Gimp基本用法——零基礎自學網頁制作
用HTML制作一個簡單頁面(詳解)——零基礎自學網頁制作(完結篇)
*請認真填寫需求信息,我們會在24小時內與您取得聯系。