笔记

最新推荐文章于 2024-07-25 00:55:07 发布

code时穿上裤子

最新推荐文章于 2024-07-25 00:55:07 发布

阅读量504

点赞数 4

分类专栏：学习笔记文章标签： html

本文链接：https://blog.csdn.net/S623669455/article/details/106150603

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

      /* 单行内超出部分省略号显示 */
      div{
        /* 强制一行显示文本 */
        white-space: nowrap;
        /* 超出部分隐藏 */
        overflow: hidden;
        /* 超出部分用省略号代替 */
        text-overflow: ellipsis;
      }

3.同级别标签，用 + 就可以了比如div + p

6.在生成的标签内部写内容可以用{}表示，div{需要写的文本内容}

7.选择同一列多行的内容修改，Alt+Shift 就可以

8.后代选择器:ol li {修改样式}，可以进行修改li里面的所有样式

9.a:link /*选择所有未被访问的链接*/

10. a:visited /*选择所有已被访问的链接*/

11.video标签: src视频位置，autoplay(自动播放)，muted(解决Google禁止自动播放问题)，controls(展示视频控件)，

loop(循环播放)，preload(预先加载视频auto\none)，poster(预加载图片)

11. a:hover /*选择鼠标指针位于其上的链接*/

12. a:active /*选择鼠标按下未弹起的链接*/

https://www.w3school.com.cn/cssref/css_selectors.asp W3C上的一些除外的选择器

13. background:颜色color 图片地址url 背景平铺repeat/no\repeat 图像滚动fixed/scroll 图像位置(x,y)

14.padding:5px(上下左右 ) 5px 5px(上下左右) 5px 5px 5px(上左右下) 5px 5px 5px 5px(上右左下)

15.box-shadow: x轴 y轴模糊程度阴影尺寸阴影颜色 inset(内阴影，只能写或不写);

16.精灵图位置:background-position:px px ;

    <style>
        /*额外标签发,在最后面添加一个空盒子给属性*/
        /*增加空标签*/
        div { clear:both; }

        /*父级元素添加 overflow*/
        /*无法显示溢出部分，溢出隐藏*/
        div { overflow:hidden;}

        /*为父级元素添加after伪元素*/
        .clearflex:after {
        content:"";
        display:block;
        clear:both;
         /*元素不可见*/
        visibility:hidden;
        }
                /* IE6、7专有 */
        .clearfix {
        *zoom:1;
        }

        /*父级添加双伪元素*/
        .clearflex:before,.clearflex:after {
        content:"";
        display:table; }
        .clearflex:after {
        clear:both; }
               /* IE6、7专有 */
        .clearflex { *zoom:1;}
    </style>

relative 相对定位 absolute相对定位 fixed固定定位 sticky粘性定位 z-index:auto(默认);[可调盒子朝上的权重]

1. display 2.visbility 3.overflow

display : none/block 隐藏与显示元素，隐藏元素之前的位置不占有 √

visbility : visible / hidden 隐藏与显示元素，隐藏元素之前的位置保留

overflow : auto / scroll / hidden 需要的时候添加滚动条 / 溢出的部分添加滚动条 / 溢出部分进行显示与隐藏

li {cursor:default(默认) pointer(小手) move(移动) text(文本) not-allowed(禁止)} 鼠标经过标签所显示的状态

vertical-align: top(元素的顶端与行中最高元素的顶端对齐) middle(中线对其) bottom(底线对其，解决行内块元素的下面缝隙)

input {outline: none;} ，解决搜索框点击出现的蓝色框框

    <form action="">
      <input type="search" 
 placeholder="输入关键字"
<!--提交时该表单的内容不能为空-->
      required="required"
<!--展示之前提交成功的搜索结果的记录，同时加上name属性。默认on,可用off关闭-->
 autofocus="on" / >
    </form>

 <style>
      /* 1. 必须是input表单且里面有placeholder属性 */
      input[placeholder] {
        width: 80px;
        height: 30px;
      }
      /* 2. 可以根据不同的属性值尽心选取 */
      input[type='text'] {
        color: pink;
      }
      /* 3.首先选择div 然后选择具有class的属性 并且属性是以 icon 开头的 */
      div[class^='icon'] {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        float: left;
        background-color: blue;
      }
      /* 4.首先选择div 然后选择具有class的属性 并且属性是以 date 结尾的 */
      div[class$='date'] {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        float: left;
        background-color: blue;
      }
      /* 5.首先选择div 然后选择具有class的属性 属性包含 da 元素就会选取出来 */
      div[class*='da'] {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        float: left;
        background-color: blue;
      }
    </style>
 <!------------------------------------------------------------------------->
<body>
    <form action="">
      <!-- 1. 利用属性选择器就可以不借用类或者id选择器 -->
      <input type="text" placeholder="请输入文字" />
      <input type="text" />
      <!-- 2. 选择属性=值的某些元素 重点 -->
      <input type="text" />
      <input type="password" />
      <!-- 3. 可以选择以某些属性值开头的某些元素 -->
      <div class="icon1"></div>
      <div class="icon2"></div>
      <div class="icon3"></div>
      <div class="icon4"></div>
      <div class="1"></div>
      <!-- 4. 可以选择以某些属性值结尾的某些元素  -->
      <div class="icon1-date"></div>
      <div class="icon2-date"></div>
      <div class="icon3"></div>
      <div class="icon4"></div>
      <div class="1-date"></div>
      <!-- 5. 可以选择所有包含该属性的某些元素  -->
      <div class="icon1-da"></div>
      <div class="da-icon2"></div>
      <div class="ico-dan3"></div>
      <div class="icon4"></div>
      <div class="1-te"></div>
    </form>
  </body>

box-sizing:border-box; 设置padding、border值不会撑开盒子。

filter:blur(1), 模糊处理:数值越大，模糊越高

width:calc(100%-20px); 可以进行一些函数处理 + - * /

过渡效果:transisition:{过渡属性、花费时间、运动曲线、何时开始}

      div {
        width: 200px;
        height: 200px;
        background-color: red;
        /* 过渡效果 */
        transition: border-radius 1s ease 0s;
      }
      div:hover {
        border-radius: 50%;
      }
/*多个属性用 all 就可以了*/
  div {
        width: 200px;
        height: 200px;
        background-color: red;
        /* 过渡效果 */
        transition: all 2s;
      }
      div:hover {
        border-radius: 50%;
        width: 600px;
        height: 600px;
      }

texe-indent:2em; 首行缩进

CSS3新特性:

    /*  转换里的移动效果 transform:translate(0 , 0)  */
 /* x轴移动了300，y轴要给数值可以是0 */
        transform: translate(300px, 0);
        transform: translateX(300px);
        transform: translateY(0);
           /*居中*/
       /*先给父元素添加reletive*/
        position:absolute;
        left:50%;
        top:50%;
        /*自身长度的一半*/
        transform:translate(-50%,-50%);

/*转换里的旋转配合过渡看得出来效果*/
transform: rotate(360deg);

/*设置旋转位置*/
   div {
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: palegreen;
        transition: all 6s;
        /* transform-origin: left bottom; */
        /* transform-origin: 80px 80x; */
      }
      div:hover {
        transform: rotate(360deg);
      }
 


 /*  , 隔开,里面是数字 就是倍数的意思 1 就是1倍 */
        transform: scale(2, 2);
        /* 只有一个参数是等比例缩放 */
        transform: scale(2);
        /* 缩小 */
        transform: scale(0.5);

动画:

      /*调用动画名称*/
     animation-name: move;
      /*动画持续时间*/
        animation-duration: 5s;
      }
       /*设置调用动画项目的名称*/
      @keyframes move {
         /*动画刚开始的时候*/
        0% {
          transform: translateX(0px);
        }
		/*动画结束的时候*/
        100% {
          transform: translateX(800px);
        }
      }


      .div {
        width: 200px;
        height: 200px;
        background-color: palegreen;
        border-radius: 40px;
        /* 动画名称 */
        animation-name: move;
        /* 持续时间 */
        animation-duration: 4s;
        /* 动画运动曲线 */
        animation-timing-function: ease;
        /* 动画何时开始 */
        animation-delay: 0s;
        /* 无限循环重复次数 */
        animation-iteration-count: infinite;
        /* 是否逆向播放 */
        animation-direction: alternate;
        /* 动画暂停 */
        animation-play-state: paused;
        /* 动画结束后就停留在结束位置了 */
        animation-fill-mode: forwards;
        /* 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始位置 */
        animation: move 4s ease 1s infinite alternate;
      }
      @keyframes move {
        /* 配合上面停留在结束位置 */
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(800px, 0);
        }
        /* 自身无限旋转 */
        0% {
          transform: rotate(0deg);
        }
        25% {
          transform: rotate(90deg);
        }
        50% {
          transform: rotate(180deg);
        }
        75% {
          transform: rotate(270deg);
        }
      }
<body>
    <div class="div"></div>
  </body>

 <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        /* 3D需要配合透视才显示,且写在父盒子上 */
        /* 透视越小看着越大 */
        perspective: 100px;
      }
      div {
        width: 100px;
        height: 100px;
        background-color: cadetblue;
        margin: 0 auto;
        /* translatez 沿着Z轴移动,向外移动100px,注意隔开方式*/
        /* Z轴越小物体越小 */
        transform: translate3d(0, 100px, 20px);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>

旋转木马，黑马课程

code时穿上裤子

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
笔记

1. 生成多个相同标签加上 * 就可以了然后tab键，就可以生成2.父子级关系，可以用> 比如 ul>li 就可以了3.同级别标签，用 + 就可以了比如div + p4.带有选择器属性的标签，直接写.demo 或者 #tdemo 然后tab键5.生成有顺序的div标签，可以用 $符号进行排序，比如div$*56.在生成的标签内部写内容可以用{}表示，div{需要写的内容}7.选择同一列多行的内容修改，Alt+Shift 就可以...
复制链接

扫一扫