整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前面的数据库设计中，商品的字段有商品名称，价格、图片和描叙，所有表单中至少有这些填项
代码：
<!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小时内与您取得联系。
