前端知识点集合

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 文本超出:省略
文本属性的继承性 继承:父元素的属性对子元素也会产生相同的作用
表单

(palceholder会自动消失的提示文字) 实现单选必须指定name的值是一样的 多行输入框 文本域 重置,清空 提交数据 多选 下拉菜单 背景属性 background-color 背景颜色 background-image:url() 背景图片 background-position 背景位置 background-repeat 背景平铺 background-size 背景图大小 使用了背景固定之后,背景图的位置将相对于浏览器而言 background-attachment:fixed 背景图固定 简单动画效果 鼠标滑过: hover 所有的标签都可以支持 鼠标点击的效果 active 添加过渡 transition:0.3s 旋转 tranform:rotate(360deg) tranform:rotateX/Y(360deg) traform:scale(2)放大 traform:scale(0.2)缩小 同时旋转缩放 tranform:rotate(360deg) scale(2) 阴影 box-shadow: 0 0 5px 5px 左右偏移 上下偏移 模糊程度 阴影面积大小 box-shadow:inset(内阴影)

文字阴影
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
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值