整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML（超文本標記語言）中的元素可以分為兩類：塊級元素和內聯元素。塊級元素會自動占據一行，并且可以設置寬度和高度。內聯元素不會自動占據一行，而是根據文本內容的長度自動調整寬度。塊級元素可以包含其他元素，包括文本、圖像、鏈接等。內聯元素通常不包含其他元素。
以下是一些常見的塊級元素：
這些塊級元素可以通過設置 CSS 樣式屬性來實現不同的布局和樣式效果，例如設置背景顏色、邊框、字體、大小、顏色等。同時，塊級元素還可以通過設置 CSS 定位屬性來實現定位和浮動效果，例如設置position: relative;、float: left;
以下是一些常見的內聯元素：
這些內聯元素可以通過設置 CSS 樣式屬性來實現不同的樣式效果，例如設置字體、顏色、大小等。同時，內聯元素還可以通過設置 CSS 定位屬性來實現定位和浮動效果，例如設置position: relative;、float: left。
默認情況下，<img> 元素是內聯元素，它會根據文本的流動方式進行布局。這意味著如果在一行中放置了多個 <img> 元素，它們會在一行中排列，并且不會自動換行。
但是，如果將 <img> 元素的 display 屬性設置為 block，那么它就會成為塊元素。塊元素會占據一行，并且可以設置寬度和高度。在這種情況下，多個 <img> 元素會自動換行，并且可以通過設置 margin 屬性來調整它們之間的間距。
html
<img src="image.jpg" alt="圖片描述" style="display: block;">
在上面的示例中，<img> 元素的 display 屬性被設置為 block，這會使它成為一個塊元素。你可以根據需要調整圖片的寬度和高度，以及 margin 屬性來控制圖片之間的間距。
2年前做了一個基于element-ui的layout組件發布到npm package上去，廣受大家的歡迎，下載量每周頗升。這個組件的好處在于開發者不用寫太多html代碼和邏輯，只要通過配置json的方式就能馬上生成后臺，包括菜單欄和導航面包屑等一鍵生成，還能根據不同的需求做定制化后臺界面，就像拼積木一樣，讓用戶只專注于內容核心代碼的開發。現在還沒做大范圍的推廣，如果我覺得它做得足夠好，我一定會放到npm上推薦給各位讀者使用哈。當初為了解答網友的疑問，我還專門建立了該組件的官網。logo看起來有沒有很熟悉？哈哈哈，它其實就是element-ui的logo進行改造的，意義就是告訴使用者，這是element-ui功能的組合加強版。
為了迎合公司的OKR，我提出了對表單表格組件的封裝。為什么我會有這個想法？其實這個組件我很早就想做了，只是以前做的是基于UI層面的，近期我接手了公司的一個項目叫童畫，每天做的事情感覺就是復制粘貼，修改部分不同的功能和字段名稱。組件的意義在于可以在遇到同一類設計場景時，可以復用，從而減少設計的時間和形成產品的統一性。傳統的搜索表單不就是這樣嗎？上面是表單搜索字段，中間是搜索結果的表格，下面是搜索結果的分頁。把表單和表格組合起來的好處在于很多搜索字段都是基于表格組件的某些字段，那我根據search字段進行篩選不就可以了么，很久之前，我們總是在吐槽產品經理總是喜歡截圖現有功能，然后做字段修改，搞成原型扔給前端。如果前端也能像他這樣簡單，那該多好呀，類似這樣的想法油然而生。剛開始我只是為了方便我的工作，沒想到領導卻重視了起來，想把這個組件推廣給公司其他十幾個前端同事使用，于是乎，我便認真開搞了起來。有理論還不行，得有場景實踐，剛好公司的項目童畫有很多場景，我根據它里面的場景，做了很多功能的封裝和兼容。
寫到這里，有人會說了，這不就是CRUD組件嗎？有這想法的話，說明你還太年輕和小看這個組件的功能了。傳統的CRUD組件靈活性不是很高，這個組件的好處是配置即可用，不用考慮其他搜索，翻頁，清空等各種邏輯，讓組件達到高度復用，封裝了場景的插槽類型，但為了防止翻車，我還是預留了變態需求的插槽。字段的使用更多采用elementUI的命名方式，讓使用者減少學習成本。這樣做的好處是什么呢？首先，前端再也不用寫頁面了，其次，對于比較規矩的搜索表單頁面，完全可以通過請求接口的形式交給后端來配置呈現頁面即可，根本沒有前端什么事了，前端的工作可以解放出來做更復雜的功能開發。
為了使用方便，我把它做成了組件并放到了公司的私服上，接下來的工作就是寫文檔啦，以下是部分文檔的編寫，因為時間問題，沒來得及好好檢查，各位看官將就看一下就行啦。
export default {
options: {
request: {
api: '/student/web/student/enroll/list',
method: 'GET',
paramMap: {
index: 'pageIndex',
limit: 'pageSize'
},
resultMapping: {
total: 'total',
data: 'pageData'
}
},
size: '', // medium/mini/small, 默認medium
labelWidth: 90,
submitBtn: true, // 搜索按鈕，默認true，非必填
submitText: '查詢', // 搜索按鈕的文字，默認查詢，非必填
clearBtn: true, // 清除按鈕，默認true
clearSize: 'mini', // medium/mini/small, 默認medium
clearText: '清除', // 清除按鈕的文字，默認清除，非必填
column: [
{
slotType: 'selection'
},
{
prop: 'keyword',
label: '學員/家長',
search: true,
hide: true
},
{
prop: 'studentName',
label: '學員'
},
{
prop: 'telephone',
label: '家長手機號',
width: 130
},
{
prop: 'type',
label: '報名類型',
width: 90,
search: true,
type: 'select',
slot: true,
slotType: 'text',
slotArray: [{
label: '新報',
value: 1
},
{
label: '續報',
value: 2
}],
dicData: [{
label: '新報',
value: 1
},
{
label: '續報',
value: 2
}]
},
{
prop: 'courseFee',
label: '繳費金額',
slot: true,
slotType: 'regEx',
regEx: '￥{{courseFee/100}}'
},
{
prop: 'payType',
label: '支付方式',
search: true,
type: 'select',
width: 100,
dicData: [
{
label: '微信',
value: '微信'
},
{
label: '支付寶',
value: '支付寶'
},
{
label: '銀行卡轉賬',
value: '銀行卡轉賬'
},
{
label: '其它',
value: '其它'
}
]
},
{
prop: 'courseCount',
label: '報名課時'
},
{
prop: 'followTeacher',
label: '跟進人'
},
{
prop: 'createTime',
label: '報名時間',
param: 'beginTime,endTime',
format: 'yyyy 年 MM 月 dd 日',
valueFormat: 'timestamp',
search: true,
width: 160,
type: 'daterange'
},
{
prop: 'auditor',
label: '報名老師',
search: true,
param: 'teacherId', // 修正請求參數名
type: 'select',
dicData: [],
dicUrl: '/org/web/org/user/list/teacher',
dicMap: {
label: 'userName',
value: 'id'
}
},
{
prop: 'status',
label: '報名狀態',
slot: true,
slotType: 'tag',
width: 110,
slotArray: [{
type: 'warning',
label: '待審核',
value: 1
},
{
type: 'danger',
label: '審核不通過',
value: 3
},
{
type: 'success',
label: '審核通過',
value: 2
}],
dicUrl: ''
},
{
prop: 'operation',
label: '操作',
width: 80,
slot: true,
slotType: 'operation',
slotArray: [
{
label: '去審核',
value: 'handle',
filter: ({status}) => {
return status === 1
}
}
]
}
]
}
}生成的頁面
最后，感謝同事世丞在字段命名上給了很多建議，同時也感謝領導給了很多刁難的意見，讓這個組件的功能越發強大，也讓開發者使用更方便，達到配置即可使用的地步。當然了，組件還需要更多場景的訓練才能真正實現各種功能的兼容。后期我希望可以盡快放到layout官網上，供大家使用。
一個會美工與后端PHP/nodejs的全棧工程師
更多學習內容歡迎關注
微信公眾號 ：程序員周先生
lt;!DOCTYPE html>
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<h1>歡迎來到我的網頁</h1>
<p>這是一個簡單的 HTML 網頁設計。</p>
<img src="https://picsum.photos/200" alt="隨機圖片">
<ul>
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ul>
</body>
</html>
在這個例子中，我們創建了一個簡單的 HTML 網頁，其中包括以下元素：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
