PS的基本应用
1、新建画布 注意 ： 单位是像素 PX
放大和缩小 alt + 滚轮
2、拖动画布 按住空格，然后移动画布
3、缩放内容 ctrl + t
4、矩形工具
修改颜色吸管
修改大小 ctrl+t 直接修改宽高的数据
5、单位 ctrl + k 把单位与标尺 标尺和文字
6、图层链接–相当于绑定在一起 不要合并！！！！！
7、复制 ctrl + j
8、建组 ctrl + g
1、圆角矩形 圆角半径的测量
2、蚂蚁线工具 测量宽高 宽口 —信息 出现我的信息
3、创建剪贴蒙版
4、智能对象改变颜色 锁定透明像素
5、切图！！！！！！！！！！！！！！！
切片工具
切图不要出现多余的部分
切完所有的图
存储为WEB所用格式
选择压缩品质的jpg格式
保存所有用户切片
1、网站开发流程
域名 服务器 开发 推广 维护
2、 web标准:结构（HTML）+表现（css）+行为（JS）
3、相关的组织
w3c HTML+CSS语法基础
ECMA JS的语法基础
4、HTML 超文本标记语言 hyper text markup langue
5、xhtml 可扩展性的超文本标记语言 语法更加严格
6、网页基本模板
声明文档类型
html
head
title
meta
body
7、单词
document type
type 类型
head 头
body 身体
title 标题
set 设置
char 字符
a
href=”跳转地址”
Target=”_blank/_self”
Title=”鼠标悬停显示”
Img
绝对路径和相对路径
src=”路径”
alt=”图片加载显示失败”-----对搜索 引擎很友好
title=”鼠标悬停显示“
表格
table
tr
td
属性
border 边框
bordercolor 边框颜色
width 宽度
height 高度
align=”center“ 水平居中
cellspacing 外边距
cellpadding 内边距
表格合并
Colspan 合并列
Rowspan 合并行
**
1、div —无意义，使用组多，独占一行
2、css
创建方式 在头部 < style>
找对象
直接写标签的名字 div {}
写类名 class .类名{}
类名可以重复写
css 常用属性
宽度 width
高度 height
背景颜色 background-color
文字颜色 color
浮动 float：left/right 为了实现左右排列
网页外围结构
外边距 margin left/right/top/bottom
（盒子外面的边距， 相对概念）
内边距 padding
Margin 属性
颜色的表示方式
导航边框效果
Margin
Border
Solid 实线
Dashed 虚线
文本属性
字体颜色 color
字体大小 font-size
文字水平居中 text-align：center
网页默认字体大小16px
谷歌最小8px
0不显示
text-decoration:underline 下划线
text-decoration:overline 上划线
text-decoration:line-through 删除线
text-indent:2em 缩进2格文字字 首行缩进（默认，可为负）
letter-spacing: 字间距（可为负）
line-height:和高度相等 垂直居中 可以不加单位
文字文字垂直居中 line-height：height 行高（行高设定为高度）
字体：font-family
font-weight:bold/normal
font-style:italic
font-align:justify
文字水平居中 text-align：center
文字垂直居中 line-height：height 行高（行高设定为高度）
超出省略
white-sapce： nowarp 强制不换行
overflow：hidden 超出剪切
text -overflow:ellipix 文本超出：省略
文本属性的继承性 继承：父元素的属性对子元素也会产生相同的作用
表单
文字阴影
text-shadow:5px 5px 5px color;
CSS引入方式
a.行内样式表
b.内部样式表
c.外部样式表引入 link
d.外部样式表导入 import
link 可以呗JS控制 与页面同时加载 无兼容问题 HTML 范畴
import 不能被JS控制 等页面加载完成后加载（页面闪烁） 有兼容问题
选择器权重
标签选择器 1
类选择器 10
伪类选择器 10
ID 选择器 100
样式表的权重 1000
！important 权重最高
内部样式与外部样式依据加载顺序，后面的权重更高
三角形 宽高为 0 transparent 透明色
块级元素 div dl ol ul p h1-h6
独占一行 ，自上而下顺序排列
一般作为父元素
可以支持宽高
行内元素 --内联元素 span a u em strong
左右顺序排列
不支持宽高
支持左右margin和paddign，不支持上下margin
上下的padding不占位置，
内联块级元素 img input
img{
vertical-align:top;
(左右是由代码换行产生的BUG)
1 注释法 alt + shit +a
2 直接加浮动
3 父元素加font-size:0
}
inherit 继承父元素
单标签
br hr img input meta
双标签
del strong u
块级标签 – 独占一行
div dl/ol/ul p h1-h6 form
form action=“提交的地方” method=“get/post”
input
按钮 button reset submit
行内标签 --一行显示多个
a
img
span
del u sub sup strong
标签嵌套规则
CSS
css3 层叠样式表
css创建方式
行内样式
内部样式
选择器{
属性：属性值；
属性：属性值
}
选择器
* 通配符选择器
div 类选择器
.a 类选择器
#b id选择器 —唯一性
.a img 后代选择器（包含选择器）
属性
布局属性
width
height
float
margin
文本属性
color
text-align
line-height
font-size
font-family
font-style
font-weight
font-indent
text-decoration
letter-spacing
font-style
背景属性
background-color
background-image
background-repeat
background-position
background-attachment 背景固定
background-size css3
问题补充
img和背景图的区别
图片经常更换 img
不会经常更换的小图标 背景图
img 可以直接显示
背景图一定要写宽高
列表属性
list-style:none
list-style-type
list-style-img
list-style-position
vertical-align:top
定位
漂浮于网页上的盒子使用定位
固定定位 fixed
头部 width:100%(left:0,right:0) top:0
返回顶部 右下角
铺满浏览器
width:100%;height:100%;position:fixed;
left:0; right:0;🔝0;bottom:0;position:fixed;
(使用定位，宽度会被内容撑开)
中间的小广告—确定宽高
left:50%;top:50%;margin-top:负高度一半
margin-left:负宽度一半
right:0;🔝0;bottom:0;position:fixed;
margin:auto;
position:fixed 固定定位（固定在浏览器中）
辅助属性 right left bottom top z-index
垂直居中 1、 top:50%
left:50%
margin-top:-一半
margin-left:-一半
2、 margin:auto
top left right bottom:0
圆角4个值：top right bottom left
正圆 border-radius:(50-100%)
圆弧 border-radius:9999px
透明度 opactiy:(0-1)
位移 transform:translateX/Y( px)
(位移)
返回顶部 返回顶部
rgba(,)半透明度
绝对定位
li:nth-child()
浏览器内核
Rrident :IE 不开源
gecko：Mozilla firefox开源跨平台
weikit:chrome safari
presto: opera 欧朋
blink：欧朋和谷歌共同开发
a{
opacity:0.5;
filter:alpha(opacity=50)
transition:1s;
-o-transition:1s; 欧朋
-webkit-transition;1s;谷歌
-moz-transition:1s; 火狐
-ms-transition:1s IE
}
鼠标设置手型 cursor:pointer
position:sticky 黏性定位
相对定位 单独使用
占位置，没有文档流
单独可以使用辅助属性
根据自身位置变化
偏移不占位置，永远只保留原来的位置
position:不定位
参照物的理解
固定定位永远参照浏览器
绝对定位参照物是祖先元素
display:none 看不见，不保留位置
visibility:hidden 看不见，保留位置
visibility:visible
opacity :0 透明，保留位置
一屏网页
html,body{
height:100%
}
width:100%;
height:100%;
/position:fixed;/
display:none/block 不占位置，不支持动画
visibility:hidden/visible 占位置 支持动画时间
opcaity:0/1;fiter:alpha(100)占位置支持动画
height:0 overflow:hidden; 支持动画
定位把盒子移到外面，然后给父元素加overflow:hidden
!!实现显隐必须写父子级关系
字体图标
<i class=”iocnfont icon-xxx”>
css 图片整合技术
优点
减少图片体积
减少服务器请求次数
缺点
不利于网站维护
实现核心
利用背景位置background-position
浮动特点
顺序排列
飘出文档流半层
清除浮动带来的影响–父元素高度塌陷
1、浮动元素后加一个空的div ，写clear:both
缺点：代码冗余
2、直接在父元素加高度
3、在父元素加overflow：hidden
缺点：无法实现二级菜单效果–超出部分无法实现
4、当父元素也浮动的时候
缺点:带来新的浮动问题
5、父元素加display:inline-block
缺点：带来新的问题
6、父元素加position:absolute/fixed
缺点：整个盒子全部不占位置
7、万能清除法
.cl:after{
content:””;
display”block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
.cl{
zoom:1;
}
BFC：
概念：是一个独立的渲染区域–就是一种规则
规则：
上下排列
从左边开始
margin决定垂直方向的距离
子元素不会影响外部元素 margin-top传递问题
BFC不会和付哦对那个发生重叠
在BFC里面，浮动参与高度计算
触发条件：
1 float
2 display:inline-block
3 position:absolute/fixed
4 overflow:hidden
应用：
margin-top 传递问题
清除浮动
锚点：网页快速定位器，实际上就是本页面内的跳转
background-color:rgba()只是背景透明
opacity : 内容和背景透明
让行内元素支持宽高 :
display:block/inline-block
float
absolute/fixed
-----overflow:hidden---------
用法1 ：解决margin-top的传递问题:
子元素的margin-top会把父元素一起带下来
解决方法：
父元素加浮动
父元素加定位
父元素加border-top
父元素加padding-top
父元素加display:inline-block
父元素加overflow:hidden
用法2 ：清除浮动带来的影响–父元素高度塌陷
用法3:显隐动画–超出隐藏
用法4：单行文本超出省略
white-space:nowarp;
overflow-hidden;
text-overflow:hidden;
width:;
输入框光标点进去的时候
input:focus,button:focus{
outline:none
}
763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
