网页设计是的间隔 第1篇
这里所说的position是指“位置、大小”->“position”，对应html元素的position属性。金蜘蛛网页设计器的“位置、大小”->“position”有6个选项：将position设置为absolute_绝对位置, 将position设置为relative_相对前一元素底部, 将position设置为inherit_继承父元素position, 将position设置为fixed_固定位置, 将position设置为static, 不设置。 其中选项“不设置”则会默认为“将position设置为relative_相对前一元素底部”，“将position设置为fixed_固定位置”和“将position设置为static”一般用在特别情况下。而最常用的就是“将position设置为relative_相对前一元素底部”和“将position设置为absolute_绝对位置”。
使用“将position设置为relative_相对前一元素底部”是最广泛的，也建议大家使用这种类型，好处是这种类型可以非常方便准确确定位置，特别是使用css样式表可以多个HTML元素用一个css样式来统一确定位置。如页面上有10个面板（div）,如果我们要使每个面板之间间隔10px，使用这种类型直接将“内外边距”->“顶边距”设置为10即可。如果是使用“将position设置为absolute_绝对位置”这种类型，还得考虑每个面板的高度，麻烦很多。另外，我们在设计时也可以不必在意控件的顶边距，只设计好“内外边距”->“顶边距”即可。
使用这种类型运行后的实际顶边距的计算，请看上一节的【一、左边距、顶边距与内外边距】->【2.“位置、大小”->“将position设置为relative_相对前一元素底部】。
“将position设置为absolute_绝对位置”一般是小面积内位置确定或控件间位置不规则使用比较方便。
默认情况，金蜘蛛网页设计器创建的控件都是“将position设置为absolute_绝对位置”的，这是因为为了适应刚入门的朋友。如果你已熟悉，建议改为“将position设置为relative_相对前一元素底部”。如当父面板已用“将position设置为relative_相对前一元素底部”，那么在他上面创建的子控件就会继承父的这个类型。
HTML元素水平居中非常常用。如本文档中的图片、主内容面板。一般的电脑显示分辨率都很大，现在基本都1920*1024以上，像本页这种文档的阅读，如果都做成这么大，那么遇到1024*768这种小的分辨率，就需要显示滚动条，另外如果宽度大，人们在阅读就头部转动的幅度就会过大，体验都不好。这样，我们在设计网页，一般主内容面板宽度可以设定为1024px，居中显示即可，如本文档。
是指“常用组件”->“面板”，创建一个容易的移动网页，在这个网页创建一个“常用组件”->“面板”。然后做以下设置：
“对齐方式”设置为“水平居中对齐_运行网页后生效”(设计时不居中，运行后居中)；“位置、大小”->“position”设置为“将position设置为relative_相对前一元素底部”；“颜色”->“颜色”设置为“clblue”，方便测试。如下图：
如上图，面板是我们随意放置的，不是水平居中的，然后点“预览网页”，如下：
如上图，预览后是水平居中的，如果我们改变浏览器的宽度，发现仍然还是水平居中的。
LayUI的面板水平居中很简单，只需要把“面板类型”设置为“容器面板layui—container”即可。
文本框中的文字水平居中也很简单，把其属性“文本属性”->“水平对齐”设置为“Center—居中对齐”即可。一般来说，文字居中是在父容器中居中，这时我们可以把文本框的属性“位置、大小”->“与父的宽度同”和“自动左边距”都设置为“true”。如下图，是在一个面板上创建了文本框，文字水平居中显示：
预览后文字是在面板中居中，效果如下图：
网页设计是的间隔 第2篇
定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。
2. 标准色
颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。
品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。
辅助色用于提示其他场景，比如成功、失败、警告、无效等。
中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。
其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。
3. 标准字
后台系统常用的字体：windows 系统，中文 Microsoft YaHei，英文 Arial；Mac 字体，中文 PingFang SC，英文 Helvetica；除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。
后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。
行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。
4. 图标
图标是 UI 设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。
除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较高效方便的方法是在 iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。
5. 按钮
网页设计是的间隔 第3篇
用不同颜色和样式展示需要关注的信息。
通知提醒
消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭。
10. 缺省状态
绘制不同类型的情感化插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。
页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px。
11. 数据可视化
数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。
功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做得更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。
考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。
网页设计是的间隔 第4篇
据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。
适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。
网页设计是的间隔 第5篇
使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调
网页设计是的间隔 第6篇
栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。
需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。
谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。