A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 进gege 初级黑马   /  2019-4-10 21:18  /  981 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

咳咳咳,我就不说些没用的了,直接进入正题。下面是这几天的笔记,顺便勉励自己:总结后多练习,理解才是王道。嗯嗯,下面开始了疯狂的粘贴!↓↓↓↓↓↓↓↓↓↓↓
day01----2D转换==============================================================电脑 PC端页面布局(html+css)
移动端布局(html5+css3)
1.新增语义化标签:<hearder>头<nav>导航<article>内容<section>块<aside>侧边栏<footer>尾部(IE9需要转换为块级元素)
2.新增多媒体标签
<audio>音频标签:<audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio>
        1】controls 显示控件
        2】autoplay 自动播放(谷歌禁用)
        3】loop播放完毕后循环播放
        4】不同浏览器支持不同的音频格式,解决办法如下:
        <audio>
                <source src="sonw.mp3" type="audio/mpeg">
                <source src="sonw.ogg" type="audio/ogg">
                您的浏览器不支持audio播放
        </audio>
<video>视频播放:<video src="" controls="controls" autoplay="autoplay" loop="loop" poster =“media/pig.jpg”></video>
        1】controls 显示控件
        2】autoplay 自动播放(谷歌禁用,解决办法:添加禁音属性muted)
        3】loop播放完毕后循环播放
        4】poster 加载时显示的等待图片
        4】不同浏览器支持不同的视频格式,解决办法如下:
        <video>
                <source src="sonw.mp4" type="video/mp4">
                <source src="sonw.ogg" type="video/ogg">
                您的浏览器不支持video播放
        </video>
3.新增表单
新增输入类型type:数字number、手机号tel、搜索search等
新增表单属性:required不能为空、placeholder提示文本(占位符)、autofcous自动获取焦点等、autocomplete显示已填写选项(on、off,一般关闭,须有name值,须成功提交)、multiple(可多选,上传文件时)
4.css3新增属性选择器(disabled属性: 按钮不可点击)
        1】属性选择器,权重10
        2】标签名[属性名] {};属性名-属性的名字【不是值】
        3】标签名[属性名=“值”]
        4】标签名[属性名^="开头"]
        5】标签名[属性名$="结尾"]
        6】标签名[属性名*="包含"]
5.css3结构伪类选择器(从父元素中选择子元素,父元素 与 :之间必须加空格)
        1】E :first-child{};获取第一个标签
        2】E :last-child{};获取最后一个标签
        3】E :nth-child(n);获取第n个标签
                E :nth-child(even);偶数 2n
                E :nth-child(odd);奇数 2n+1
                n+5从第5个开始获取
                -n+5获取前5个
        4】E F:first-child {}; 选择E下面的F元素 与 E的第一个子元素的交集。
        5】E F:first-of-type{}; 选择E下面的第一个F元素。
        同理还有 last-of-type、nth-of-type。
6.伪元素选择器 (E::before {content="";})
        ::before在内容里面【前】插入
        ::after在内容里面【后】插入
        content属性不能省略
7.2D转换 transform
        translate 移动
                1】语法:合写-transform:translate(x,y);分写-translateX:(x);translateY(y);
                2】x,y的值可以是百分比,以盒子自身的宽高来移动
                3】translate对行内元素无效
                4】不影响其他元素的位置
day02----动画================================================================
【2D转换】
1、二维旋转 transform: rotate(45deg)
        1】deg度,正值时顺时针旋转,负值时逆时针旋转;
        2】默认旋转中心点为盒子中心点(相当于transform-origin:50% 50%;)
                1)设置旋转中心点:transform-origin:X Y;
                2)可跟方位名词:transform-origin:left bottom;
2、二维缩放 transform: scale(x,y);
        1】X,Y为数字,不跟单位,2就是2倍;0.5就是缩小50%;
        2】X为宽,Y为高;等比缩放时,可只填写一个数值;
        3】特点:缩放不影响其他盒子,以默认中心点进行缩放,可设置中心点。
3、二维转换综合写法 transform: translate() rotate() scale();
        1】位移要放最前面,位移、旋转、缩放;
【动画】
1、制作动画的步骤
        1】定义动画 (关键词from等同于0%,to等同于100%)
                @keyframes 动画名 {
                        0% {

                        }
                        100% {

                        }               
                }
        2】调用动画
                animation-name: 动画名;
                animation-duration: 持续时间;
2、动画序列
        1】除0%与100%外,还可以添加多个状态(如25%,50%,75%等等)
3、动画常用属性
        1】@keyframes 规定动画
        2】animation  属性简写
        3】animation-name 调用动画 (必须)
        4】animation-duration 动画完成时间 (必须)
        5】animation-timing-function 运动曲线
        6】animation-delay 规定动画何时开始
        7】animation-iteration-count 完成次数,默认是1,还有infinite(无限)
        8】animation-direction 下一周期逆播放,默认是normal,可设置alternate(逆播放)
        9】animation-play-state 默认是running(运行),可设置;aused(暂停)
        10】animation-fill-mode 动画结束后forwards(保持原位置)backwards(回到起始位置)
4、动画属性简写 animation:名称 持续时间 运动曲线 延迟时间 播放次数 倒车 一去不返
animation:myfirst 5s linear 2s infinite alternate;
        【注意】
        1】简写中不包含animation-play-state
        2】animation-play-state:puased;经常与鼠标经过配合使用
        3】想要动画走回来,而不是直接跳回来:animation-direcion:alternate;
        4】动画结束后,停在结束位置:animation-fill-mode:forwards;
        5】opacity 透明度
5、速度曲线的步长属性animation-timing-function:steps(10);
6、同一个元素加多个动画,用逗号“,”隔开;

day03----3D转换==============================================================
【3D转换】
1、三维坐标系
        1】X轴,水平方向,右正,左负;
        2】Y轴,垂直方向,下正,上负;
        3】Z轴,垂直屏幕,外正,内负;
2、3D位移
        1】X,Y,Z可分写,如:transform: translateX(100px);
        2】第二种写法:transform: translateX(100px) translateY(100px) translateZ(100px);
        3】简写:transform: translate3d(x,y,z);
                【注意】其中d为小写,并且xyz不能省略,没有就写0
3、透视perspective
        1】写到被观察元素的父级元素上(不一定是父亲)
        perspective: 1000px; 1000px为视距,近大远小;
        2】值的单位为px;
        3】有透视才能开启3D空间
4、3D旋转 rotate3d
        1】语法:
                transform:rotateX(45deg);
                transform:rotateY(45deg);
                transform:rotateZ(45deg);
                transform:rotate3d(x,y,z,deg);--了解
                        如:transform:rotate3d(1,1,0,180deg);对角旋转
        2】左手准则,大拇指指向该轴的正方向,其余手指弯曲的方向为旋转正方向;
5、3D呈现 transform-style
        1】子元素默认不开启3D立体空间,
                transform-style:flat;默认;
                transform-style:preserve-3d; 开启3D立体环境;
        2】该属性加给父盒子;
6、浏览器私有前缀
        1】-moz-                火狐
        2】-ms-                IE
        3】-webkit-        safari、chrome
        4】-o-                Opera
        提倡写法:
        -webkit-border-radius: 30px 10px;
        -moz-border-radius: 30px 10px;
        -ms-border-radius: 30px 10px;
          // border-radius 一定要放在最后
        border-radius: 30px 10px;

day04----流式布局=============================================================
1、视口(了解)
        1】布局视口
        2】视觉视口
        3】理想视口
2、视口标签(理解含义)
        <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
3、物理像素:分辨率
        1】物理像素比
4、二倍图
        1】制作图片时制作倍图,显示的时候缩小显示
        2】背景图缩放
        background-size: width height;
                1)只写宽度,等比缩放;可写百分比-相对父盒子
                2)cover 等比缩放,完全覆盖(可能有部分显示不全)
                3)contain 等比缩放,宽/高铺满盒子将不再拉伸(可能有部分空白区域)
5、技术选型
        1】单独制作移动端
        2】做响应式页面
6、移动端技术解决方案
        1】移动端初始化CSS(normalize.css)
        2】兼容性问题 -webkit-
        3】清除手机浏览器默认特殊样式
------------------------------------------------------------------------------------------------
        /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
            * {-webkit-tap-highlight-color: transparent;}
            /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
            input {-webkit-appearance: none;}
            /*禁用长按页面时的弹出菜单*/
            img,a { -webkit-touch-callout: none; }
------------------------------------------------------------------------------------------------
        4】使用CSS3盒模型
7、CSS3盒模型(box-sizing: border-box;)
        1】内边距,边框不影响盒子大小。
        2】PC端一般用传统盒模型(box-sizing: content-box;) 移动端用CSS3盒模型;
8、布局方式
        1】流式布局(百分比布局)
        2】flex布局
        3】rem布局
        4】bootstarp布局
9、流式布局
        1】布局盒子的宽度设置为百分比;
        2】设置最大与最小值,保护内容
                ①宽度最大/最小值max-width/min-width;
                ②高度最大/最小值max-height/min-height;
10、二倍精灵图
        1】在fireworks 里把图缩小一半;
        2】在代码里设置背景图片并把背景图片缩小一半;

day05----flex布局=============================================================
1、flex布局原理 display: flex;
        通过给父盒子(容器)添加flex属性,来控制子盒子(项目)的位置和排列方式
2、父项常见属性
        1】flex-direction: 设置主轴的方向(排列方向)
                ①flex-direction: row 默认X轴方向为主轴(行),row-reverse翻转(了解)
                ②flex-direction: column 设置Y轴方向为主轴(列),column-reverse翻转(了解)
        2】justify-content: 设置子元素排列方式(对齐:左对齐,右对齐,居中对齐,均匀分布,两边贴边再中间均匀分布)
                ① flex-start;默认,左对齐 ②flex-end; 右对齐;③center居中对齐;④space-around平均分配;⑤space-between两边对齐后,平均分配;
        3】flex-wrap:设置子元素是否换行
                ①nowrap默认不换行②wrap; 换行
        4】align-items:设置【单行】子元素侧轴对齐方式
                ①flex-start②flex-end③center④stretch(拉伸)
        5】align-content:设置【多行】子元素侧轴对齐方式
                ①flex-start②flex-end③center④space-around⑤space-between⑥stretch(高度平分父元素高度)
        6】简写flex-flow: 主轴方向 是否换行;
                如:flex-flow: column wrap;
3、子项常见属性(子项大小)
        1】flex: 份数;
                分配【剩余空间】的份数,如:flex:1;总份数为所有元素flex值之和,如果没有设置flex,默认是0;
        2】align-self: 控制自己在侧轴上的排列对齐方式;
                ①flex-start②flex-end③center
        3】order:数值;
                默认是0,可设负值,越小越靠前
4、弹性盒子布局步骤:
        1】给父盒子添加display: flex;
        2】确定主轴方向(排列方向)flex-direction:row/column;
        3】确定子元素对齐方式
                ①主轴方向对齐justify-content
                ②侧轴方向对齐align-items(单行)align-content(多行)
        4】确定子元素的大小flex:数值;(加给子元素本身,份数为所有兄弟子元素flex值的总和)

------------拓展------------
①文字阴影:text-shadow;
②背景渐变:background: -webkit-linear-gradient(方位名词,颜色1,颜色2);
------------区分------------
①子元素排列方向和对齐方式
②是给父元素添加样式,还是给子元素添加样式

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马