首页

移动端、PC端 网页特效

前端达人

文章目录

移动端网页特效

触屏事件

移动端浏览器兼容性较好，不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

常见的触屏事件：
在这里插入图片描述
触摸事件对象（TouchEvent）

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等

touchstart、touchmove、touchend 三个事件都会各自有事件对象。

触摸事件对象常见对象列表：
在这里插入图片描述
因为平时都是给元素注册触摸事件，所以重点记住 targetTocuhes

移动端拖动元素JS代码实现： 

// （1） 触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置 // （2） 移动手指 touchmove：  计算手指的滑动距离，并且移动盒子 // （3） 离开手指 touchend: var div = document.querySelector('div'); var startX = 0; //获取手指初始坐标 var startY = 0; var x = 0; //获得盒子原来的位置 var y = 0; div.addEventListener('touchstart', function(e) { //  获取手指初始坐标 startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; x = this.offsetLeft; y = this.offsetTop; }); div.addEventListener('touchmove', function(e) { //  计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标 var moveX = e.targetTouches[0].pageX - startX; var moveY = e.targetTouches[0].pageY - startY; // 移动我们的盒子 盒子原来的位置 + 手指移动的距离 this.style.left = x + moveX + 'px'; this.style.top = y + moveY + 'px'; e.preventDefault(); // 阻止屏幕滚动的默认行为 }); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    •

classList属性

classList属性是HTML5新增的一个属性。返回元素的类名，该属性用在元素中添加、移除及切换CSS类 

<style> .bg { background-color: black; } </style> <body> <div class="one two"></div> <button> 开关灯</button> <script> // classList 返回元素的类名 var div = document.querySelector('div'); // console.log(div.classList[1]); // 1. 添加类名  是在后面追加类名不会覆盖以前的类名 注意前面不需要加. div.classList.add('three'); // 2. 删除类名 div.classList.remove('one'); // 3. 切换类 var btn = document.querySelector('button'); btn.addEventListener('click', function() { document.body.classList.toggle('bg'); }) </script> </body> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    •

常用开发插件

移动端 要求的是快速开发，所以经常会借助于一些插件来帮完成操作

JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件

插件的使用：

  1. 引入 js 插件文件
  2. 按照规定语法使用

特点： 它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。比如移动端常见插件：iScroll、Swiper、SuperSlider

PC端网页特效

偏移量系列 offset

offset 翻译过来就是偏移量， 使用 offset 系列相关属性可以 动态 的得到该元素的位置（偏移）、大小等。

  • 获得元素距离带有定位父元素的位置
  • 获得元素自身的大小（宽度高度）
  • 注意： 返回的数值都不带单位

常用属性：
在这里插入图片描述
图示：
在这里插入图片描述

offset与style区别：

offset style
可以得到任意样式表中的样式值 只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的 style.width 获得的是带有单位的字符串
offsetWidth 包含padding+border+width style.width 获得不包含padding和border 的值
offsetWidth 等属性是只读属性，只能获取不能赋值 style.width 是可读写属性，可以获取也可以赋值
获取元素大小位置，用offset更合适 元素更改值，则需要用style改变

案例——获取鼠标在盒子内的坐标：

效果展示：
在这里插入图片描述

实现代码(JS)： 

// 在盒子内点击， 想要得到鼠标距离盒子左右的距离。 // 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY） // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop) // 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标 var box = document.querySelector('.box'); box.addEventListener('mousemove', function(e) { // console.log(e.pageX); // console.log(e.pageY); // console.log(box.offsetLeft); var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; this.innerHTML = 'x坐标是' + x + ' y坐标是' + y; }) 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    •

案例——模态拖拽框：

  • 点击弹出层， 会弹出模态框， 并且显示灰色半透明的遮挡层。
  • 点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。
  • 鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。
  • 鼠标松开，可以停止拖动模态框移动。

效果展示：
在这里插入图片描述

实现代码： 

<head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; } ul,li,ol,dl,dt,dd,div,p,span,h1,h2,h3,h4,h5,h6,a { padding: 0px; margin: 0px; } .login { display: none; width: 512px; height: 280px; position: fixed; border: #ebebeb solid 1px; left: 50%; top: 50%; background: #ffffff; box-shadow: 0px 0px 20px #ddd; z-index: 9999; transform: translate(-50%, -50%); } .login-title { width: 100%; margin: 10px 0px 0px 0px; text-align: center; line-height: 40px; height: 40px; font-size: 18px; position: relative; cursor: move; } .login-input-content { margin-top: 20px; } .login-button { width: 50%; margin: 30px auto 0px auto; line-height: 40px; font-size: 14px; border: #ebebeb 1px solid; text-align: center; } .login-bg { display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, .3); } a { text-decoration: none; color: #000000; } .login-button a { display: block; } .login-input input.list-input { float: left; line-height: 35px; height: 35px; width: 350px; border: #ebebeb 1px solid; text-indent: 5px; } .login-input { overflow: hidden; margin: 0px 0px 20px 0px; } .login-input label { float: left; width: 90px; padding-right: 10px; text-align: right; line-height: 35px; height: 35px; font-size: 14px; } .login-title span { position: absolute; font-size: 12px; right: -20px; top: -30px; background: #ffffff; border: #ebebeb solid 1px; width: 40px; height: 40px; border-radius: 20px; } </style> </head> <body> <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div> <div id="login" class="login"> <div id="title" class="login-title">登录会员 <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span> </div> <div class="login-input-content"> <div class="login-input"> <label>用户名：</label> <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input"> </div> <div class="login-input"> <label>登录密码：</label> <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input"> </div> </div> <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div> </div> <!-- 遮盖层 --> <div id="bg" class="login-bg"></div> <script> // 1. 获取元素 var login = document.querySelector('.login'); var mask = document.querySelector('.login-bg'); var link = document.querySelector('#link'); var closeBtn = document.querySelector('#closeBtn'); var title = document.querySelector('#title'); // 2. 点击弹出层这个链接 link  让mask 和login 显示出来 link.addEventListener('click', function() { mask.style.display = 'block'; login.style.display = 'block'; }) // 3. 点击 closeBtn 就隐藏 mask 和 login  closeBtn.addEventListener('click', function() { mask.style.display = 'none'; login.style.display = 'none'; }) // 4. 开始拖拽 // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标 title.addEventListener('mousedown', function(e) { var x = e.pageX - login.offsetLeft; var y = e.pageY - login.offsetTop; // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值 document.addEventListener('mousemove', move) function move(e) { login.style.left = e.pageX - x + 'px'; login.style.top = e.pageY - y + 'px'; } // (3) 鼠标弹起，就让鼠标移动事件移除 document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', move); }) }) </script> </body> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    • 

    
  • 
        52
    
    • 

    
  • 
        53
    
    • 

    
  • 
        54
    
    • 

    
  • 
        55
    
    • 

    
  • 
        56
    
    • 

    
  • 
        57
    
    • 

    
  • 
        58
    
    • 

    
  • 
        59
    
    • 

    
  • 
        60
    
    • 

    
  • 
        61
    
    • 

    
  • 
        62
    
    • 

    
  • 
        63
    
    • 

    
  • 
        64
    
    • 

    
  • 
        65
    
    • 

    
  • 
        66
    
    • 

    
  • 
        67
    
    • 

    
  • 
        68
    
    • 

    
  • 
        69
    
    • 

    
  • 
        70
    
    • 

    
  • 
        71
    
    • 

    
  • 
        72
    
    • 

    
  • 
        73
    
    • 

    
  • 
        74
    
    • 

    
  • 
        75
    
    • 

    
  • 
        76
    
    • 

    
  • 
        77
    
    • 

    
  • 
        78
    
    • 

    
  • 
        79
    
    • 

    
  • 
        80
    
    • 

    
  • 
        81
    
    • 

    
  • 
        82
    
    • 

    
  • 
        83
    
    • 

    
  • 
        84
    
    • 

    
  • 
        85
    
    • 

    
  • 
        86
    
    • 

    
  • 
        87
    
    • 

    
  • 
        88
    
    • 

    
  • 
        89
    
    • 

    
  • 
        90
    
    • 

    
  • 
        91
    
    • 

    
  • 
        92
    
    • 

    
  • 
        93
    
    • 

    
  • 
        94
    
    • 

    
  • 
        95
    
    • 

    
  • 
        96
    
    • 

    
  • 
        97
    
    • 

    
  • 
        98
    
    • 

    
  • 
        99
    
    • 

    
  • 
        100
    
    • 

    
  • 
        101
    
    • 

    
  • 
        102
    
    • 

    
  • 
        103
    
    • 

    
  • 
        104
    
    • 

    
  • 
        105
    
    • 

    
  • 
        106
    
    • 

    
  • 
        107
    
    • 

    
  • 
        108
    
    • 

    
  • 
        109
    
    • 

    
  • 
        110
    
    • 

    
  • 
        111
    
    • 

    
  • 
        112
    
    • 

    
  • 
        113
    
    • 

    
  • 
        114
    
    • 

    
  • 
        115
    
    • 

    
  • 
        116
    
    • 

    
  • 
        117
    
    • 

    
  • 
        118
    
    • 

    
  • 
        119
    
    • 

    
  • 
        120
    
    • 

    
  • 
        121
    
    • 

    
  • 
        122
    
    • 

    
  • 
        123
    
    • 

    
  • 
        124
    
    • 

    
  • 
        125
    
    • 

    
  • 
        126
    
    • 

    
  • 
        127
    
    • 

    
  • 
        128
    
    • 

    
  • 
        129
    
    • 

    
  • 
        130
    
    • 

    
  • 
        131
    
    • 

    
  • 
        132
    
    • 

    
  • 
        133
    
    • 

    
  • 
        134
    
    • 

    
  • 
        135
    
    • 

    
  • 
        136
    
    • 

    
  • 
        137
    
    • 

    
  • 
        138
    
    • 

    
  • 
        139
    
    • 

    
  • 
        140
    
    • 

    
  • 
        141
    
    • 

    
  • 
        142
    
    • 

    
  • 
        143
    
    • 

    
  • 
        144
    
    • 

    
  • 
        145
    
    • 

    
  • 
        146
    
    • 

    
  • 
        147
    
    • 

    
  • 
        148
    
    • 

    
  • 
        149
    
    • 

    
  • 
        150
    
    • 

    
  • 
        151
    
    • 

    
  • 
        152
    
    • 

    
  • 
        153
    
    • 

    
  • 
        154
    
    • 

    
  • 
        155
    
    • 

    
  • 
        156
    
    • 

    
  • 
        157
    
    • 

    
  • 
        158
    
    • 

    
  • 
        159
    
    • 

    
  • 
        160
    
    • 

    
  • 
        161
    
    • 

    
  • 
        162
    
    • 

    
  • 
        163
    
    • 

    
  • 
        164
    
    • 

    
  • 
        165
    
    • 

    
  • 
        166
    
    • 

    
  • 
        167
    
    • 

    
  • 
        168
    
    •

可视区系列 client

client 翻译过来就是客户端，使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

常用属性：
在这里插入图片描述
client和offset最大的区别就是 ：不包含边框
图示：
在这里插入图片描述

滚动系列 scroll

scroll 翻译过来就是滚动的，使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

常用属性：
在这里插入图片描述
图示：
在这里插入图片描述

滚动条：

  • 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。
  • 当滚动条向下滚动时，页面上面被隐藏掉的高度，称为页面被卷去的头部。
  • 滚动条在滚动时会触发 onscroll 事件。

案例——固定右侧侧边栏：

  • 原先侧边栏是绝对定位
  • 当页面滚动到一定位置，侧边栏改为固定定位
  • 页面继续滚动，会让 返回顶部显示出来

效果展示：
在这里插入图片描述

实现代码： 

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .slider-bar { position: absolute; left: 50%; top: 300px; margin-left: 600px; width: 45px; height: 130px; background-color: pink; } .w { width: 1200px; margin: 10px auto; } .header { height: 150px; background-color: purple; } .banner { height: 250px; background-color: skyblue; } .main { height: 1000px; background-color: yellowgreen; } span { display: none; position: absolute; bottom: 0; } </style> </head> <body> <div class="slider-bar"> <span class="goBack">返回顶部</span> </div> <div class="header w">头部区域</div> <div class="banner w">banner区域</div> <div class="main w">主体部分</div> <script> //1. 获取元素 var sliderbar = document.querySelector('.slider-bar'); var banner = document.querySelector('.banner'); // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面 var bannerTop = banner.offsetTop // 当侧边栏固定定位之后应该变化的数值 var sliderbarTop = sliderbar.offsetTop - bannerTop; // 获取main 主体元素 var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var mainTop = main.offsetTop; // 2. 页面滚动事件 scroll document.addEventListener('scroll', function() { // window.pageYOffset 页面被卷去的头部 // console.log(window.pageYOffset); // 3 .当页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位 if (window.pageYOffset >= bannerTop) { sliderbar.style.position = 'fixed'; sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '300px'; } // 4. 当我们页面滚动到main盒子，就显示 goback模块 if (window.pageYOffset >= mainTop) { goBack.style.display = 'block'; } else { goBack.style.display = 'none'; } }) </script> </body> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    • 

    
  • 
        52
    
    • 

    
  • 
        53
    
    • 

    
  • 
        54
    
    • 

    
  • 
        55
    
    • 

    
  • 
        56
    
    • 

    
  • 
        57
    
    • 

    
  • 
        58
    
    • 

    
  • 
        59
    
    • 

    
  • 
        60
    
    • 

    
  • 
        61
    
    • 

    
  • 
        62
    
    • 

    
  • 
        63
    
    • 

    
  • 
        64
    
    • 

    
  • 
        65
    
    • 

    
  • 
        66
    
    • 

    
  • 
        67
    
    • 

    
  • 
        68
    
    • 

    
  • 
        69
    
    • 

    
  • 
        70
    
    • 

    
  • 
        71
    
    • 

    
  • 
        72
    
    • 

    
  • 
        73
    
    • 

    
  • 
        74
    
    • 

    
  • 
        75
    
    • 

    
  • 
        76
    
    • 

    
  • 
        77
    
    • 

    
  • 
        78
    
    • 

    
  • 
        79
    
    • 

    
  • 
        80
    
    • 

    
  • 
        81
    
    • 

    
  • 
        82
    
    • 

    
  • 
        83
    
    • 

    
  • 
        84
    
    •

三大系列作用区别：
在这里插入图片描述

它们主要用法：

系列 作用 属性
offset 用于获得元素位置 offsetLeft offsetTop
client 用于获取元素大小 clientWidth clientHeight
scroll 用于获取滚动距离 scrollTop scrollLeft

注意：页面滚动的距离通过 window.pageXOffset 获得

动画原理

核心原理：通过定时器 setInterval() 不断移动盒子位置

实现步骤：

  1. 获得盒子当前位置
  2. 让盒子在当前位置加上1个移动距离
  3. 利用定时器不断重复这个操作
  4. 加一个结束定时器的条件
  5. 注意此元素需要添加定位，才能使用 element.style.left

简单动画函数封装： 

// 简单动画函数封装obj目标对象 target 目标位置 function animate(obj, target) { var timer = setInterval(function() { if (obj.offsetLeft >= target) { // 停止动画 本质是停止定时器 clearInterval(timer); } //每次均匀向右移动1px obj.style.left = obj.offsetLeft + 1 + 'px'; }, 30); } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    •

缓动效果原理：

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

  1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
  2. 核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离步长
  3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
  4. 注意步长值需要取整 
// 缓动动画函数封装obj目标对象 target 目标位置 // 思路： // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。 // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长 // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器 function animate(obj, target) { // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 var step = (target - obj.offsetLeft) / 10; if (obj.offsetLeft == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); } // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    •

多个目标值之间移动：

当开始移动时候，判断步长是正值还是负值

  • 如果是正值，则步长 往大了取整
  • 如果是负值，则步长 向小了取整

动画函数封装到单独JS文件： animate.js 

function animate(obj, target, callback) { // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 // 把步长值改为整数 不要出现小数的问题 // var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); // 回调函数写到定时器结束里面 // if (callback) { //     // 调用函数 //     callback(); // } callback && callback(); } // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); }


    蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。





    





    分享此文一切功德，皆悉回向给文章原作者及众读者.





    转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 





    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
评论(0) 浏览(2299)

css3通过scale()、rotate()实现放大、旋转

前端达人

css3通过scale()实现放大功能、通过rotate()实现旋转功能，下面有个示例，大家可以参考下

一、scale()方法

缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。

跟translate()方法一样，缩放scale()方法也有3种情况：

（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；

1、scaleX(x)

语法：

transform:scaleX(x)

说明：

x表示元素沿着水平方向（X轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。
大家想想倍数是怎样一个概念就很好理解了。

2、scaleY(y)

语法：

transform:scaleY(y)

说明：

y表示元素沿着垂直方向（Y轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。

3、scale(x,y)

语法：

transform:scale(x,y)

说明：

x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。
注意，Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。

举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3缩放scale()用法</title>
    <style type="text/css">
        /*设置原始元素样式*/
        .main
        {
            margin:100px auto;/*水平居中*/
            width:300px;
            height:200px;
            border:1px dashed gray;
        }
        /*设置当前元素样式*/
        #jb51
        {
            width:300px;
            height:200px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transform:scaleX(1.5);
            -webkit-transform:scaleX(1.5);  /*兼容-webkit-引擎浏览器*/
            -moz-transform:scaleX(1.5);     /*兼容-moz-引擎浏览器*/
        }
        /*普通方便对比*/
         #jbzj
        {
            width:300px;
            height:200px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="jb51">脚本之家1</div>
    </div>
    <div class="main">
        <div id="jbzj">脚本之家2</div>
    </div>
</body>
</html>

在chrome浏览器预览效果如下：

分析：

从上图可以看出，元素沿着X轴方向放大了1.5倍（两个方向同时延伸，整体放大1.5倍）。

transform:scaleY (1.5);
-webkit-transform:scaleY(1.5); /*兼容-webkit-引擎浏览器*/
-moz-transform:scaleY(1.5); /*兼容-moz-引擎浏览器*/

当使用上面代码时，在浏览器预览效果如下：

css3通过scale()实现放大功能

通过rotate()实现旋转功能

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。如下图所示：

HTML代码：

1
2
3
<div class="wrapper">
  <div></div>
</div>

CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

演示结果

而transition则可设置元素变化所需的时间

html中的结构代码

<ul>
<li><img src="image/1.jpg" ></li>
<li><img src="image/2.jpg" ></li>
<li><img src="image/3.jpg" ></li>
</ul>

css3样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ul{
margin-top:50px;
list-style:none;
}
ul li{
width:200px;
height:150px;
float:left;
margin-left:10px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
}
ul li:hover{
-webkit-transform:scale(1.5) rotate(10deg);
-moz-transform:scale(1.5) rotate(10deg);
-o-transform:scale(1.5) rotate(10deg);
}
li img{
width:100%;
height:100%;
}

以上就是css3通过scale()、rotate()实现放大、旋转的详细内容，更多关于css3放大、旋转的资料请关注脚本之家其它相关文章！




蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：脚本之家

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(2315)

outlook邮箱签名制作总结

前端达人



最做了邮箱签名的需求，想着之前做过两次签名也不是很难   于是开始了本次outlook签名的超长途旅行



v2-b00fc49c597e5fc2449663399df0d5df_1440w.jpg

本次总结不到位的或者不正确的地方 还请大神指正





首先手撸一个table出来 写内容




    1.邮件使用table+css布局





    2.邮件主要部分在body内部，所以样式一定要写成内嵌的，不能在head标签中写style，也不能外联。





    如：






    


        


            


                

                    


                        

                            

                                1
                            


                            

                                2
                            


                            

                                3
                            


                            

                                4
                            


                            

                                5
                            


                            

                                6
                            


                            

                                7
                            


                            

                                8
                            


                            

                                9
                            


                            

                                10
                            


                            

                                11
                            


                            

                                12
                            


                            

                                13
                            


                            

                                14
                            


                            

                                15
                            


                            

                                16
                            


                            

                                17
                            


                            

                                18
                            


                            

                                19
                            


                        		

                        

                            


                                

                                    <table border="0" cellspacing="0" cellpadding="0" style="font-family:'微软雅黑',Helvetica,Arial,sans-serif;font-size:14px " width="100%">
                                


                                

                                         <tbody>
                                


                                

                                                    <tr>
                                


                                

                                                        <td style="font-family:Helvetica,Arial,sans-serif;font-size:14px;">
                                


                                

                                                        <table width="100%" border="0" cellpadding="5" cellspacing="0" >
                                


                                

                                                                <tbody>
                                


                                

                                                                    <tr>
                                


                                

                                                                        <td>
                                


                                

                                                                            <p style="margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;margin-bottom: 20px"><br>　　　　　　　　　　　　　　　　　　　　　　　　　　尊敬的开发者：<br>　　　　　　　　　　　　　　　　　　　　　　　　</p>
                                


                                

                                                                            <p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;"><br>　　　　　　　　　　　　　　　　　　　　　　　　　“xxx”在此次的‘网络友好度测试’评级：<span style="color:#F44336;">4颗星</span>（最高5颗星）。<br>　　　　　　　　　　　　　　　　　　　　　　　　</p>
                                


                                

                                                                        </td>
                                


                                

                                                                    </tr>
                                


                                

                                                                </tbody>
                                


                                

                                                        </table>                                                          
                                


                                

                                                       </td>
                                


                                

                                                  </tr>
                                


                                

                                                    
                                


                                

                                       </tbody>
                                


                                

                                    </table>           
                                


                            


                        		

                    


                

            


        


    







    3.不能用浮动的方式定位。position：absolute;float:left;等都不行，float在qq邮箱客户端中可以识别，但是在outlook中无法识别。





    4.表格的border，使用table上的border属性，可以在qq浏览器中兼容，但是在outlook中打开是没有边框的，这种情况，我么只能给每一个td加一个border，在table中使用border-collapse:collapse;来合并重复的边框。





    如：






    


        


            


                

                    


                        

                            

                                1
                            


                        		

                        

                            


                                

                                    <table width="90%" border="1px" style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;text-align: left;margin:40px auto;border-collapse:collapse;">
                                


                            


                        		

                    


                

            


        


    







    这样设置border会在outlook中显示不出border；





    5.为了保证兼容性，需要把邮件的宽度设置为600px，最大600px；





    6.少用img，因为很多邮箱客户端默认不显示图片，所以，如果需要图片的话，一定要写好alt和title；





    7.背景图片，尽量用background-color使用纯色背景，如果一定要用背景图片，使用background属性，






    


        


            


                

                    


                        

                            

                                1
                            


                        		

                        

                            


                                

                                    <div background=”http://image1.koubei.com/images/common/logo_koubei.gif”></div>
                                


                            


                        		

                    


                

            


        


    







    8.邮件不支持javascript，flash以及一些特殊的标签。







因为不能浮动 定位 等  一些设计笔记复杂的内容 需要横向排列的  只能多撸几个table了 暂时我是这样解决的 比较麻烦



在outlook签名中最难处理的行高，line-height属性，outlook的这个属性只能支持在块上设置，比如可以给td标签设置line-height，但是不能给span设置line-height，否则行高设置是不起作用的。

     具体内容可以根据实际情况改写。修改签名文件后，最好关闭outlook重新打开一下，要不然outlook里面会有缓存，造成显示错误。
v2-253613b5dd4140a046b5b24bf8f3c5d7_1440w.jpg

紧接着 在图片引用上遇到了问题
https的图片调用 outlook竟然给屏蔽了， 需要用户开启权限才能显示 非常影响用户体验，

于是我就把图片换成base64格式引用， 同样遇到了问题， base64格式下 outlook无法使用style操控图片尺寸，这就使图片的宽高变成非常小，同样清晰度也大大降低， 
而且outlook在引用base64格式图片情况下  如果图片过小 还会出现部分黑边 十分的麻烦
目前暂时没找他其他的方案处理，有大神帮忙指点下
v2-185fffb8ff50312a5c65e46d36484086_1440w.jpg

最总边学边做的情况下完成了这个签名， 虽然一路坎坷 还算比较满意的完成了这次签名
记录一下 继续学习

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


评论(0) 浏览(3111)

CentOS7 升级PHP到7.2

前端达人

写在前面

CentOS7下安装PHP默认是5.4的，但是有些框架要求PHP的版本得在5.4以上，这就需要我们把PHP升级一下了。 

yum provides php 

    

    
  • 
        1
    
    •

开始升级PHP： 

rpm -Uvh https://mirror.webtatic.com/yum/el7/epel-release.rpm #更新源
rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm
yum remove php-common -y  #移除系统自带的php-common
yum install -y php72w php72w-opcache php72w-xml php72w-mcrypt php72w-gd php72w-devel php72w-mysql php72w-intl php72w-mbstring  #安装依赖包 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    •

查看版本 

php -v 

    

    
  • 
        1
    
    • 




PHP 7.2.8 (cli) (built: Jul 20 2018 15:20:01) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.2.8, Copyright (c) 1999-2018, by Zend Technologies


    蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。





    截屏2021-05-13 上午11.41.03.png 





    







    转自：csdn 作者：Peithon





    分享此文一切功德，皆悉回向给文章原作者及众读者.





    免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。





    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
评论(0) 浏览(1860)

centos7重启php环境

前端达人

apache
启动
systemctl start httpd
停止
systemctl stop httpd
重启
systemctl restart httpd
或者

service httpd stop

service httpd start

service httpd restart


mysql
启动
systemctl start mysqld
停止
systemctl stop mysqld
重启
systemctl restart mysqld

或者

service mysqld stop

service mysqld start

service mysqld restart



php-fpm
启动
systemctl start php-fpm
停止
systemctl stop php-fpm
重启
systemctl restart php-fpm


nginx
启动
systemctl start nginx
停止
systemctl stop nginx
重启
systemctl restart nginx

或者 

service nginx stop
service nginx start
service nginx restart

开机自启

chkconfig httpd on

chkconfig mysqld on
 

 

一、MySQL启动方式

1

2

3

4

5

1、使用 service 启动：service mysqld start

 

2、使用 mysqld 脚本启动：/etc/init.d/mysqld start

 

3、使用 safe_mysqld 启动：safe_mysqld&

二、MySQL停止

1

2

3

4

5

1、使用 service 启动：   service mysqld stop

 

2、使用 mysqld 脚本启动：/etc/init.d/mysqld stop

 

3、mysqladmin shutdown

三、MySQL重启

1

2

3

1、使用 service 启动：service mysqld restart

 

2、使用 mysqld 脚本启动：/etc/init.d/mysqld restart

四、强制关闭

以上方法都无效的时候，可以通过强行命令：“killall mysql”来关闭MySQL，但是不建议用这样的方式，因为这种野蛮的方法会强行终止MySQL数据库服务，有可能导致表损坏……所以自己掂量着用。

Windows下重启MySQL服务,对于没装mysql图形管理端的用户来说启动和停止mysql服务：
…\…\bin>net stop mysql
…\…\bin>net start mysql

 

 

卸载PHP

yum remove php
yum remove php*
yum remove php-*
yum remove php7
yum remove php70
yum remove php7.0
yum remove php-common
这才是苦大仇深卸载个干干净净= w

 

 

Centos下Yum安装PHP5.5,5.6,7.0

默认的版本太低了，手动安装有一些麻烦，想采用Yum安装的可以使用下面的方案：

1.检查当前安装的PHP包

yum list installed | grep php

如果有安装的PHP包，先删除他们

 yum remove php.x86_64 php-cli.x86_64 php-common.x86_64 php-gd.x86_64 php-ldap.x86_64 php-mbstring.x86_64 php-mcrypt.x86_64 php-mysql.x86_64 php-pdo.x86_64

2.Centos 5.X

  rpm -Uvh http://mirror.webtatic.com/yum/el5/latest.rpm
  CentOs 6.x
  rpm -Uvh http://mirror.webtatic.com/yum/el6/latest.rpm
  CentOs 7.X
rpm -Uvh https://mirror.webtatic.com/yum/el7/epel-release.rpm
rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm

如果想删除上面安装的包，重新安装
rpm -qa | grep webstatic
rpm -e  上面搜索到的包即可

3.运行yum install

  yum install php55w.x86_64 php55w-cli.x86_64 php55w-common.x86_64 php55w-gd.x86_64 php55w-ldap.x86_64 php55w-mbstring.x86_64 php55w-mcrypt.x86_64 php55w-mysql.x86_64 php55w-pdo.x86_64
 

yum install php56w.x86_64 php56w-cli.x86_64 php56w-common.x86_64 php56w-gd.x86_64 php56w-ldap.x86_64 php56w-mbstring.x86_64 php56w-mcrypt.x86_64 php56w-mysql.x86_64 php56w-pdo.x86_64


注：如果想升级到5.6把上面的55w换成56w就可以了。

yum install php70w.x86_64 php70w-cli.x86_64 php70w-common.x86_64 php70w-gd.x86_64 php70w-ldap.x86_64 php70w-mbstring.x86_64 php70w-mcrypt.x86_64 php70w-mysql.x86_64 php70w-pdo.x86_64
4.安装PHP FPM

yum install php55w-fpm 
yum install php56w-fpm 
yum install php70w-fpm
注：如果想升级到5.6把上面的55w换成56w就可以了。

nginx重启不了



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


转自：csdn 作者：锅巴胸

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


评论(0) 浏览(1759)

outlook HTML签名制作方法

前端达人

   最近公司要求统一邮件签名格式，好一顿折腾啊！因为统一提供的签名是HTML格式 而outlook不直接提供HTML的签名生成和修改。但其实outlook的签名是有HTML格式的，并且可以直接编辑，方便而且更好控制，只是outlook对HTML的支持限制很多，很多元素无法使用。以前基本上不会写HTML，为了这个签名，HTML倒是学会了不少，也算意外收获吧。痛并快乐着！

      首先，要制作outlook签名，需要在outlook先生成一个签名，起个名字就行，反正内容是要重新修改的。打开outlook，依次打开工具-》选项-》邮件格式，就能看到签名按钮。点击签名按钮，打开签名和信纸对话框，选电子邮件签名选项卡，然后点击新建，输入个名字，OK。第一步到此结束。


      然后打开“C:\Users\你的用户名称\AppData\Roaming\Microsoft\Signatures”目录就可以看到三个文件，一个文件夹，其中那个htm文件就是我们签名的htm版本。用记事本打开这个文件后可以看到很多的html代码，这些都是outlook自动生成的，对我们没有用处，全选然后删除吧。.rtf和.txt两个文件是签名的富文本和纯文本格式，可以直接删除那两个文件。和.htm同名的文件夹千万不要删除，那个html文件需要那个文件夹，它们是一体的，这个文件夹里会缓存一些图片，看需求吧，不需要就可以直接删除，特别对于签名图片是网络引用的那种，一定要删了，要不然outlook只是用那些缓存图片，即使网络图片更换，它也不会变化。

      最后可以将以下代码复制进那个htm文件

<head> 
</head> 
<body> 
<hr style="width: 210px; height: 1px;" color="#b5c4df" size="1" align="left"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="1"> 
<tbody> 
<tr> 
<td valign="top" width="55" height="60"> 
<img src="http://www.xxxxxx.cn/email/logo.gif" width="45" height="45"> 
</td> 
<td valign="top" height="60" style="mso-line-height-rule:exactly; line-height:2.5;font-size:12px;"> 
<strong><span><font face="宋体">你的名字</font> ┃ <font face="宋体">营销中心</font><br></span></strong> 
<strong><span style="color:#C42634;"><font face="宋体">xxxxxxxxxx有限公司</font></span></strong> 
</td> 
</tr> 
</tbody> 
</table> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="1"> 
<tbody> 
<tr> 
<td valign="top" style="mso-line-height-rule:exactly; line-height:2.5;font-size:12px;>  
 <span><font face="宋体">移动电话</font> <font face="Tahoma">Mobile：139-8765-4321</font> <font face="宋体">办公座机</font> <font face="Tahoma">Office Tel：029-1234 5678 Ext.604</font> <font face="宋体">公司网站</font> <font face="Tahoma">Web：http://www.xxxx.com</font></span><br> 
<span><font face="宋体">电子邮箱</font> <font face="Tahoma">E-mail：xxxxxx@xxxxx.com</font> <font face="宋体">公司地址</font> <font face="Tahoma">Address：</font><font face="宋体">xxxxxxxxxxx</font><font face="Tahoma">x</font><font face="宋体">层</font><font face="Tahoma">xxxx</font></span><br> 
</td> 
</tr> 
<tr> 
<td valign="top" style="mso-line-height-rule:exactly; line-height:1.5;font-size:10px;color:#CCCCCC;"> 
<span><font face="宋体">保密提示：本邮件及其附件含有保密信息，受商业秘密相关法律法规保护，不得泄露，仅限于发送给上面地址中列出的个人或群组合法使用。禁止任何其他人以任何形式使用（包括但不限于全部或部分地泄露、复制或散布）本邮件中的信息。如果您错收了本邮件，请您立即电话或邮件通知发件人并删除本邮件！谢谢您的合作。</font><font face="Tahoma"> Confidentiality Notice: This e-mail and its attachments contain confidential information, which is protected under commercial secrets related laws and regulations, and intended only for the legitimate use of person or entity whose address is listed above. Any use of the information contained herein in any way (including, but not limited to, total or partial disclosure, reproduction, or dissemination) by persons other than the intended recipient(s) is prohibited. If you receive this e-mail in error, please notify the sender by phone or email immediately and delete it.</font><br></span> 
</td> 
</tr> 
</tbody> 
</table> 
<img src="http://www.xxxxxx.cn/email/ad.gif"><br> 
</body> 
</html> 

      在outlook签名中最难处理的行高，line-height属性，outlook的这个属性只能支持在块上设置，比如可以给td标签设置line-height，但是不能给span设置line-height，否则行高设置是不起作用的。

     具体内容可以根据实际情况改写。修改签名文件后，最好关闭outlook重新打开一下，要不然outlook里面会有缓存，造成显示错误。



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


转自：csdn 作者：ssmile

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


评论(0) 浏览(3684)

使用outlook制作签名

前端达人

使用outlook制作签名

制作签名的几种方法

你好，最近公司需要我制作公司签名，之前就想着不就是签名嘛，多简单的事。
但是经过一系列的尝试之后，发现还真不容易。主要是因为outlook新建签名的编辑栏不支持直接使用html编辑。下面我介绍我尝试的几种方法

直接在编辑器中编辑

只有文字的话，那就直接在编辑器中输入文字进行排版就好了，没什么难度；

有文字与图片结合，这种情况就要看是怎样的排版了，outlook默认的图片插入模式是嵌入式，这样的话就在文字就在图片的右下角，不能并排显示，很不实用。那么想修改图片的插入模式可以在 “文件》选项》邮件》编辑器选项》高级“中修改 具体位置如图
修改图片插入/粘贴的方式这种方法的限制很多，比如你将图片插入修改为“四周紧密型”，那么你插入的图片在编辑器中看不到，实际使用的时候是可以看见的。这就很别扭了，还有就是图片好像会成为附件，如果有你的照片你不想别人每次下载附件将你的照片下载过去吧·······
由于这种方法并不能满足我的需求，所以我找啊找找到了另一种方法

在Word中编辑好了复制过去

在word中编辑好图片文字的样式与排版，直接复制，然后到outlook编辑签名的编辑器中邮件粘贴，注意粘贴的时候选择保留源格式。
这样有一个问题，就是你新建邮件选择你的签名时会发现排版可能跟你的不一样，或者到手机上文字直接成了一个字一行的现象
所以也直接pass

直接在生成的文件上编辑

在后来一次偶然的机会我发现，每次新建签名就会在一个文件夹中生成四个文件，修改了这里面的文件也就修改了签名。所以我决定直接在源文件上修改。那个文件夹地址是：“C:\Users\×××\AppData\Roaming\Microsoft\Signatures”自己把×××换成自己的电脑用户名，如果不知道的话就Win+R，输入cmd，Users\后面的就是自己的电脑用户名。四个文件如下图：
四个源文件
其中.files文件是存放一些图片以及其他的几个必要文件；.htm文件就是代码源文件，类似于html；.rtf就是视图；.txt就是里面的纯文本。这里面最主要的就是files与htm。
所以我新建了一个空白签名，然后在htm里面修改代码，这需要一些html基础。把需要的图片放入files文件夹中。
但是这个有一个缺点，就是图片可能显示不了，你把图片放在服务器别人在outlook的PC端上看需要点击下载图片才能浏览，放在本地别人根本看不见。还有就是outlook限制了很多html的语法，很多样式什么的都不能用。
所以PASS

直接用word新建htm格式编辑

后来经过查找各种资料发现。word生成的htm文件其实是与outlook签名生成的htm类似的，他两的语法是一样的，毕竟是一家啊。还发现了任何签名其实对表格的适应性与兼容性是最好的。
所以我就用word新建了htm文件，然后用word编辑。首先是插入表格，然后在一整张表格中完成你的排版，添加图片什么得都没问题。排版完了之后，直接复制，到新建签名得编辑器中粘贴，注意保留源格式。。这里得图片插入模式要为嵌入式，怎么修改前面已经说了。
这种方法是最完美适应的！！！

图片不清晰问题

有时候会出现编辑的时候图片清晰，但是发送出去图片就模糊了；有两点：
1.修改图片的dpi为96，图片格式最好都为jpg吧 ，因为如果不是outlook会帮你改过来的；
2.插入的图片不要缩小，最好插入前就弄好像素大小，插入进去是怎样的大小就怎样。
否则都会被压缩。


蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


转自：cadn 作者：ME小鬼

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(2634)

前端开发框架与方案总结——蓝蓝设计

前端达人

在与客户的沟通中，聆听了许多建议，学习到了很多知识，也收到过赞美与批评，在经过千锤百炼过后  总结了一点点经验

首先：



框架选择

    网站css框架选择（简洁，节约成本，快速开发）

    对于一些简单静态网站，展示类网站项目，达到快速开发建站，而又节约成本人力的情况下 选择一些用于css库的框架最为合适，


1.Bootstrap

        Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

        预处理工具  虽然可以直接使用 Bootstrap 提供的 CSS 样式表，但是不要忘记，Bootstrap 的源码是采用最流行的 CSS 预处理工具

        一个框架、多种设备。 你的网站和应用能在 Bootstrap 的帮助下通过同一份源码快速、有效地适配手机、平板和 PC 设备，这一切都是 CSS 媒体 查询（Media Query）的功劳。

功能完备  Bootstrap 提供了全面、美观的文档，你能在这里找到关于普通 HTML 元素、HTML 和 CSS 组件以及 jQuery 插件方面的所有详细文档。

Bootstrap 是最受欢迎的 CSS 框架，被认为是拥有最好的响应性的CSS框架。专为前端开发而设计，有助于构建web设计理念、移动优先项目、网格系统、排版和按钮等。


iShot2021-05-31 10.55.29.png


2.layui

开源模块化前端 UI 框架

开源模块化前端 UI 框架

      由职业前端倾情打造，面向全层次的前后端开发者，易上手开箱即用的 Web UI 组件库

Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。


iShot2021-05-31 14.50.44.png


   3.Semantic-UI


Semantic 是一个开发框架，可以使用人性化的 HTML 帮助创建漂亮的响应式布局。Semantic UI 旨在使网站构建过程更加语义化。核心特征是利用自然语言原理使代码更易于阅读，更容易理解。

iShot2021-05-31 18.36.54.png

4.Pure

Pure 非常轻量级，经过压缩后不过 3.8KB。这是一个特别为移动端考虑的框架，为了压缩大小，每一行代码都经过仔细考量。当然如果你不使用框架给出的全部模块，体量还可以更小。

iShot2021-05-31 18.37.30.png

5.Skeleton

Skeleton 如其名字，非常小巧，设计简约，麻雀虽小五脏俱全。网格系统，文本，表单，按钮，列表，表格，媒体查询等功能面面俱到。非常适合快速创建简约网站的需求。


iShot2021-05-31 18.38.17.png


快速搭建

为客户节省时间成本， 并满足客户快速建站的需求，开发过程中 使用到css模块化,html也应简洁实用。

手写源生 CSS

在我们最初学习写页面的时候，大家都学过怎么去写 css，也就以下几种情况：

  • 行内样式，即直接在 html 中的 style 属性里编写 css 代码。
  • 内嵌样式，即在 html h 中的 style 标签内编写 class，提供给当前页面使用。
  • 导入样式，即在内联样式中 通过 @import 方法，导入其他样式，提供给当前页面使用。
  • 外部样式，即使用 html 中的 link 标签，加载样式，提供给当前页面使用。

我们在不断摸索中，逐渐形成了以编写内嵌样式和外部样式为主要的编写习惯。

读到这里大家肯定有所疑问，为什么不建议使用行内样式？

使用行内样式的缺点
  • 样式不能复用。
  • 样式权重太高，样式不好覆盖。
  • 表现层与结构层没有分离。
  • 不能进行缓存，影响加载效率。

然后我们继续剖析一下，为什么不建议使用导入样式？

经测试，在 css 中使用 @import 会有以下两种情况：

1、在 IE6-8 下，@import 声明指向的样式表并不会与页面其他资源并发加载，而是等页面所有资源加载完成后才开始下载。

2、如果在 link 标签中去 @import 其他 css，页面会等到所有资源加载完成后，才开始解析 link 标签中 @import 的 css。

使用导入样式的缺点 - 导入样式，只能放在 style 标签的第一行，放其他行则会无效。 - @import 声明的样式表不能充分利用浏览器并发请求资源的行为，其加载行为往往会延后触发或被其他资源加载挂起。 - 由于 @import 样式表的延后加载，可能会导致页面样式闪烁。

使用预处理器 Sass/Less

随着时间的不断发展，我们逐渐发现，编写源生的 css 其实并不友好，例如：源生的 css 不支持变量，不支持嵌套，不支持父选择器等等，这些种种问题，催生出了像 sass/less 这样的预处理器。

预处理器主要是强化了 css 的语法，弥补了上文说了这些问题，但本质上，打包出来的结果和源生的 css 都是一样的，只是对开发者友好，写起来更顺滑。

后处理器 PostCSS

随着前端工程化的不断发展，越来越多的工具被前端大佬们开发出来，愿景是把所有的重复性的工作都交给机器去做，在 css 领域就产生了 postcss。

postcss 可以称作为 css 界的 babel，它的实现原理是通过 ast 去分析我们的 css 代码，然后将分析的结果进行处理，从而衍生出了许多种处理 css 的使用场景。

常用的 postcss 使用场景有：

  • 配合 stylelint 校验 css 语法
  • 自动增加浏览器前缀 autoprefixer
  • 编译 css next 的语法

更多 postcss 使用场景

CSS 模块化迅速发展

随着 react、vue 等基于模块化的框架的普及使用，我们编写源生 css 的机会也越来越少。我们常常将页面拆分成许多个小组件，然后像搭积木一样将多个小组件组成最终呈现的页面。

但是我们知道，css 是根据类名去匹配元素的，如果有两个组件使用了一个相同的类名，后者就会把前者的样式给覆盖掉，看来解决样式命名的冲突是个大问题。

为了解决这个问题，产生出了 CSS 模块化的概念。

CSS 模块化定义

  • 你是否为 class 命名而感到苦恼？
  • 你是否有怕跟别人使用同样 class 名而感到担忧？
  • 你是否因层级结构不清晰而感到烦躁？
  • 你是否因代码难以复用而感到不爽？
  • 你是否因为 common.css 的庞大而感到恐惧？

你如果遇到如上问题，那么就很有必要使用 css 模块化。

CSS 模块化的实现方式

BEM 命名规范

BEM 的意思就是块（block）、元素（element）、修饰符（modifier）。是由 Yandex 团队提出的一种前端命名方法论。这种巧妙的命名方法让你的 css 类对其他开发者来说更加透明而且更有意义。

BEM 的命名规范如下： 

/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */ .block { } /* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */ .block__element { } /* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */ .block--modifier { }

通过 bem 的命名方式，可以让我们的 css 代码层次结构清晰，通过严格的命名也可以解决命名冲突的问题，但也不能完全避免，毕竟只是一个命名约束，不按规范写照样能运行。

CSS Modules

CSS Modules 指的是我们像 import js 一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性，通过这种方式，即可在使用时明确指定所引用的 css 样式。

并且 CSS Modules 在打包的时候会自动将类名转换成 hash 值，完全杜绝 css 类名冲突的问题。

使用方式如下：

1、定义 css 文件。 

.className { color: green; } /* 编写全局样式 */ :global(.className) { color: red; } /* 样式复用 */ .otherClassName { composes: className; color: yellow; } .otherClassName { composes: className from "./style.css"; }

2、在 js 模块中导入 css 文件。 

import styles from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">';

3、配置 css-loader 打包。

CSS Modules 不能直接使用，而是需要进行打包，一般通过配置 css-loader 中的 modules 属性即可完成 css modules 的配置。 

// webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, use:{ loader: 'css-loader', options: { modules: { // 自定义 hash 名称  localIdentName: '[path][name]__[local]--[hash:base64:5]', } } } ] } };

4、最终打包出来的 css 类名就是由一长串 hash 值生成。 

._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 { background-color: blue; }

CSS In JS

CSS in JS，意思就是使用 js 语言写 css，完全不需要些单独的 css 文件，所有的 css 代码全部放在组件内部，以实现 css 的模块化。

CSS in JS 其实是一种编写思想，目前已经有超过 40 多种方案的实现，最出名的是 styled-components。

使用方式如下： 

import React from "react"; import styled from "styled-components"; // 创建一个带样式的 h1 标签 const Title = styled.h1`  font-size: 1.5em;  text-align: center;  color: palevioletred; `; // 创建一个带样式的 section 标签 const Wrapper = styled.section`  padding: 4em;  background: papayawhip; `; // 通过属性动态定义样式 const Button = styled.button`  background: ${props => (props.primary ? "palevioletred" : "white")};  color: ${props => (props.primary ? "white" : "palevioletred")};   font-size: 1em;  margin: 1em;  padding: 0.25em 1em;  border: 2px solid palevioletred;  border-radius: 3px; `; // 样式复用 const TomatoButton = styled(Button)`  color: tomato;  border-color: tomato; `; <Wrapper> <Title>Hello World, this is my first styled component!</Title> <Button primary>Primary</Button> </Wrapper>;

可以看到，我们直接在 js 中编写 css，案例中在定义源生 html 时就创建好了样式，在使用的时候就可以渲染出带样式的组件了。

除此之外，还有其他比较出名的库：

  • emotion
  • radium
  • glamorous

总结

最后放一张总结好的图。




v2-0c8a8007eae08838730306aa8e03c677_1440w.jpg


下一篇我们讲一下主流js框架 与js开发


蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


部分借鉴自：知乎 作者：孟思行

原文链接：

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

评论(0) 浏览(2685)

Web前端：CSS最强总结 附详细代码

前端达人

Web前端总结：
Web前端：HTML最强总结 附详细代码
Web前端：CSS最强总结 附详细代码
Web前端：JavaScript最强总结 附详细代码

Web前端：CSS最强总结 附详细代码

基本知识

基本概念

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
层叠:多个样式可以作用在同一个html的元素上，同时生效

  • 样式定义如何显示HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个CSS很像化妆，通过不同的CSS将同样的HTML内容打造为不同的呈现结果。 所以，前端程序员相互表白的时候可以说:you are the CSS to my HTML. 这是不是CSS是对HTML进行美化和布局作用的最好总结?

优点

  1. 功能强大
  2. 将内容展示和样式控制分离
    降低耦合度。解耦
    让分工协作更容易
    提高开发效率

CSS的使用

CSS与html结合使用
根据定义CSS的位置不同，分为行内样式、内部样式和外部样式

行内样式

也称为内联样式
直接在标签中编写样式，通过使用标签内部的style属性;

代码样式：

弊端:只能对当前的标签生效，没有做到内容和样式相分离，耦合度太高。

内部样式

定义在head标签内，通过style标签，该标签内容就是CSS代码

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内部样式</title> <style> div{ color: red; } </style> </head> <body> <div>hello my css</div> </body> </html>

区别

  • 作用域的范围：外部样式表>内部样式表>行内样式表
  • 优先级：外部样式表<内部样式表<行内样式表;
  • 同样的样式作用在同一个标签身上：就近原则。
  • 不同样式作用在同一个标签身上，叠加生效。

CSS语法

基本格式由两个主要的部分构成：

  • 选择器
  • 一条或多条声明

基本选择器

筛选具有相似特征的元素

id选择器

选择具有相同id属性值的元素，建议html页面中的id值唯一

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

PS: ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

虽然多个元素可以使用同一个id选择器控制样式，但是不推荐。如果需要同样的样式对多个标签生效， 使用class选择器。

class选择器

选择具有相同的class属性值的元素。

  • class 选择器用于描述一组元素的样式，class 选择器有别于id选择器。
  • class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

PS：类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用

元素选择器/标签选择器

选择具有相同标签名称的元素。

定义选择器语法:标签名称{};PS:标签名称必须是html提供好的标签。

使用标签选择器:自动使用在所有的同名的标签上


优先级

选择器的优先级

ID选择器 > 类选择器 > 标签选择器
当多个选择器作用在同一个标签上的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效

样式表的优先级

行内样式 > 内部样式 >外部样式

同样，三个样式表中都有内容作用在同一个html标签的时候，如果属性冲突，看优先级；如果不冲突， 样式叠加生效

CSS常用样式

color：字体颜色

跟颜色相关的取值分3种:

  1. 颜色的单词 red blue…
  2. rgb(红，绿，蓝)三色的取值范围是0-255 rgb(255,0,0)
    rgba(红，绿，蓝,透明度)，透明度取值:0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
  3. #值1值2值3 :值的范式是00-FF 十六进制数字组成的 例如:#FF0000

width height：宽高

PS:只有块状元素可以设置宽高，行级元素设置不生效

取值方式有2种:

  • 数值 绝对数字 单位是像素PX
  • 百分比:占据父元素的比例

背景样式

在这里插入图片描述
在这里插入图片描述

文本样式

在这里插入图片描述

列表样式

在这里插入图片描述

边框样式

在这里插入图片描述

HTML&CSS调试利器

以谷歌浏览器为例说明。
快捷键F12或者工具条中的开发者工具调出以下内容。
在elements中可以看到当前页面的所有标签，在styles中可以看到html元素对应的样式。

交集选择器

条件:交集选择器由两个选择器构成，找到的标签必须满足:既有标签一的特点，也有标签二的特点。

语法:h3.class{ color:red; } 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，例如div.list。

交集选择器是并且的意思。 即…又…的意思

例如: table.bg 选择的是: 类名为 .bg 的 表格标签，但用的相对来说比较少。

后代选择器

概念
后代选择器又称为包含选择器。

作用
用来选择元素或元素组的子孙后代

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，再写儿子孙子。

格式:父级 子级{属性:属性值;属性:属性值;}
语法:.class h3{color:red;font-size:16px;}

当标签发生嵌套时，内层标签就成为外层标签的后代。 子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

子元素选择器

作用:子元素选择器只能选择作为某元素子元素(亲儿子)的元素。 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。
语法:.class>h3{color:red;font-size:14px;}
比如：
.demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3


转自：csdn论坛 ，

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(2860)

postMessage跨域、跨iframe窗口消息传递

前端达人

文章目录

  1. 作用
  2. 语法
  3. 使用
  4. 兼容性
  5. 应用场景

    说起postMessage 可能平时大家也不遇到，但是如果遇到问题了，又想不起它，这里记录下防止后面忘记它。




  6. 作用

    window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。



    通常情况下，受浏览器“同源策略”的限制跨域问题一直是个问题，window.postMessage()提供了一个受控的机制来安全地规避这个限制（如果使用得当的话）。


  7. 语法

    一般来说，一个窗口可以获得对另一个窗口的引用(例如，通过targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派发MessageEvent。接收窗口随后可根据需要自行处理此事件，传递给window.postMessage()的参数通过事件对象暴露给接收窗口。



    基本语法：



    targetWindow.postMessage(message, targetOrigin, [transfer]);

    1

    targetWindow

    targetWindow就是接收消息的窗口的引用。 获得该引用的方法包括：



    Window.open

    Window.opener

    HTMLIFrameElement.contentWindow

    Window.parent

    Window.frames +索引值

    message

    要发送到目标窗口的消息。 数据使用结构化克隆算法进行序列化。 这意味着我们可以将各种各样的数据对象安全地传递到目标窗口，而无需自己对其进行序列化。



    targetOrigin

    定目标窗口的来源，必须与消息发送目标相一致，可以是字符串或URI。 表示任何目标窗口都可接收，为安全起见，请一定要明确提定接收方的URI。如果为"*"则都可以接收。



    transfer

    可选属性。是一串和message同时传递的Transferable对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。


  8. 使用

    postMessage程序



    var receiver = document.getElementById('receiver').contentWindow;

    var btn = document.getElementById('send');

    btn.addEventListener('click', function (e) {

        e.preventDefault();

        var val = document.getElementById('text').value;

        receiver.postMessage("Hello "+val+"！", "http://www.xxx.com");

    }); 



    接收端



    window.addEventListener("message", receiveMessage, false);

    function receiveMessage(event){

      if (event.origin !== "http://www.xxx.com")

        return;

    }



    event对象有三个属性，分别是origin，data和source。event.data表示接收到的消息；event.origin表示postMessage的发送来源，包括协议，域名和端口；event.source表示发送消息的窗口对象的引用; 我们可以用这个引用来建立两个不同来源的窗口之间的双向通信。


  9. 兼容性



    总体兼容性还是很好的！




  10. 应用场景

    跨域通信(包括GET请求和POST请求)

    WebWorker

    vue项目中使用到了iframe并且需要传递参数



    ————————————————

    版权声明：本文为CSDN博主「zy1281539626」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

    原文链接：https://blog.csdn.net/zy1281539626/article/details/114934551


    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


评论(0) 浏览(2265)

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档