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 下载