当前位置:   article > 正文

day08

day08

圆角属性

  • .box {

width: 300px;

height: 300px;

background-color: red;

/*

border-radius

四个角可以设置不同的圆角

*/

border-radius: 20px 50px 80px 100px;

padding: 20px;

border: 20px solid #000;

}

.box1 {

width: 300px;

height: 300px;

background-color: blue;

/* border-radius: 50%; 可以使正方形盒子变成正圆形 */

border-radius: 50%;

}

PS基础

PS简介

[Adobe Photoshop,简称“PS”],是由Adobe 开发和发行的[图像处理软件]。

Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编 辑工作。

常用快捷方式

文件

  • 新建 ctrl+n

  • 打开 ctrl + o

  • 关闭 ctrl+w

  • 保存 ctrl+s

  • 另存 ctrl+shift+s

  • 存储为web所用格式 ctrl+alt+shift+s

编缉

  • 变换 ctrl+T

  • 首选项——单位与标尺

图像

  • 图像大小 crlt+alt+i

  • 画布大小 crtl+ alt+c

  • 裁剪

  • 裁切

选择

  • 反选 ctrl+shift+I

  • 取消选择 ctrl+D

视图

  • ctrl+R 标尺

  • 清除参考线

  • 清除切片

窗口

  • 图层F7

  • 信息面板 F8

  • 扩展或功能

常用工具

移动工具

  • 自动选择——图层【分组】

  • 对齐

    • 选中图层——选择对齐方式

选区

  • 新选区

  • 是否羽化(提示0像素,某些同学会出现松开鼠标测量结果 不准确注意此处设置)

  • 固定大小,固定比例

放大镜

  • 放大、缩小画布(默认放大,配合alt缩小)

  • ctrl+加号 ctrl+减号 缩放

  • alt+鼠标滚轮滚动( 向前放大,向后缩小)

抓手工具

  • 移动画布

    • 任何工具下配合空格键(转换为抓手工具)

文字工具

  • 查看文字大小、字体、颜色

  • 复制、粘贴文字

切片工具

右键

编缉切片选

  • 修改位置 x,y,修改大小 w,h

划分切片

  • 右键划分切片(水平、垂直)

存储

  • ctrl+alt+shift+s存储为web所用格式

  • 所有用户切片

项目规范

  • 根据项目名称创建项目文件夹。如:ushop

  • html、css、img、js, 文件均归档至项目名称目录中。

  • HTML 文件、根据页面内容以英文命名,首页或只有一个页面通常命名为index.html

  • css 文件以英文命名,

    • 公用样式通常命名为reset.css(常用的浏览器样式),

    • public.css(多个页面时的公共模块的样式,或多次重复使用字体、字号、间距等样式),

    • 首页通常命名为index.css, 其他页面依实际模块或功能需求命名

  • 图片文件命名尽量与其模块样式名称保持关联,尽量使用小写命名

    • (如登录框的背景与图片:login_bg.jpg、login_user_ico.gif 等)

    • 常用图片格式 gif 、png 、jpg

目录结构参考

---/html/
|---- /user/                    与用户相关的页面  
|---- /user/login.html          登录页
---/css/
|---- /reset.css                 重置浏览器样式    
|---- /page                        其他页面的css
|---- /page/pagename.css         单独某个页面的css
|---- /common.css                  css通用样式库
---/js/
|---- /lib                      公用组件
|---- /lib/jquery.2.2.3.min.js  调用jq库文件 
|---- /page                          其他页面的js
|---- /page/pagename.js         单独书写的js
|---- /common.js                公用方法
---/img/
|---- /page                     其他页面对应的图片
|---- /page/wap                 手机端图片夹
|---- /page/wap/wap_icon.png    手机端图标
|---- /logo.png                 公用图片
​

引入连接需要注意:

第三方的先引入,共通的重置样式表或者公共样式表,最后是自己页面的css

类名命名参考

main 页面主体 tag 标签 msg message 提示信息 tips 小技巧 vote 投票 friendlink友情链接 title 标题 summary 摘要 login_bar 登录条 search_input 搜索输入框 hot 热门热点 search 搜索 search_output 搜索输出和搜索结果相似 search_bar 搜索条 search_results 搜索结果 copyright 版权信息 branding 商标 logo 网站LOGO标志 site_info 网站信息 site_info_legal 法律声明 site_info_credits 信誉 join_us 加入我们 partner 合作伙伴 service 服务 regsiter 注册 arr arrow 箭头 guild 指南 site_map 网站地图 list 列表 home_page 首页 sub_page 二级页面子页面 tool, toolbar 工具条 drop 下拉 dorp_menu 下拉菜单 status 状态 scroll 滚动 tab 标签页 left right center 居左、中、右 news 新闻 download 下载

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/98376
推荐阅读
相关标签
  

闽ICP备14008679号