1，完成鼎捷官网实现
1.1 头部
<template> <el-container> <el-header> <el-row> <el-col span="4"> <img src="/images/digiwin/dj_logo.png"/> </el-col> <el-col span="22" class="ecol"> <!-- <el-menu> 是 Element UI 提供的导航菜单组件，用于创建水平或垂直的菜单 --> <el-menu router :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" > <el-menu-item index="1">产品方案</el-menu-item> <el-menu-item index="2">行业方案</el-menu-item> <el-sub-menu index="3"> <template #title>案例中心</template> <el-menu-item index="3-1">标杆案例</el-menu-item> <el-menu-item index="3-2">案例视频</el-menu-item> </el-sub-menu> <el-menu-item index="4">资料与服务</el-menu-item> <el-menu-item index="5">活动</el-menu-item> <el-menu-item index="6">云市场</el-menu-item> <el-menu-item index="about">关于鼎捷</el-menu-item> <el-menu-item index="8">投资者关系 </el-menu-item> <el-icon class="icon-ser"><Search /></el-icon> </el-menu> </el-col> </el-row> </el-header> </el-container> </template> <style scoped> .ecol{ width: 900px; } .icon-ser { margin-top: 20px; color: #aaa; } </style>效果：
1.2 主体：
<template> <el-container> <el-main > <div class="home-main"> <div class="product-title">产品方案</div> <div class="product-text"> 以ERP产品和解决方案为核心，同时向外扩充并衍生ERPII 产品互为补充， <br /> 鼎捷为制造与流通企业提供生态型、一体化的智能+整合产品方案与服务。 </div> </div> <div class="home-main-1"> <el-row > <el-text class="mx-1">数智驱动企业新未来</el-text> </el-row> <el-row class="box1"> <el-row> <img src="../../public/images/digiwin/icon/dj_2_1.png"/> <img src="../../public/images/digiwin/icon/dj_2_2.png"/> <img src="../../public/images/digiwin/icon/dj_2-3.jpg"/> </el-row> <el-row> <img src="../../public/images/digiwin/icon/dj_2_4.jpg"/> <img src="../../public/images/digiwin/icon/dj_2_5.png"/> <img src="../../public/images/digiwin/icon/dj_2_6.jpg"/> </el-row> </el-row> </div> <div class="home-main-2"> <el-row > <el-text class="mx-1">各行各业 独到专精</el-text> </el-row> <el-row> <el-row class="mx-2"> <div> <img src="../../public/images/digiwin/icon/dj_3_1.png"/> <P>机械装备</P> </div> <div> <img src="../../public/images/digiwin/icon/dj_3_2.png"/> <P>IC/半导体</P> </div> <div> <img src="../../public/images/digiwin/icon/dj_3_1.png"> <P>汽车零部件</P> </div> <div> <img src="../../public/images/digiwin/icon/dj_3_4.png"/> <P>电子制品</P> </div> <div> <img src="../../public/images/digiwin/icon/dj_3_5.png"/> <P>印刷包装</P> </div> </el-row> <el-row class="mx-2"> <div> <img src="../../public/images/digiwin/icon/dj_3_6.png"/> <P>医疗器械</P> </div> <div> <img src="../../public/images/digiwin/icon/dj_3_7.png"/> <P>品牌分销</P> </div> <div> <img src="../../public/images/digiwin/icon/dj_3_8.png"/> <P>注塑制品</P> </div> <div> <img src="../../public/images/digiwin/icon/dj_3_9.png"/> <P>家具制造</P> </div> <div> <img src="../../public/images/digiwin/icon/dj_3_10.png"/> <P>紧固件</P> </div> </el-row> <el-row class="mx-2"> <div> <img src="../../public/images/digiwin/icon/dj_3_11.png"/> <P>金属制品</P> </div> <div> <img src="../../public/images/digiwin/icon/dj_3_12.png"/> <P>餐饮行业</P> </div> <div> <img src="../../public/images/digiwin/icon/dj_3_13.png"/> <P>烘焙行业</P> </div> <div> <img src="../../public/images/digiwin/icon/dj_3_14.png"/> <P>家居卖场</P> </div> <div> <img src="../../public/images/digiwin/icon/dj_3_15.png"/> <P>家电行业</P> </div> </el-row> <a class="mxa">查看全部</a> </el-row> </div> </el-main> </el-container> </template> <style scoped> .product-title{ padding: 250px 0 20px 20px; /* 设置元素的内边距，分别代表上、右、下、左方向的内边距 */ color: white; font-size: 28px; font-weight: bold; /* font-weight属性设置字体的粗细 */ } .product-text{ margin-left: 20px; color: white; line-height: 30px; } .box1{ padding-top: 40px; } .box1 img{ padding: 12px; } .home-main-2{ background: #f3f3f3; width: 1227px; height: 650px; padding:70px 0; } .mx-2{ margin: 0 auto; } .mx-2 img{ width: 90px; margin: 0 75px; margin-top: 60px; } .mx-2 p{ font-size: 17px; text-align: center; margin: 0; } .mxa{ color: #565656; font-size: 15px; width: 140px; line-height: 38px; border: solid 1px #9a9a9a; /* border属性用于设置元素边框的样式、宽度和颜色. 边框样式（style）是solid，即实线边框。 边框宽度（width）是1px，即边框的厚度为1像素。 边框颜色（color)*/ text-align: center; margin: 60px auto 0; }效果：
1.3 尾部：
<template> <el-container> <el-footer class="home-footer"> <el-row class="fbox1"> <div> <img src="../../public/images/digiwin/icon/dj_4_1.png"/> <p>产品方案</p> <img src="../../public/images/digiwin/icon/dj_4_2.png"/> <p>预约演示</p> <img src="../../public/images/digiwin/icon/dj_4_3.png"/> <p>价格介绍</p> </div> </el-row> <el-row class="fbox2"> <el-col :span="3"> <div class="fbox2cb"><b>我想了解</b></div> <div class="fbox2ca"><a >什么是ERP</a></div> <div class="fbox2ca"><a >如何选择方案</a></div> <div class="fbox2ca"><a >企业数字化转型</a></div> <div class="fbox2ca"><a >智能制造样板工厂</a></div> </el-col> <el-col :span="3"> <div class="fbox2cb"></div> <div class="fbox2ca1"><a >方案总览</a></div> <div class="fbox2ca1"><a >服务体系</a></div> <div class="fbox2ca1"><a >资料索取</a></div> <div class="fbox2ca1"><a >典范案例</a></div> </el-col> <el-col :span="3"> <div class="fbox2cb"><b>支持与服务</b></div> <div class="fbox2ca"><a >课程活动</a></div> <div class="fbox2ca"><a >DigiwinTV</a></div> <div class="fbox2ca"><a >工业4.0测评</a></div> <div class="fbox2ca"><a >云市场</a></div> </el-col> <el-col :span="3"> <div class="fbox2cb"></div> <div class="fbox2ca1"><a >加入鼎捷</a></div> <div class="fbox2ca1"><a >《赢》期刊</a></div> <div class="fbox2ca1"><a >服务据点</a></div> <div class="fbox2ca1"><a >分支机构</a></div> </el-col> <el-col :span="3"> <div class="fbox2cb"><b>我是伙伴</b></div> <div class="fbox2ca"><a >伙伴支持</a></div> <div class="fbox2ca"><a >覆盖网点</a></div> <div class="fbox2ca"><a >资质查询</a></div> <div class="fbox2ca"><a >伙伴微社区</a></div> </el-col> <el-col :span="4"> <div><p class="fbox2cp">关注与联系我们</p></div> <div class="image-container"> <span> <img src="https://www.digiwin.com/software/digiwinERP/img/foot2_4.png" alt=""> 官方公众号 </span> <span> <img src="https://www.digiwin.com/software/digiwinERP/img/foot2_5.png" alt=""> 官方服务号 </span> </div> </el-col> <el-col :span="3"> <div> <p class="colp">咨询热线</p> <b>400 626 5858</b> <a href="https://www.digiwin.com/contact/eform.html" target="_blank">联系我们</a> </div> </el-col> </el-row> <el-row class="fbox3"> <p> 关注我们 <img src="https://www.digiwin.com/software/digiwinERP/img/foot3_1.png" alt=""> <img src="https://www.digiwin.com/software/digiwinERP/img/foot3_2.png" alt=""> <img src="https://www.digiwin.com/software/digiwinERP/img/foot3_3.png" alt=""> </p> <div> <ul> <li>加入我们</li> <li>投资者关系</li> <li>在线客服</li> <li>法律公告</li> <li>联系我们</li> <li>服务据点</li> <el-select v-model="value" clearable placeholder="Select" style="width: 200px;height: 20px;" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </ul> </div> </el-row> </el-footer> </el-container> </template> <style scoped> .home-footer{ /* background:#f3f3f3; */ padding: 24px 0; width: 15000px; height: 360px; } .fbox1{ /* background:#f3f; */ width: 1230px; height: 40px; margin-bottom: 36.5px; margin-left: 40px; } .fbox1 div{ margin: 0 auto; width: 670px; height: 40px; display: flex; /* 启用 Flexbox 布局 */ justify-content: space-between; /* justify-content用于控制 Flexbox 容器中子元素在主轴（默认是水平方向）上的对齐方式 */ /* space-between 的值表示子元素之间的间隔相等 */ margin-bottom: 24px; } .fbox1 img{ width: 40px; height: 37.5px; } .fbox1 p{ margin: 12px 100px 10px 15px; } .fbox2{ /* background:#f3f; */ width: 1230px; height: 204px; padding: 24px 0; border-top: 2px solid #DDDDDD; border-bottom: 2px solid #DDDDDD; } .fbox2cb{ font-size: 20px; margin-bottom: 15px; height: 26px; padding-left: 15px; } .fbox2ca{ font-size: 16px; margin-top:10px; padding-left: 15px; } .fbox2ca1{ font-size: 16px; margin-top:10px; padding-right: 48px; text-align: center; border-right: 1px solid #DDDDDD; } .fbox2cp{ width: 100%; font-weight: bold; font-size: 16px; margin-top: 0; margin-bottom: 10px; } .image-container { display: flex; justify-content: center; } .image-container img { margin: 0 10px; /* 根据需要调整图片之间的间距 */ } .image-container span { font-size: 15px; text-align: center; } .colp{ font-size: 16px; margin-bottom: 10px; } .colp+b{ font-size: 22px; margin-bottom: 20px; } .colp+b+a{ display: block; background: linear-gradient(-90deg, #3059F9 0%, #59A3F6 100%); /* linear-gradient函数创建了一个线性渐变的背景 -90deg表示渐变方向是从右到左 */ text-align: center; border-radius: 6px; /* border-radius属性用于设置元素边框的圆角 */ color: #fff; padding: 10px 0; margin-top: 18px; text-decoration: none; } .fbox3{ width: 1230px; height: 66px; padding-top:16px; display: flex; justify-content: space-between; max-width: 1200px; } .fbox3 p{ display: flex; } .fbox3 p img{ weight:26.5px; height: 26.5px; margin: 0 7px 0 15px; } .fbox3>div>ul{ display: flex; list-style: none; padding: 0 10px; } .fbox3>div>ul>li{ padding: 0 10px; border-right: 1px solid #999999; font-size: 16px; } </style> <script setup> import { ref } from 'vue' const value = ref('') const options = [ { value: '中国-简体中文', label: '中国-简体中文', }, { value: '台灣-繁體中文', label: '台灣-繁體中文', }, { value: 'Vietnam - Tiếng Việt', label: 'Vietnam - Tiếng Việt', }, ] </script>效果：
2，完成KFC在线点餐页面实现
2.1 头部：
<template> <el-container> <el-header> <h1 class="herh"> <el-icon><DishDot /></el-icon> KFC在线点餐 </h1> </el-header> </el-container> </template> <style scoped> .herh{ font-size: 33px; } </style>效果：
2.2 主体：
<template> <el-container> <el-main > <div class="home-main"></div> <div class="maindv1"> <el-row class="homrow1"> <el-col :span="6" ></el-col> <el-col :span="6" class="homrow1—col1"> <el-icon class="icon-size"><EditPen /></el-icon> <p>请设置昵称</p> <el-icon><ArrowRight /></el-icon> </el-col> <el-col :span="6" class="homrow1—col1"> <div> <el-icon class="icon-sz"><Menu /></el-icon> <p class="text-size">会员码</p> </div> <div> <el-icon class="icon-sz"><WalletFilled /></el-icon> <p class="text-size">卡包</p> </div> <div> <el-icon class="icon-sz"><Checked /></el-icon> <p class="text-size">订单</p> </div> </el-col> <el-col :span="6"></el-col> </el-row> <el-row class="homrow2"> <el-col :span="6"></el-col> <el-col :span="6"> <div class="homrow2dv"> <h2>麒麟门肯德基</h2> <h3>8020181112</h3> <h5>麒麟街道新大街悦民路128号东方红郡商业广场负一楼</h5> <h5>营业时间：06：00-12：30</h5> </div> <div class="homrow2dvp"> <p>早餐</p> <p>K-Music</p> </div> </el-col> <el-col :span="6"> <img src="../../public/images/kfc/md.jpg" alt=""> </el-col> <el-col :span="6"></el-col> </el-row> </div> <div class="maindv2"> <el-button type="danger" class="maindv2_but"> <el-icon style="font-size: 25px;"><KnifeFork /></el-icon> <div> 开始点餐<br/> <span class="maindv2_bsn">Order Now</span> </div> </el-button> </div> </el-main> </el-container> </template> <style scoped> .home-main{ background-image: url("../../public/images/kfc/sy.png"); background-repeat: no-repeat; width: 1500px; height: 450px; } .maindv1{ width: 1200px; height: 250px; /* background-color: aqua; */ margin: 65px 0 35px 0; } .homrow1{ width: 900px; height: 75px; margin: 0 auto; } .homrow1—col1{ display: flex; align-items: center; /* 使图标和文本垂直居中对齐 */ gap: 10px; /* 设置图标和文本之间的间距，可根据需要调整 */ } .icon-size { font-size: 24px; /* 调整图标大小 */ } .icon-sz { font-size: 24px; /* 调整图标大小 */ padding: 0 8px; } .text-size { font-size: 12px; /* 调整图标大小 */ margin: 0; text-align: center; } .homrow2{ width: 900px; height: 150px; margin: 0 auto; } .homrow2dv{ } .homrow2dv>h2{ margin: 0; } .homrow2dv>h3{ margin: 0; } .homrow2dv>h5{ font-size: 12px; margin: 5px 0; color: gray; font-weight: normal; } .homrow2dvp{ display: flex; color: gray; font-size: 12px; } .homrow2dvp P{ padding: 5px; margin: 10px 10px 10px 0; border-radius: 6px; background: rgba(200, 200, 200, 0.5); } .maindv2{ width: 428px; height: 300px; /* background-color: aqua; */ margin-left: 349px; } .maindv2_but{ width: 428px; height: 50px; background-color: red; /* 例如，改为 Tomato 色 */ border-color: red; border-radius: 7px; } .maindv2_bsn{ font-size: 9px; } </style>效果：
3，总结课程中用到的h5标签，查看源码，css样式
3.1 元素的边框属性
3.1.1：border-style：设置边框的样式，如solid（实线）、dotted（点状线）、dashed（虚线）等p { border-style: solid; }3.1.2：
border-width：设置边框的宽度p { border-width: 5px; }3.1.3：
border-color：设置边框的颜色p { border-color: red; }3.1.4：
border：这是一个简写属性，可以在一个声明中设置边框的宽度、样式和颜色border: width style color;3.1.5：
border-radius：设置边框的圆角div { border: 2px solid; border-radius: 25px; }3.1.6：
border-top、border-right、border-bottom、border-left：分别设置上、右、下、左边框的样式、宽度和颜色p { border-top: 2px solid green; border-right: 5px dotted blue; border-bottom: 3px dashed red; border-left: 1px solid black; }3.2 元素的背景属性
3.2.1：
background-color：设置元素的背景颜色div { background-color: #ff0000; /* 红色背景 */ }3.2.2:：
background-image：设置元素的背景图片div { background-image: url('background.jpg'); /* 设置背景图片 */ }3.2.3：
background-repeat：设置背景图片的重复方式，如repeat（重复）、no-repeat（不重复）、repeat-x（水平重复）、repeat-y（垂直重复)div { background-repeat: no-repeat; /* 背景图片不重复 */ }3.2.4：
background-attachment：决定了元素的背景图像是随着页面滚动而滚动，还是固定不动的。这个属性有两个常用的值：scroll和fixed
scroll：背景图像会随着页面的滚动而滚动。这是默认值。
fixed：背景图像会固定在页面上，即使页面滚动，它也不会移动。div { background-image: url('background.jpg'); background-repeat: no-repeat; background-attachment: fixed; }3.2.5
： background-position：设置背景图片的起始位置，可以使用关键字（如top、bottom、left、right）或具体的值（如px、%）div { background-position: right top; /* 背景图片从右上角开始 */ }3.2.6：
background-size：设置背景图片的尺寸，可以使用具体的值（如px、%）或关键字（如cover、contain）
cover: 该关键字会使背景图像覆盖元素的整个背景区域，即使图像需要进行缩放。如果图像的宽高比与元素的宽高比不同，图像可能会被裁剪以适应元素。
contain: 这个关键字会保证背景图像完全适合元素的背景区域，即使这意味着图像两侧可能留有空白。图像不会进行裁剪，但可能会进行缩放。div { background-size: cover; /* 背景图片覆盖整个元素 */ }3.2.7：
background：这是一个简写属性，可以在一个声明中设置所有的背景属性顺序：
color，image，repeat，attachment，position，size
div { background: color，image，repeat，attachment，position，size; }3.3 元素的高、宽属性
3.3.1 使用像素值设置宽度：
div { width: 200px; /* 设置元素宽度为200像素 */ } div { height: 200px; /* 设置元素高度为200像素 */ }3.3.2 使用百分比设置宽度：
div { width: 50%; /* 设置元素宽度为其父元素宽度的50% */ } /* 假设父元素的宽度是400px，那么子元素的宽度将是200px */ div { height: 50%; /* 设置元素高度为其父元素高度的50% */ } /* 假设父元素的高度是400px，那么子元素的高度将是200px */3.3.3 width: auto：
div { width: auto; /* 元素的宽度将根据其内容自动调整 */ } div { height: auto; /* 元素的高度将根据其内容自动调整 */ }3.3.4
max-content和min-content关键字：div { width: max-content; /* 元素的宽度将根据其内容的最大宽度来调整 */ } div { width: min-content; /* 元素的宽度将根据其内容的最小宽度来调整 */ } div { height: max-content; /* 元素的高度将根据其内容的最大宽度来调整 */ } div { height: min-content; /* 元素的高度将根据其内容的最小宽度来调整 */ }3.3.5
fit-content关键字：div { width: fit-content; /* 使元素的尺寸根据其内容自动调整，同时确保内容不会溢出 */ } div { heigh: fit-content; /* 使元素的尺寸根据其内容自动调整，同时确保内容不会溢出 */ }3.3.6 视口宽度单位（vw）：
div { width: 50vw; /* 设置元素宽度为视口宽度的100% */ } /*该元素的宽度就会占据视口宽度的50%。当浏览器窗口宽度变化时，该元素的宽度也会相应地自动调整，保持与视口宽度的比例不变*/ div { height: 100vh; /* 设置元素高度为视口高度的100% */ }3.3.7
calc()函数div { width: calc(100% - 20px); /* 设置元素宽度为其父元素宽度的100%减去20像素 */ } div { height: calc(100% - 20px); /* 设置元素高度为其父元素高度的100%减去20像素 */ }3.4 元素的颜色属性
3.4.1
color：设置文本的颜色p { color: red; /* 设置文本颜色为红色 */ }3.4.2
background-color：设置元素的背景颜色div { background-color: blue; /* 设置背景颜色为蓝色 */ }3.4.3
border-color：设置边框的颜色div { border: 1px solid; border-color: green; /* 设置边框颜色为绿色 */ }3.4.4 使用RGB值：
RGB值由三个数字组成，分别代表红色、绿色和蓝色的强度，范围从0到255
p { color: rgb(255, 0, 0); /* 设置文本颜色为红色，使用RGB值 */ }3.4.5 使用RGBA值（带有透明度）：
div { background-color: rgba(0, 0, 255, 0.5); /* 设置背景颜色为半透明的蓝色 */ }3.4.6 使用十六进制颜色码：
十六进制颜色码由6个十六进制数字组成，分别代表红色、绿色和蓝色的强度。每个数字可以是0到9或A到F（不区分大小写）
p { color: #FF0000; /* 设置文本颜色为红色，使用十六进制颜色码 */ }3.4.7 使用HSL值（色相、饱和度、亮度）：
色相是一个角度值，范围从0到360度，表示颜色的种类；
饱和度是一个百分比值，范围从0%到100%，表示颜色的纯度；
亮度也是一个百分比值，范围从0%到100%，表示颜色的明暗程度。
div { background-color: hsl(120, 100%, 50%); /* 设置背景颜色为绿色，使用HSL值 */ }3.4.8 使用HSLA值（带有透明度）：
div { background-color: hsla(120, 100%, 50%, 0.3); /* 设置背景颜色为半透明的绿色 */ }3.5 元素的文本属性
3.5.1
font-family：设置文本的字体p { font-family: Arial, sans-serif; /* 设置文本字体为Arial，如果Arial不可用，则使用sans-serif字体 */ }3.5.2
font-size：设置文本的大小p { font-size: 16px; /* 设置文本大小为16像素 */ }3.5.3
font-weight：设置文本的粗细p { font-weight: bold; /* 设置文本为粗体 */ }3.5.4
font-style：设置文本的风格normal: 默认值，表示文本使用标准的字体风格，不带任何倾斜效果。
italic: 将文本设置为斜体。使文本呈现为倾斜样式，通常用于强调某些文本或遵循排版规范中的斜体使用规则。
oblique: 与
italic类似，也使文本倾斜，但是oblique可能会让浏览器选择一个比正常倾斜程度稍小的倾斜角度，或者如果字体没有斜体样式，它会人工倾斜标准字体来模拟斜体效果。p { font-style: italic; /* 设置文本为斜体 */ }3.5.5
text-align：设置文本的水平对齐方式left: 文本靠左对齐。这是大多数浏览器的默认对齐方式。
right: 文本靠右对齐。
center: 文本居中对齐。
justify: 文本两端对齐，这意味着文本的左右边缘都会对齐，通常会在单词之间增加或减少空格以达到这一效果。
p { text-align: center; /* 设置文本居中对齐 */ }3.5.6
text-decoration：设置文本的装饰none: 默认值，移除所有文本装饰，如果元素有默认的装饰（如链接的下划线），将会被移除。
underline: 给文本添加下划线
overline: 在文本上方添加一条线
line-through: 给文本添加删除线，常用于表示文本已经被删除或无效。
underline overline: 同时在文本下方和上方添加线条
p { text-decoration: underline; /* 设置文本下划线 */ }3.5.7
text-transform：设置文本的大小写转换none: 默认值，不改变文本的大小写
capitalize: 将每个单词的首字母转换为大写，其余字母小写
uppercase: 将所有字母转换为大写
lowercase: 将所有字母转换为小写
initial: 将属性设置为它的初始值
inherit: 从父元素继承
text-transform属性的值p { text-transform: uppercase; /* 设置文本转换为大写 */ }3.5.8
line-height：设置文本的行高p { line-height: 1.5; /* 设置文本行高为1.5倍 */ }3.5.9
etter-spacing：设置文本字符之间的间距用于增加或减少文本中字符（字母、数字、符号等）之间的间距
长度单位: 如像素（px）、em、rem、点（pt）等，正数表示增加字符间距，负数则减小间距。
normal: 关键字，表示使用浏览器的默认字符间距。
p { letter-spacing: 2px; /* 设置文本字符间距为2像素 */ }3.5.10
word-spacing：设置文本单词之间的间距p { word-spacing: 4px; /* 设置文本单词间距为4像素 */ }3.6 元素的外边距属性
margin：用于设置元素的外边距，即元素与其他元素之间的空白距离
selector { margin-top: length; margin-right: length; margin-bottom: length; margin-left: length; }缩写形式：
selector { margin: top right bottom left; }如果提供一个值，该值将应用于所有四个边
如果提供两个值，第一个值应用于上、下边距，第二个值应用于左右边距
如果提供三个值，第一个值应用于上边距，第二个值应用于左右边距，第三个值应用于下边距
如果提供四个值，依次应用于上、右、下、左边距
3.6 元素的外边距属性
padding：用于设置元素内容与其边框之间的内边距，即元素内容区域与边框的空白距离
selector { padding-top: length; padding-right: length; padding-bottom: length; padding-left: length; }缩写形式：
selector { padding: top right bottom left; }提供一个值时，该值应用于所有四个边。
提供两个值时，第一个值应用于上下边距，第二个值应用于左右边距。
提供三个值时，第一个值应用于上边距，第二个值应用于左右边距，第三个值应用于下边距。
提供四个值时，依次应用于上、右、下、左边距。
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
