wangweiscsdn的博客

社交媒体分享链接时的预览图片和内容

针对各个媒体的分享js

领导看到pdf的菜单栏不舒服，要你隐藏在pdf链接上拼接“#scrollbars=0&toolbar=0&statusbar=0”即可eg:https://shshhdk/shsjjs/test.pdf#scrollbars=0&toolbar=0&statusbar=0隐藏后，领导开心啦！...

拖拽其实用h5的设置元素draggable就可以了，看代码就可以了拖拽容器import React from 'react';// 拖拽容器const Draggable = props => { const { dragRef, dragItem, handleDragStart } = props const img = new Image(); img.src = 'https://drag.png'; // 拖拽时的图片可以更改，一定要先设置src，再setDragIma

*## Websocket 是什么？WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。跟http一样是一种协议跟SOCKET、HTTP有什么区别呢？HttpHTTP是单向的，客户端发送请求，服务器发送响应。举例来说，当客户端向服务器发送请求时，该请求以HTTP或HTTPS的形式发送，在接收到请求后，服务器会将响应发送给客户端。每个请求都与一个对应的响应相关联，在发送响应后客户端与服务器的连接会被关闭。每个HTTP或HTTPS请求每次都会新建与服务器的连接，

下载图片先看看效果图其实就是运用a标签的download属性，href就是图片的地址import React, { useState } from 'react'import './index.scss'import fly from '../../api/flyio'/** * type, 7：职位详情的分享 */export default ({ userInfomation = {}, type, isVisible, handleToggleLayer, jobid = '

代码如下： .big{ width: 200px; height: 200px; text-align: center; vertical-align: middle; line-height: 200px; margin: 0

啥都不说上代码： 居中 .d1 { position: fixed; bottom: 0; left: 0; width: 100%; height: 300px; background-color: green;

方法一：IE6~IE8支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。方法二：可以直接使用成熟的框架、比如html5shiv;

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。（4）

直接上代码：用flex布局 头尾部固定*{ margin: 0; padding: 0;} .container{ display: flex; display: -webkit-flex; min-height: 100vh; flex-direction: column; text-align: center; fon

先看效果图：内容少的时候：内容多的时候：这是设计稿上的需求，有三个div，本来我用的是position定位，然而这3个div的内容是动态变化的，有时多，有时少，不能定死高度。所以用position定位就没办法满足需求了。只能用浮动了。HTML代码如下： //清除浮动用的 CSS代码如下：.StepContent{ padd

这个是真的坑！！！！！！！！！！！1、先看看正常页面长什么样子，号码是我乱输入的，大家不要乱打= =2、然后再看看输入号码后键盘把这个订单确认的框顶上去了，顶上去对大屏幕手机也没关系，就是对小屏幕手机会把订单确认订到被隐藏一些。点击键盘的下符号后，键盘收起来，但是订单确认这个框就被定位上去了，需要点击一下才能恢复原样。 3、查阅大量资料，呕心沥血，加了点代码，先来看看效果，这样键盘出来就...

代码如下：JS方式: bb aaaaaaaaaaa bbbbbbbbbb ccccccccccc dddddddddd 直接根据id或者name属性:

前端已经被玩儿坏了！像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来。现分类整理出来分享给大家，也补充了一些平时的积累和扩展了一些内容。HTML篇浏览器地址栏运行

css代码如下：body{ width:100%; height:200px; background: -webkit-gradient(linear, 0 0, 0 0, from(#F6F4EF), to(#F1EDE6)); background: -webkit-linear-gradient(left,#F1EDE6, #F6F

刚开始学pug的时候有点不明白，然后各种搜索，后来才知道pug就是jade，原名叫jade，现在更名为pug而已。可能刚改名没有多久吧，搜pug资料很少。我也刚开始学习，希望对大家会有帮助。1、首先要通过node.js的npm来安装pug，直接在cmd里面输入npm  install  -g pug  前提是你安装了node和npm (网上安装教程很多，这里就不赘述了)，还需要安装cli  

不用JavaScript就能实现聚焦和不聚焦、输入有效值的状态切换首先来看看代码： .send{ display:none; } .input:focus ~ .send{ //表示input框聚焦后且是有send类选择器的标签 display:inline-block; } .input:valid ~ .send{ //表示input

简单粗暴上代码： .input{ width:200px; height:30px; border:1px solid grey; } .input:empty::before{ color:lightgrey; content:attr(placeholder); }

用单选框的:checked伪类和相邻选择器实现代码如下： input, .table-content{ display:none; } #tab1:checked ~ #content1, #tab2:checked ~#content2{ display:block; } TAB1 TAB2 CONTENT11 6666

如果.list里面的li元素大于等于4，则显示红色，并且字体变成30px .list li:nth-last-child(n+4) ~ li, .list li:nth-last-child(n+4):first-child{// color:red; font-size:30px; } 1 2 3 43 43r -->可以把注

1、cite用法：这是一段话我会变斜体2、blockquote用法：blockquote>块引用块引用块引用引用小标题blockquote>3、dl、dt、dddl>dt>Description 1dt>dd>Item 1dd>dt>Description 2dt>dd>Item 2dd>dl>

用CSS和JS改变z-index的属性值就可以实现模态框 modal box*{ margin:0px; padding:0px;} 弹框 欢迎你登录 document.getElementById("modal-box").onclick=function()//点击按钮改变zIndex的值为1让模态框在背景图的前面{

html代码如下： + 0 - css代码如下：.button { background-color: white; border: 4px solid #

用reveal.js和HTML5制作幻灯片，炫到没朋友！1、首先下载reveal.js，然后引入2、在index.html里面引入css和js，我写的简单demo如下： Single Horizontal Slide Vertical Slide 1 Vertical Slide 2

一定要引入jQuery，代码如下： .container{//整个容器的样式 display:block; position:fixed; z-index: 13; } .d1{//红色部分的样式 position:fixed; z-index:999999; overflow:hidden;; bottom:

代码如下，div里面放图片就好了 图片适应 body{ min-width: 1000px;//设置最小宽度，这样图片才不会乱掉 } .div{ width: 1000px; height: 200px; margin: 0 auto; } .divimg{ //如果放了图片就不用设置高度、宽度、边

html代码如下： 1、 这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大段文字这是一大

垂直下拉菜单 *{margin:0;padding:0;} .ul1{ text-decoration: none; list-style: none; float: left; margin: 30px 50px; } .ul1 li{ width: 50px; position: relative; padding

1、display:block是指该元素变为块级元素，独占一行，可以设置height、width属性，也可以设置margin、padding属性2、display：inline是指该元素变为行内元素，会和其他相邻行内元素在同一行，直到本行满了会换下一行，宽度随元素的内容变化，设置height、width属性无效，水平方向的margin和padding设置有效，垂直方向margin和paddin