5服务支持：由以下部分构成 5.1顶部有一张高 384px宽 100%的图片，下边距为 23px 5.2常用功能部分:宽 1400px，下外边距 40px，标题下外边距为 20px,字体大小为 28px,文本水平垂直居中字体颜色为#000。内容是 5个子项组成（flex水平对齐，平均分配）每个子项宽 200px高 200px背景色为#cedbf5，子项内容水平垂直对齐，字体大小为 20px，子项内容的图片的盒子背景图大小为 60px不重复。鼠标移入子项时字体颜色变成#fff,背景色为#f08300，放大 1.1倍，内容图片盒子的背景图切换成白色，子项有过渡效果。 5.3投诉建议部分：宽 1200px。标题下外边距为 30px,字体大小为 30px,文本水平垂直居中字体颜色为#000。下面有个小标题，水平垂直居中，内边距为 10px,左右外边距为 20px,字体颜色为#000。小标题高亮：字体颜色为#f08300下边框 1px实线颜色#f08300。内容部分标题的*号是字体颜色红色，其他字体颜色是#767676，上下内边距为 7px,字体大小是 16px。姓名，手机，邮箱，运货单，问题内容的包裹输入框的盒子宽 450px,左右内边距 12px上下内边距 6px，（flex 一行两个水平对齐。背景色为#767676，输入框宽 100%，高100%。输入框下面的提示内边距为上下 15px，左 10px,下外边距 8px,字体大小为 12px。问题内容部分：输入框数文本域，默认 3行文字高度，只能上下拉动不能左右拉动。宽度 100%。最后有两个按钮宽 180px,高 40px，字体颜色为#fff，背景色为#f08300，圆角 20px文本水平垂直对齐两端对齐。

<think>嗯，用户让我介绍一下“5服务支持”的构成，具体分为5.1到5.3部分。看起来这是一个网页或移动端的页面布局设计需求。我需要先理解每个子部分的具体样式要求，然后转化为结构化的HTML和CSS代码，同时确保符合用户给定的样式参数。 首先看5.1部分，顶部图片的高是384px，宽度100%，下边距23px。这个应该是一个简单的img标签或者div背景图，需要注意设置margin-bottom为23px。然后是5.2常用功能部分，宽度1400px，下外边距40px，标题的字体大小28px，下外边距20px。内容有5个子项，使用flex水平对齐，平均分配。每个子项宽高200px，背景色#cedbf5，字体20px，水平和垂直居中。子项内的图片盒子背景图大小60px，不重复。鼠标悬停时，字体颜色变白，背景色#f08300，放大1.1倍，图片背景切换白色，过渡效果。这部分需要用Flex布局，子项应用flex:1，并且处理hover状态的变化，可能需要使用transform: scale，以及图片的background变化。 接下来是5.3投诉建议部分，宽度1200px，标题字体30px，下外边距30px。小标题有内边距10px，左右外边距20px，高亮部分颜色和下边框。内容部分的标题有红色星号，其他文字颜色#767676，输入框宽度450px，flex布局一行两个。输入框背景色#767676，宽度100%，高度100%。提示文字的内外边距需要调整，问题内容部分使用textarea，设置为resize: vertical防止左右拉伸。最后两个按钮样式是宽180px，高40px，背景色#f08300，圆角20px，字体白色。 需要确保所有样式参数正确，比如外边距、内边距、字体大小、颜色等。同时注意HTML结构，比如5.2的子项用flex，5.3的表单部分用flex-wrap来换行。对于输入框的提示文字，可能需要用额外的div或p标签，并设置相应的padding和margin。按钮部分可能需要用flex或text-align来对齐。 还需要考虑响应式设计吗？用户没有提到，所以可能固定宽度。注意各个部分的容器居中，使用margin: 0 auto。另外，图片部分可能需要设置display: block防止底部间隙。 检查是否有遗漏的样式，比如输入框的高度100%是否有效，可能需要设置父容器的height。textarea的rows属性设置为3，resize: vertical。按钮的圆角用border-radius:20px。过渡效果使用transition属性，应用在子项上。 最后，将各部分用中文分步骤说明，确保结构清晰，代码正确，并解释各部分对应的样式。可能需要提醒用户替换图片路径，或者调整某些细节以适应实际项目需求。</think>我将根据您提供的需求，分步骤说明如何实现该服务支持页面布局： 一、顶部图片实现 (5.1) ```html <div class="top-banner"></div> <style> .top-banner { height: 384px; width: 100%; margin-bottom: 23px; background: url('your-image.jpg') no-repeat center/cover; } </style> ``` 二、常用功能模块实现 (5.2) ```html <section class="functions"> <h2>常用功能</h2> <div class="function-items"> <div class="item"> <div class="icon-box"></div> <span>功能名称</span> </div> <!-- 重复5个item --> </div> </section> <style> .functions { width: 1400px; margin: 0 auto 40px; } h2 { font-size: 28px; text-align: center; margin-bottom: 20px; } .function-items { display: flex; justify-content: space-between; } .item { width: 200px; height: 200px; background: #cedbf5; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s; } .icon-box { width: 60px; height: 60px; background: url('icon-normal.png') no-repeat center/contain; } .item:hover { background: #f08300; color: #fff; transform: scale(1.1); } .item:hover .icon-box { background-image: url('icon-white.png'); } </style> ``` 三、投诉建议模块实现 (5.3) ```html <section class="feedback"> <h2>投诉建议</h2> <h3 class="subtitle">请填写您的<span class="highlight">联系方式</span></h3> <form> <div class="form-row"> <div class="input-group"> <label>姓名<span class="required">*</span></label> <input type="text"> <div class="hint">请输入真实姓名</div> </div> <!-- 其他输入项 --> </div> <div class="full-width"> <label>问题描述<span class="required">*</span></label> <textarea rows="3"></textarea> </div> <div class="buttons"> <button type="submit">提交</button> <button type="reset">重置</button> </div> </form> </section> <style> .feedback { width: 1200px; margin: 0 auto; } h2 { font-size: 30px; text-align: center; margin-bottom: 30px; } .subtitle { padding: 10px 20px; text-align: center; } .highlight { color: #f08300; border-bottom: 1px solid #f08300; } .input-group { width: 450px; margin: 7px 0; background: #767676; } input, textarea { width: 100%; padding: 6px 12px; } textarea { resize: vertical; } .required { color: red; } .buttons { display: flex; gap: 20px; justify-content: center; } button { width: 180px; height: 40px; background: #f08300; color: #fff; border-radius: 20px; border: none; } </style> ``` 实现要点说明： 1. 布局容器均使用固定宽度+margin:0 auto实现居中 2. flex布局用于水平排列元素 3. 过渡效果使用transition属性实现 4. 输入框组使用flex-wrap实现自适应换行 5. 必填项星号使用伪元素或单独span标签实现 6. 文本域限制调整方向使用resize: vertical 7. 按钮样式使用border-radius实现圆角 注意事项： 1. 实际使用需替换图片路径 2. 建议添加移动端适配 3. 需要补充表单验证逻辑 4. 可根据实际需求调整间距参数 5. 建议使用CSS变量管理主题色值