圆角属性
-
.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 下载