分享6_时长s-CSDN博客

本文链接：https://blog.csdn.net/qq_41185337/article/details/103372586

在新公司提交代码更新旧项目时，见到原程序员自勉的话：提交代码不写注释的人，小**就跟注释一样长
世界上最遥远的距离不是生与死，而是你亲手制造的BUG就在你眼前，你却怎么都找不到她。
网络聊天的时候，想表达对方是猪，一般人会打“xxx你这个猪。”，程序员会打xxx.isPig=TRUE。
为什么程序员总是分不清万圣节和圣诞节?因为Oct31==Dec25。
面试官：“熟悉哪种语言”。应聘者：“JAVA”。面试官：“知道什么叫类么”。应聘者：“我这人实在，工作努力，不知道什么叫累”。面试官：“知道什么是包？”。应聘者：“我这人实在，平常不带包，也不用公司准备了”。面试官：“知道什么是接口吗？”。应聘者：“我这个人工作认真。从来不找借口偷懒”。面试官：“知道什么是继承么”。应聘者：“我是孤儿没什么可以继承的”。面试官:“知道什么叫对象么？”。应聘者:“知道，不过我工作努力，上进心强，暂时还没有打算找对象。”。面试官：“知道多态么？”。应聘者：“知道，我很保守的。我认为让心爱的女人为了自已一时的快乐去堕胎是不道德的行为！”。面试官：“。。。。。。”。应聘者：“请问这跟Java有什么关系吗?”。面试官：“。。。。。。”。

常用样式

设置元素的垂直对齐方式

vertical-align:
    -   top :   顶端对齐
    -   text-top:   文字顶端对齐
    -   bottom: 底部对齐
    -   text-bottom :   文字底部
    -   middle  :   中部对齐    ,   (多个元素必须同时设置 才能生效.)
    -   百分比%    :   按照父元素的行高属性值. 来计算对齐的百分比. (父元素必须有行高值)

鼠标形状 ***

cursor  :   
    取值:
        -   default :   默认鼠标形状, 跟随场景变化自动变化.
        -   pointer :   手指形状 (用于提示用户可点击)
        -   text    :   焦点形状 (工字形)
        -   wait    :   等待
        -   help    :   帮助
        -   progress:   进度中
        -   url(路径),auto:   文件格式:   cur,ico

列表样式 *

list-style-type:none;   
    取消前置数字或图标.

不透明度

opacity:0-1的浮点型数字
当值为1时 , 不透明
当值为0时 , 完全透明
当值为0.5时, 半透明.

过渡 ****

在元素的样式变更时 , 为变更增加过渡时长, 让样式的变更流畅.

格式1.
transition:样式时长s;

格式2.
transition:all 时长s;

转换了解

用于改变元素的形状 大小 位置的一种样式

2D转换

-   transform   :   
        -   移动: tanslate(x,y)   ;x和y分别表示移动的横向和纵向像素数量.   
        -   旋转: rotate(数值deg)
        -   缩放: scale(x,y);横向和纵向的缩放倍数.
        -   翻转: skew(xdeg,ydeg)

3D旋转

-   transform:
        X轴旋转:   rotateX(数值deg)
        y轴旋转:   rotateY(数值deg);

动画 *

指的是元素在多个样式之间 自动平稳的过渡.

定义的格式:
@keyframes 自定义名称{
0%{
样式列表;
}
…
100%{
样式列表
}
}

使用动画的格式:
选择器{
animation:动画名称时长s;
animation-iteration-count:数字;/重复执行的次数/
}

响应式

以移动设备优先显示:(当手机设备打开时, 像素自动放大)
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

当屏幕宽度小于500像素时 , 生效的样式:

@media (max-width:500px){
    选择器{

    }
    选择器{

    }
}

当屏幕宽度大于500像素时 , 生效的样式:
@media (min-width:500px){
选择器{

    }
    选择器{

    }
}

JS

简介

JavaScript 是一种网页编程技术, 用于向网页添加与用户的交互行为的编程技术.
JavaScript 是一种基于对象 和 事件驱动的 解释性 脚本语言.  (由浏览器自上而下解析执行代码, 不进行预编译)

优点:
1. 基于对象, 内置大量对象
2. 代码直接嵌入在HTML文件中
3. 任何的浏览器都可以运行
4. 不进行预编译, 逐行解析执行代码.

缺点:
不具备计算机本地资源的操作能力.

用于做什么?
1. 客户端逻辑运算
2. 网页事件的处理
3. 客户端表单的合法性验证
4. 动画的制作.

定义 JS代码的三种方式 *****

1.  定义在元素的事件属性中
        <button onclick="alert('按钮被点击了');">点我啊</button>

定义在网页的script标签中
<script type="text/javascript">
for(i=0;i<100;i++){
alert("嘿嘿嘿"+i);
}
</script>

定义在外部的.js文件中.
js文件中直接编写JS代码即可, 通过script标签引入
<script src="路径"></script>

注意: src的引入方式 , 是将内容嵌入到了script标签中.
        不能在引入JS文件的script标签中再编写JS代码, 会被引入的内容所覆盖.

弹出窗

alert("要弹出的文字");