整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前面的數據庫設計中，商品的字段有商品名稱，價格、圖片和描敘，所有表單中至少有這些填項
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../layui/css/layui.css">
<script src="../../layui/layui.js"></script>
<script src="../../static/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div >
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">商品名稱</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input" style="width: 300px">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">價格</label>
<div class="layui-input-block">
<input type="number" name="title" required lay-verify="required" autocomplete="off" class="layui-input" style="width: 300px">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">圖片</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上傳圖片
</button> </div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">描敘</label>
<div class="layui-input-block">
<textarea id="demo" style="display: none; "></textarea> </div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
</div>
</div>
</form>
</div>
</body>
<script>
layui.use('layedit', function(){
var layedit=layui.layedit;
layedit.build('demo'); //建立編輯器
});
//Demo
layui.use('form', function(){
var form=layui.form;
//監聽提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
</html>
效果
因為商品的介紹可能會有圖片和文本在一塊，所以我這用的富文本
CSS和HTML結合布局頁面的過程中，有一組被人們稱為“盒屬性”的CSS樣式，被廣泛的使用到。相信經常布局寫頁面的朋友們對盒屬性一定不陌生。在CSS技術的發展過程中，盒屬性也有了許多次改進，今天小海老師就為大家講一講盒屬性中的CSS樣式如何使用。
承接文章：通欄導航欄的制作，綜合使用CSS屬性，代碼不超過30行
技術等級：初級 | 適合前端開發的初學者閱讀學習。
希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。
盒屬性主要涉及到三類CSS屬性：
padding
margin
border
一、CSS中的盒概念：
CSS技術將HTML中所有的元素都認為是一個“盒子”，并把這個“盒子”分為了三個組成部分，這三個組成部分分別叫做“填充”、“邊界”、“邊框”。顧名思義，盒子的主要功能就是盛放東西，CSS的意思是將各個HTML標記對看做了容器，而標記對內部存放的文本、圖片、列表、表格、表單等都被看做了容器所盛放的內容。
一個裝有地球的盒子
CSS技術為盒子的三個組成部分下了明確的定義：
填充：指盒子邊框與盒子內容之間的距離。
邊界：指盒子與盒子之間的距離。
邊框：指填充與邊界之間的部分。
CSS的盒模型
盒子的三個組成部分中，“填充”和“邊界”只提供了相關的距離屬性，而“邊框”提供了相關的距離屬性、顏色屬性和樣式屬性。
二、調整盒子的填充距離：
CSS技術利用padding系列屬性來調整盒子的填充距離。
CSS技術利用padding系列屬性來調整盒子的填充距離
padding屬性的取值為四個數值，按照“上、右、底、左”的順序排列書寫，之間用空格隔開。
padding屬性的使用格式：
padding:top right bottom left;
padding屬性的取值：
帶有單位的長度值。
auto
百分比
padding屬性還派生出下列四個子屬性，用于調整四個方向上單獨的填充距離：
padding-top，設置盒子頂部填充的距離。
padding-right，設置盒子右側填充的距離。
padding-bottom，設置盒子底部填充的距離。
padding-left，設置盒子左側填充的距離。
注意：盒子的填充具備了數值后，為了保證盒子的大小不發生變化，必須修改盒子的寬度和高度。
盒子的實際高度=盒子的期望高度-盒子的頂部填充距離-盒子的底部填充距離
盒子的實際寬度=盒子的期望寬度-盒子的左側填充距離-盒子的右側填充距離
例如：希望創建一個寬度為500，高度為300的盒子。同時頂部填充距離為10像素，左側填充距離為20像素，右側和底部填充均不設置，則padding屬性取值如下：
padding:10px 0 0 20px;
因此，計算盒子的實際寬高：
盒子的實際高度=300px-10px-0px=290px
盒子的實際寬度=500px-20px-0px=480px
所以，該盒子的CSS代碼應設置為如下所示：
width:480px; height:290px;
padding:10px 0 0 20px;
當然，有開發經驗的人一定知道，CSS3技術提供了一個名為box-sizing的屬性，避免了這類填充相減的復雜操作。在后續的文章中，我會為大家全面介紹CSS3技術的使用。
三、調整盒子的邊界距離：
CSS技術利用margin系列屬性來調整盒子的邊界距離。
CSS技術利用margin系列屬性來調整盒子的邊界距離
margin屬性的取值為四個數值，按照“上、右、底、左”的順序排列書寫，之間用空格隔開。
margin屬性的使用格式：
margin:top right bottom left;
margin屬性的取值：
帶有單位的長度值（可以取負值）。
auto
百分比
margin屬性還派生出下列四個子屬性，用于調整四個方向上單獨的邊界距離：
margin-top，設置盒子頂部邊界的距離。
margin-right，設置盒子右側邊界的距離。
margin-bottom，設置盒子底部邊界的距離。
margin-left，設置盒子左側邊界的距離。
四、調整盒子的邊框
CSS技術利用border系列屬性來調整盒子的邊框。
CSS技術利用border系列屬性來調整盒子的邊框
1、調整盒子邊框的粗細：
border-top-width，設置盒子頂部邊框的粗細。
border-right-width，設置盒子右側邊框的粗細。
border-bottom-width，設置盒子底部邊框的粗細。
border-left-width，設置盒子左側邊框的粗細。
border-width，設置盒子四個方向邊框的粗細。
border-width屬性的使用格式：
border-width:top right bottom left;
2、調整盒子邊框的顏色：
border-top-color，設置盒子頂部邊框的顏色。
border-right-color，設置盒子右側邊框的顏色。
border-bottom-color，設置盒子底部邊框的顏色。
border-left-color，設置盒子左側邊框的顏色。
border-color，設置盒子四個方向邊框的顏色。
border-color屬性的使用格式：
border-color:top right bottom left;
3、調整盒子邊框的樣式：
border-top-style，設置盒子頂部邊框的樣式。
border-right-style，設置盒子右側邊框的樣式。
border-bottom-style，設置盒子底部邊框的樣式。
border-left-style，設置盒子左側邊框的樣式。
border-style，設置盒子四個方向邊框的樣式。
border-style屬性的使用格式：
border-style:top right bottom left;
border-style屬性有如下所示的取值：
none，盒子無邊框。
solid，盒子邊框為實線。
dashed，盒子邊框為虛線。
dotted，盒子邊框為點邊框。
double，盒子邊框為雙實線邊框。
groove，盒子邊框為溝槽狀。
ridge，盒子邊框為脊狀。
inset，盒子邊框為凹陷狀。
outset，盒子邊框為凸出狀。
4、設置盒子一個位置的邊框效果：
CSS還提供了可以設置盒子單個位置邊框效果的屬性。
border-top，設置盒子頂部邊框的效果。
border-right，設置盒子右側邊框的效果。
border-bottom，設置盒子底部邊框的效果。
border-left，設置盒子左側邊框的效果。
使用格式：
border-top:style width color;
例如：border-top:solid 1px #ff0000;
5、設置盒子所有邊框具有相同的效果：
CSS技術還提供了可以調整盒子所有邊框都具有相同外觀的屬性。
border，設置盒子四個方向所具備邊框外觀效果。
使用格式：
border:style width color;
例如：border:solid 1px #ff0000;
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
由于篇幅問題，本篇文章只為大家介紹了盒屬性都有哪些，以及基本的使用格式。在下一篇文章中，小海老師會為大家講解盒屬性的使用技巧已經一些常見的應用領域。希望對大家的工作能夠提供幫助。
著互聯網的快速發展，網站表單已經成為了人們在線交流和交易的重要工具。然而，一些繁瑣、難以理解的表單設計，會讓用戶感到極度不滿。為了避免這種情況的發生，我們需要考慮如何設計一個具有良好用戶體驗的網站表單。以下是幾個關鍵要素：
1. 清晰簡潔的表單布局
設計者應該避免過多花里胡哨的效果，并且在表單的布局上應該突出重點，使得用戶可以快速地找到需填寫的信息。例如，將必填項和選填項分開，或在輸入文本框下添加簡單的提示文字。
2. 簡單易懂的表單語言
表單設計者應該將表單語言簡單易懂、符合口語化的規范。這樣設計出來的表單將能夠避免讓用戶產生疑問和負擔。例如，將輸入字段的名稱簡化為易于理解的簡稱而不是專業術語。
3. 應用表單驗證功能
在設計過程中，加入表單驗證模塊是一個不錯的選擇。它可以驗證數據的正確性，以防止錯誤的輸入產生。這一功能可解除用戶的擔憂，并有助于使數據的準確度更高。
4. 無需繁瑣操作的表單設計
絕大多數的填表工作都需要用戶付出時間和努力，因此設計者能夠盡力減少用戶的操作負擔是非常必要的。例如，通過文本框中自動填充已知信息，或推薦符合用戶習慣的輸入方法等方式，能優化填表的操作流程，減輕用戶的壓力。
5. 優秀的視覺效果和超鏈接設計
一個出色的表單不只是操作的方便，它同樣也需要具備良好的視覺效果。為了達到這一目的，表單設計者需要選擇適當的顏色和字體，這些會增強用戶的閱讀體驗。設計者還需要考慮超鏈接文本，這將表現在提取必要信息，以及重要的地方即將出現的情況。
總之，一個好的網站表單應該是設計簡單、易懂、便捷、準確且視覺上引人注目的。在設計表單時需要注重細節，以保證用戶能夠獲得完美的用戶體驗。只有這樣，才會為用戶帶來舒適輕松的在線交流體驗。
該文章由上海集錦科技（上海網站建設 http://www.jijinweb.com)原創編寫。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
