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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© yby 中级黑马   /  2019-4-11 13:54  /  905 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

语义化标签
               (1)header  头部标签
                        <header><header/>
               (2)nav 导航标签
                        <nav><nav/>
               (3)article 内容标签
                        <article><article/>
                (4)section 块级标签
                        <section><section/>
                 (5)aside侧边栏标签
                        <aside><aside/>
                 (6)footer 尾部标签
                        <footer><footer/>
audio 音频标签
        语法:(1)<audio src="音频路径" controls="controls"></audio>
                (2)<audio controls="controls">
                                <source src="media/snow.mp3" type="audio/mpeg" />
                                <source src="media/snow.ogg" type="audio/ogg" />
                                    您的浏览器不支持播放声音
                    </audio>
                注:不同浏览器支持的格式不同,解决浏览器兼容问题
                注:谷歌浏览器必须加静音属性,才能实现自动播放
        属性:(1)autoplay="autoplay"
                        如果出现该属性,则音频在就绪后马上播放。
                    (2)controls="controls"
                        如果出现该属性,则向用户显示控件,比如播放按钮。
                    (3)loop="loop"
                        如果出现该属性,则每当音频结束时重新开始播放。
                    (4)preload="preload"
                        如果出现该属性,则音频在页面加载时进行加载,并预备播放。   如果使用 "autoplay",则忽略该属性。
                    (5)src="路径"
                        要播放的音频的 URL。
video 视频标签
        语法:(1)<video src="音频路径" controls="controls"></video>
                (2)<video muted="muted" loop="loop" poster="media/pig.jpg" controls>
                                <source src="media/video.mp4" type="video/mp4" />
                                <source src="media/video.ogg" type="video/ogg" />
                                您的浏览器太low了,不支持播放此视频               
                </video>
                注:不同浏览器支持的格式不同,解决浏览器兼容问题
                注:谷歌浏览器必须加静音属性,才能实现自动播放
        属性:
                (1)autoplay=“autoplay”
                        视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
                (2)controls=“controls”
                        向用户显示播放控件
                (3)loop=“loop”
                        播放完是否继续播放该视频,循环播放
                (4)muted=“muted”
                        静音播放
                (5)preload=“auto”(预先加载视频)
                         preload=“none”(不预先加载视频)
                        规定是否预加载视频(如果有了autoplay   就忽略该属性)
                (6)poster="文件路径"
                        加载等待的画面图片
新增input表单
        语法:<input type="输入类型">
        输入类型:(1)type="email"
                        限制用户输入必须为Email类型
                (2)type="url"
                        限制用户输入必须为URL类型
                (3)type="date"
                        限制用户输入必须为日期类型
                (4)type="time"
                       

限制用户输入必须为时间类型

                (5)type="month"
                        限制用户输入必须为月类型
                (6)type="week"
                        限制用户输入必须为周类型
                (7)type="number"
                        限制用户输入必须为数字类型
                (8)type="tel"
                        手机号码
                (9)type="search"
                        搜索框
                (10)type="color"
                        生成一个颜色选择表单
        表单属性:(1)required


=“required



                        表单拥有该属性表示其内容不能为空,必填
                (2)placeholder="提示文字"
                        表单的提示信息,存在默认值将不显示
                (3)autofocus=“autofocus”
                        输入光标自动聚焦到指定输入框
                (4)autocomplete=”on “ (默认)打开
                         autocomplete =”off”  关闭
                        当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中曾经已填写的选项
                (5)disabled="disibled"
                        使按钮不能点击
属性选择器
                语法:(1)div[att]   选择具有att属性的div元素
                          (2)div[class="val"]   选择具有class属性且属性值等于val的div元素
                          (3)div[class^="val"]  匹配具有class属性,且属性值为val开头div元素
                          (4)div[class$=''val'']   匹配具有class属性,且属性值为val结尾div元素
                          (5)div[class*=''val'']  匹配具有class属性,且属性值中含有val结尾div元素
结构伪类选择器
        语法:(1) ul li:first-child
                        选择ul里第一个li
                (2)ul li:last-child
                        选择ul里最后一个li
                (3)ul li:nth-child(6)
                        选择ul里第6个li
                     ul li:nth-child(even)
                        选择ul里偶数的li标签
                     ul li:nth-child(odd)
                        选择ul里奇数的li标签
                     ul li:nth-child(2n)
                        选择ul里2*n的li标签,也可以(3n)(4n)....   n从0开始计算,2n相当于选择偶数
                     ul li:nth-child(n+5)
                        选择ul里从第5个开始后的所有li,包含第五个
                     ul li:nth-child(-n+5)
                        选择ul里第5个li前的所有li,包含第五个
                注::nth-child(n) 选择父元素里的第n个孩子,不管是否是同一种类型
                (4)div span:first-of-type
                        选择div里第一个span
                 (5)div span:last-of-type
                        选择div里最后一个span
                  (6)div span:nth-of-type(2)
                        选择div里第2个span,也可以(3)(4)......
伪元素选择器
        语法:(1)div::before {content:"内容"}
                        在div里的内容前添加一个内容
                  (2)div::after {content:"内容"}
                        在div里的内容后添加一个内容
                注:1.必须有content属性,但可以为空内容
                       2.before和after会创建一个行内元素,可以通过display转为行内块

二。2D转换(变换)transform(移动,旋转,缩放)
        (移动)语法:(1)transform:translate(x,y)
                        连写
                  (2)transform:translateX(100px)
                        向x轴移动100px,X为大写
                  (3)transform:translateY(100px)
                        向y轴移动100px,Y为大写
              注:1.X,Y为大写
                     2.translate类似定位,不会影响到其他元素的位置
                     3.transform:translateX(50%),表示向x轴移动自身宽度的一半
                     4.对行内标签没有效果

        让盒子垂直居中,水平居中
                   (1)transform:translate(-50%,-50%)
             注:同样要使用子绝父相


        (旋转)语法:(1)transform:rotate(度数deg);        顺时针
                       (2)transform:rotate(-度数deg);       逆时针
                注:通常和过渡一起使用
                模拟三角:1.使用伪元素添加一个正方形盒子,给正方形只设置两个边框
                        2.定位到指定位置
                        3.旋转45度


         转换中心点 transform-origin
                语法:(1)transform-origin:left  top;等
                注:1.可以是方位名词
                           (2)transform-origin:x  y;例:transform-origin:50px  50px;
                注:2.可以是像素值
                           (3)transform-origin:0;  只写一个值的时候  第二个值默认为 50%;


        2d缩放 scale
                语法:转换的属性值为 scale(宽的倍数,高的倍数) ;
                          (1)transform-scale(2,2);或transform-scale(2);
                注:修改了宽高为原来的2倍
                          (2)transform-scale(.5,.5);或transform-scale(.5);
                注:缩小了1倍


        2D旋转综合写法
                语法:transform:translate()rotate(度数deg)  scale(.5,.5);
                注:1.顺序.位移,旋转,缩放
                       2.顺序不能变更,有位移及其他属性时,位移必须最前面


动画
        语法: /* 我们想页面一打开,一个盒子就从左边走到右边 */
                        /* 1. 定义动画 */        
                        @keyframes 名称 {
                            /* 开始状态 */
                                    0% {
                                        transform: translateX(0px);
                                    }
                            /* 结束状态 */
                                    100% {
                                transform: translateX(1000px);
                                    }
                        }
                 div {
                                    width: 200px;
                                    height: 200px;
                                    background-color: pink;
                                    /* 2. 调用(使用)动画 */
                                    /* 动画名称 */
                                    animation-name: 名称;
                                    /* 持续时间 */
                                    animation-duration: 2s;
                        }
                注:必须属性:动画名称,动画执行时间


        常用属性:1. 动画名
   设置要使用的动画名 animation-name:xxx;
               
2. 持续时间
   设置动画播放的持续时间  animation-duration:3s

                3. 速度曲线
   和设置过渡的速度曲线一样 animation-timing-function:linear;
  
                          linear: 匀速
  
                          ease: 慢-快-慢   (逐渐慢下来)  默认值
  
                          ease-in: 慢-快。
  (加速)
                          ease-out: 快-慢。(减速)
  
                          ease-in-out: 慢-快-慢。(先加速后减速)
                          steps(2)  设置分几步完成动画效果
               
4. 延迟时间
   animation-delay: 0s; 默认是0
               
5. 循环次数
   设置动画播放的循环次数  animation-iteration-count: 2;
                         infinite 为无限循环

                6. 循环方向
   animation-direction
:normal;  
                        1. normal  默认值 ,正向运行
   
                        2. reverse 反向运行
   
                        3. alternate  正-反-正...
  (倒车)
                        4. alternate-reverse  反-正-反..   
   
                        5. 以上与循环次数有关
               
7. 动画结束状态:
   animation-fill-mode 设置动画在等待或者结束的时候的状态
   
                         forwards:动画结束后,元素样式停留在 100% 的样式
   
                         backwards: 在延迟等待的时间内,元素样式停留在 0% 的样式
   (默认)
                         both: 同时设置了 forwards和backwards两个属性值
                        注:有了无限播放就不要结束状态
               
8. 暂停和播放
   animation-play-state  控制 播放 还是 暂停
  
                        running 播放   
                        paused 暂停

                        注:一般鼠标悬停(hover)时使用此属性


        动画简写
                语法:animation:动画名称  持续时间  运动曲线  何时开始  播放次数  是否反方向  动画起始或结束的状态;
                animation: name   duration   timing-function   delay   iteration-count   direction   fill-mode;
                注:1.前两个属性必须写,暂停动画不在简写里
                      2.给同一个盒子加两个动画,中间用逗号隔开animation: name   duration,name   duration;


3D transform:translate3d
        语法:
        移动:

1. transform:translate3d(x,y,z)  其中 x y z 分别指要移动的轴的方向的距离
(简写)
                   2. translform:translateX(100px)  仅仅是移动在x轴上移动

                           3. translform:translateY(100px)  仅仅是移动在Y轴上移动

                           4. translform:translateZ(100px)  仅仅是移动在Z轴上移动  
(一般用px为单位)
                注:1.xyz不能省略,没有的用0表示
                      2.z轴是垂直屏幕的方向,到眼睛的方向是正值


        旋转:1. transform:rotateX(45deg); 沿着x轴正方向旋转 45度
                 2. transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
                3. transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
                4. transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度  了解即可
                注:1.x轴旋转时正值为往后倒,负值往前倒。(耍单杠)
                       2.y轴旋转时正值为往右转,负值往左转。(钢管舞)
                       3.z轴旋转时正值为往右转,负值往左转。(抽奖转盘)


         透视 perspertive:100px;
                注:1.给需要呈现3d效果的父盒子添加这个值
                       2.使用3d时必须设置这个值


        3d呈现  transform-style
                transform-style: flat;  平面模式,不开启3维立体环境
               
transform-style: preserve-3d;  3维立体环境
                注: 代码写给父级,但是影响的是子盒子


过渡transition
        语法:1.transition-duration   定义过渡效果花费的时间。默认是 0。
                  2.transition-property   规定应用过渡的 CSS 属性的名称。
                 3.transition-timing-function   规定过渡效果的时间曲线。默认是 "ease"。
                 4.transition-delay    规定过渡效果何时开始。默认是 0。
                简写:transition: 要过渡的属性  花费时间  运动曲线  何时开始;  
                例:transition: all (全部属性) 1s(运动完成所需时间)  linear(匀速)  1s(延迟1秒运动);
                        常用:transition: all 1s;
       
        属性值:运动曲线:    linear: 匀速
  
                          ease: 慢-快-慢   (逐渐慢下来)  默认值
  
                          ease-in: 慢-快。
  (加速)
                          ease-out: 快-慢。(减速)
  
                          ease-in-out: 慢-快-慢。(先加速后减速)



旋转木马案例
        注:1.先放6张图片在同一位置,每张图片沿y轴转60度,依次度数变大60度,并沿z轴前移300px。


css3兼容处理
        - 谷歌 -webkit
-
        火狐 -moz
-
        IE -ms
-
        欧朋-o-
        注:如对 border-radius 进行兼容性处理   

         
        -webkit-border-radius: 30px 10px;
         
        -moz-border-radius: 30px 10px;
         
        -ms-border-radius: 30px 10px;
              
         border-radius 一定要放在最后
         
         border-radius: 30px 10px;

如果发现添加前缀也解决不了兼容性问题,那么就不要使用该css3属性

三。 理想视口 ideal viewport
        语法:<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
         属性:1.

背景缩放background-size
        语法: background-size: 图片的宽度 图片的高度;
             注:1.background-size: 500px; 只写一个参数 肯定是宽度 高度省略了  会等比例缩放
                    2.background-size: 50%;  里面的单位可以跟%  相对于父盒子来说的
                         3. background-size: cover;   cover 等比例拉伸 要完全覆盖div盒子  可能有部分背景图片显示不全
                    4. background-size: contain;  高度和宽度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能有部分空白区域

CSS3盒子模型box-sizin
        语法:box-sizing: border-box;   
          注:1.移动端使用,加到盒子的css中去
                 2.好处:padding和border不会撑大盒子,设置百分比时会将边框和外边距也算在内

移动端特殊样式
         /*CSS3盒子模型*/
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
            -webkit-tap-highlight-color: transparent;
            /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
            -webkit-appearance: none;
            /*禁用长按页面时的弹出菜单*/
            img,a { -webkit-touch-callout: none; }
        /*禁用横向滚动条*/
         overflow-x: hidden;




移动端常见布局(注:固定的盒子必须有宽度)
1. 流式布局(百分比布局)
        语法:width:100%;    100%代表为浏览器显示的宽度
           注:max-width   最大宽度 (max-height  最大高度)  
                  min-width    最小宽度 (min-height  最小高度)
                设置浏览器拉伸时最大和最小的显示宽度和高度,也就是让他不能无限放大或缩小


2. flex 弹性布局(强烈推荐)
                语法:display:flex;(必须添加这个属性才能设置其他属性)
                注:给父元素添加display:flex;属性来控制子盒子的位置和排列方式。

   父项常见属性
             1. 设置主轴的方向:
                 语法:flex-direction:;
                   属性值:1.flex-direction: row; (默认,从左往右)
                        2.flex-direction:row-reverse ;(从右到左)
                        3.flex-direction: column; (从上到下)
                        4.flex-direction:column-reverse;(从下到上)
                注:1.水平轴的默认方向是:水平向右,

垂直轴的默认方向是:垂直向下

                       2.设置父盒子内子盒子的排列方式,加给父盒子。

             2.设置子盒子在主轴上的排列方式(也就是让盒子在大盒子里居中,靠下,还是靠上)
                语法:justify-content:flex-start;
                属性值:1.justify-content:flex-start; (默认,从头部开始,主轴是x轴则从左到右,主轴是y轴则从上到下)
                        2.justify-content: flex-end;(从尾部开始排列)
                        3.justify-content: center;(在主轴上居中)
                        4. justify-content: space-around;(平分剩余空间)
                        5.justify-content: space-between;(两边的子元素贴边,中间的平分剩下的空间)
                注:1.要注意主轴的方向。

            3.设置是否换行(设置子盒子满了是否换行)
                语法:flex-wrap:nowrap;(默认,不换行)
                属性值:1.flex-wrap:nowrap;(默认,不换行)
                        2.flex-wrap:wrap; (换行)
                注:默认子元素不会换行,显示不下时会改变子盒子的大小

            4.设置侧轴上的子元素排列方式(单行 )y轴
                语法:align-items:  ;
                属性值:flex-start 从头部开始

                             flex-end 从尾部开始

                             center 居中显示

                             stretch 拉伸

                注:1.拉伸时需要没有高度。
                       2.子盒子只有单行时使用。

            5.设置侧轴上的子元素的排列方式(多行)y轴
                语法:align-content:;
                属性值:flex-start (默认,在侧轴的头部开始排列)
                        center(在侧轴中间显示)
                        space-between(在侧轴两边的子元素贴边,中间的平分剩下的空间)
                        space-around(在侧轴平分剩余空间)
                        flex-end(在侧轴尾部开始排列)
                        stretch(设置侧轴上子盒子平分父盒子的高度)
                注:1.仅限子盒子有换行(多行)时使用


             小简写: flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
                语法:flex-flow:row wrap;  
                        flex-flow:主轴方向    是否换行;

   子项常见属性
            1.   flex 属性(放大当前元素的宽度,用来设置某个盒子占剩余空间的比例值)
                语法:flex: 0;(默认值0)
                          flex:20%;
             注:1.谁设置了谁就占。
                2.不能直接设置0,可以不写。
                3.可以写百分比,相对于父亲的宽度。


            2.控制子项自己在侧轴上的排列方式
                语法:align-self:;
                属性值:flex-start 从头部开始

                             flex-end 从尾部开始

                             center 居中显示

             注:1.控制某一个子盒子的排列顺序
                2.相当于某一个子盒子需要单独设置排列位置时使用(靠上,靠下,居中......)
       
            3.order 属性定义盒子的排列顺序(相当于第3个可以变到第一个)
                语法:order: 0; (默认是0,负值小)
            注:越小越靠前。值为负




背景线性渐变
        语法:background: linear-gradient(起始方向,?颜色1,?颜色2, ...);
                  background: -webkit-linear-gradient(left, red , blue);(从左往右)
                  background: -webkit-linear-gradient(left top, red , blue);(左上往右下)
        注:1.背景渐变必须添加浏览器私有前缀
               2.起始方向可以是: 方位名词  或者 度数 , 如果省略默认就是 top


3.
less+rem+媒体查询布局
            1.媒体查询语法规范
                语法: @media screen(查询类型) and(关键词) (max-width: 800px)(媒体特性:小于等于800时) {
                                    body {
                                        background-color: pink;
                                            }
                                }
                注:1. 这句话的意思就是: 在我们屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式
                        2.从小往大写或从大往小写
               
            查询类型
                属性值:1.all(用于所有设备)
                        2.print (用于打印机和打印预览)
                        *3.scree (用于电脑屏幕,平板电脑,手机等)

           关键词
                属性值:*1.and:可以将多个媒体特性连接到一起,相当于“且”的意思。
                        2.not:排除某个媒体类型,相当于“非”的意思,可以省略。
                        3.only:指定某个特定的媒体类型,可以省略。

          媒体特性
                属性值:1.width :定义输出设备中页面可见区域的宽度
                        2.min-width :定义输出设备中页面最小可见区域的宽度(大于设定的值时改变样式)
                        3.max-width :定义输出设备中页面最大可见区域的宽度(小于设定的值时改变样式)
               
       
混合布局

0 个回复

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