Css日记1

最新推荐文章于 2024-07-18 15:09:01 发布

M团子

最新推荐文章于 2024-07-18 15:09:01 发布

阅读量167

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_47872824/article/details/109102895

版权

css 日记1

一：css学习
1.新增属性选择器
方便于相同的标签选用
(1)如下选择为 input[value]

<input type="text" value="">
<input type="text">

(2)如下选择为 input[type=text]

<input type="text"  > 
<input type="password">

(3)形式如class="icon-n"的选择（都以icon开头）

/*选择为： div[class^icon]*/
<div class="icon-1"></div>
<div class="icon-2"></div>
<div class="icon-3"></div>

(3)形式如class="iconn-data"的选择（都以data结尾）

/*选择为：section[class$data]*/
<section class="icon1-data">
<section class="icon2-data">

2.结构伪类选择器(用ul>li讲)
(1)第一个与最后一个

第一个li：
最后一个li：
<style>
      ul li:first-child{}
      ul li:last-child{}
</style>


<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

(2)其中第n个li nth-child（n）

任意一个,第n个
 ul li:nth-child(n){};

在这之中n可
(3) nth-of-type(n)

类似于nth-child(n),两者的区别在于：
nth-of-type更加的适用于选择不同标签，如果是如下
在这里插入图片描述
此时 section div:nth-child(1): 是无法选择到其中的任何一个标签，因为nth:child先确认后面数字1，也就是选中了p标签之后，确认前面的标签选择，发现是div,矛盾导致无法选中任意标签。

但是section div:nth-of-type(1)则就会选中p标签，区别在于它先确定前面是div确定后面的数字1，选中p。

3.css3过渡
（1）transition: 要过渡的属性花费时间运动曲线延迟时间

<style>
   div{
     width:200px;
     height:100px;
     transition:width 1s ease 1s;
     }
    div:hover{
    width:400px;
    }
    /*代表让鼠标通过盒子变大，是一个渐变的过程，加上会有变化的过程。更美观*/
</style>

4.transform

2D的转换（二维坐标）
横轴为x轴，竖方向为y轴方向
(1)transform:translate(x,y);

   1.类似于浮动，但是不影响其余盒子的位置
   2.translate(50%,50%)百分比相对于自身元素
   3.对行元素是无效的

（2）transform:rotate(度数)

      1.rotate为度数，单位为deg
      2.角度为正为顺时针，角度为负为逆时针
      3.默认转动的中心是元素的中心
      4.可以用在鼠标通过:hover的效果，但是需要加上过渡才能看到较明显的效果。
  *中心转换：transform-origin:x y
       1.注意后面参数是x和y用空格隔开
       2.x,y默认转换中心是元素的中心点（50%,50%）等价于transform-origin:center center
       3.可以给x,y设置像素或者方位名词（top bottom left center）

（3）缩放transform:scale(x,y)

在这里插入图片描述
**最主要优势：不会影响其他盒子。

今日训练：
1.过渡进度条
鼠标通过下面盒子，过渡缓慢显示进度条充满
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 150px;
            height: 15px;
            border: 1px solid red;
            /* 高的二分之一 */
            border-radius: 7px;
            padding: 1px;

        }

        /* 过渡给谁变了 */
        .son{
            height: 100%;
            width: 0;
            border-radius: 7px;
            background-color: red;
            transition: width 1s;

        }

        .father:hover .son{
            width: 100%;
        }



    </style>
</head>
<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>
</html>

2.三角形标旋转
在这里插入图片描述
鼠标通过，箭旋转180变为向上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角制作</title>
    <style>
        div{
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid black;
        }
        /* 也是一个盒子，简便了 */
        div::after{
            content: "";
            position: absolute;
            top:9px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000 ;
            border-bottom: 1px solid #000 ;
            transform: rotate(45deg);
            /* 加过渡可以很好的展现效果 */
            transition: all 1s;
        }

        /* 鼠标经过三角旋转   45+180度数*/
        
        div:hover::after{
            transform: rotate(225deg);
        }


    </style>
</head>
<body>
    <div>

    </div>

3.图片缩放
鼠标经过图片加过渡效果放大，会有动画感

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片缩放效果</title>
    <style>
        div{
            float: left;
            margin:10px 30px;
            /* 放大超出部分隐藏起来 */
            overflow: hidden;
        }
        /* 特别需要注意的似乎过度加在谁动画上 */
        div img{
            transition: all 0.4s;
        }

        div img:hover{
            transform: scale(1.1);
        }

    </style>
</head>
<body>
    <div><a href="#">
        <img src="images/bd1.png" alt="">
    </a></div>
    <div><a href="#">
        <img src="images/bd1.png" alt="">

    </a></div>
</body>
</html>

二：js学习
1.js的书写：（类似于css）
内嵌式：script
外部：后缀.js 引入:
行内：html标签内 οnclick="" (on开头的属性)

2.js输入输出语句
alter(msg) 浏览器弹出警示框
console.log(msg) 浏览器控制台打印输出信息（程序员看，检查框内）
prompt(info) 浏览器弹出输入框，用户输入

3.变量声明
var age; //var是js的关键字
1.不声明变量直接赋值也可以使用
2.js变量的数据类型只有程序运行过程中根据所赋值来设定。不用自己声明

4.数字类型
在这里插入图片描述

M团子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Css日记1

css 日记11.新增属性选择器方便于相同的标签选用(1)如下选择为 input[value]<input type="text" value=""><input type="text">(2)如下选择为 input[type=text]<input type="text" > <input type="password">(3)形式如class="icon-n"的选择（都以icon开头）/*选择为： div[class^ic
复制链接

扫一扫