搭建一个网页添加一个按钮调用后台python脚本 网页设计添加按钮

网页基本元素-按钮打造

• 按钮分类
  平面类、体积类、光感类、凹面类
• 按钮特点

1. 有区别于背景的外框
2. 有对应的文字/图标
3. 按钮的本质特点就是可以点击

• 按钮规范

4. 按钮大小根据文字大小确定，文字大小一般为18~24px
5. 文字大小一般为按钮高度的一半，左右边距大于上下边距
6. 文字字体只能用宋体和雅黑，14Px以下用宋体，14px以上用雅黑（按钮一般用雅黑）
7. 形状多为圆角矩形，圆角半径一般用3~10PX，5PX最为常用

平面类

体积类

1. 输入“我是按钮”大小24px,字体微软雅黑
2. 绘制形状，圆角半径5px的圆角矩形
3. 改颜色为渐变(使用图层样式中渐变叠加)，上浅下深，再确定
4. 描边为1px，内部，描边颜色为渐变，角度90度，颜色比填色更深
5. 内阴影，白色叠加（添加高光），距离2px,大小0，不透明度20~30%

女性化按钮

1. 形状为最大半径圆角矩形，文字24px，雅黑
2. 颜色改为红色渐变，描边1px，内部，渐变比填色略深
3. 内阴影，白色叠加，距离10PX，大小10PX，不透明度50%

光效类按钮

1.在体积类基础上，新建图层

2.选择白色的前景色，回绘制白色到透明的径向渐变，大小改为按钮的2/3（宽度一致，高度2/3）

3.用矩形选框选到中间一半的位置，删除，向下移动一像素，反选（ctrl+shift+I）,用50%的橡皮擦擦除

4，改模式为叠加，放到最上边向下1px的位置，复制一个放到底下作为反光，调整不透明度（50%左右）

光效2

1. 在光效1的基础上，新建图层，选择矩形选框绘制按钮的一半
2. 做白色到透明的线性渐变，方向从下到上，向上移动1px，50%的橡皮擦擦除
3. 改图层混合模式为叠加，透明度为20%左右，用橡皮擦擦除边缘

投影效果

1. 新建图层，载入按钮的选区（ctrl+鼠标左键），羽化（shift+f6）3px,填充黑色
2. 改大小和按钮一致，改羽化属性栏为2px,用椭圆选区选中黑色投影进行删除
3. 把投影效果放到按钮下层

凹面类按钮

1. 绘制形状，颜色和附近的颜色一致，改混合模式为正片叠底
2. 内阴影打造凹下去的效果，选中距离为1px,大小为3px
3. 投影打造高光，距离为1px,大小为0,白色叠加

文字渐变

1. 图层样式渐变叠加，混合模式为正常或正片叠底，颜色为背景色到白色
2. 投影距离为3px,大小为3px

文字投影

颜色设置为背景色加深

网页小板块

• 内容区：宋体 12/14px 样式 无 非网页(18px以上锐利 / 以下平滑)
• 行距: 12px宋体行距一般为16~30px，以20px最为常见.一般设为字体大小的两倍
• 标题区:雅黑 14px~24px 锐利
• 方向键：每次移动1px，Shift+方向键每次移动10px 确定向下距离时，可以通过画形状来解决

登录框

1. 边框不使用描边设置，使用图层样式中的投影打造，距离设置为0时四周都有投影，大小设置为10px
2. 按照按钮的做法打造特效
3. 颜色选择：#000,#333，#666，#999，#ccc,#fff色彩依次变浅
   突出部分用#333，不突出用#666

标题,正文#333，正文不需要突出的#666，装饰性的#999，分隔线#ccc
同时修改多组文字颜色，选中文字后shift加选，选择完成后T选择文字工具，选择颜色，进行修改

4. 登录按钮一般为绿色，绿色偏黄