网页常见效果
文章平均质量分 56
王永存
大道至简
展开
-
window.print() 前端实现网页打印详解
https://blog.csdn.net/qq_38128179/article/details/103344021原创 2021-06-30 17:40:14 · 237 阅读 · 0 评论 -
iframe嵌套 video标签 全屏按钮无法使用
在iframe里添加一个属性 :allowfullscreen="true" 即可原创 2019-12-10 15:20:51 · 2455 阅读 · 0 评论 -
一行css代码搞定响应式布局
CSS Grid 网格布局教程:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量。最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-s...转载 2019-11-16 22:08:50 · 170 阅读 · 0 评论 -
程序员的快速开发框架:Github上 10 大优秀的开源后台控制面板
Web 开发中几乎的平台都需要一个后台管理,但是从零开发一套后台控制面板并不容易,幸运的是有很多开源免费的后台控制面板可以给开发者使用,那么有哪些优秀的开源免费的控制面板呢?我在 Github 上收集了一些优秀的后台控制面板,并总结得出 Top 10。vue-Element-AdminGithub Star 数 19546, Github 地址: https://github.com/Pa...原创 2019-01-09 16:39:04 · 4213 阅读 · 1 评论 -
去除谷歌浏览器记住账号密码的input框黄色背景
input框记录密码背景是黄色,如下图,这样看起来很那看。百度方法解决了。加入这个css属性即可。input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}...原创 2018-08-15 10:34:35 · 1613 阅读 · 0 评论 -
js上下文字无缝滚动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="demo" style=&qu原创 2018-07-11 16:05:47 · 1608 阅读 · 0 评论 -
左右滑动导航栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .warp{width:100%; max-widt原创 2018-03-08 17:57:52 · 4230 阅读 · 0 评论 -
点击播放暂停音乐
要实现的效果:播放音乐时,下图音乐盘匀速旋转,点击暂停播放音乐,暂停旋转;再点击继续播放音乐,继续旋转。1、html代码<div> <audio src="./xiaotiaowa.mp3" autoplay id="audio" controls="controls" preload hidden></audio> <img id='原创 2018-03-08 16:44:16 · 3266 阅读 · 3 评论 -
点击返回顶部(滑动效果)
点击返回顶部手机端和PC端很多需求需要做点击返回顶部,例如下图:当网页被卷上去的高度大于绿色方框的高度时,显示点击返回顶部的按钮,点击之后,返回当顶部。 代码:1、html代码(自己找一张点击返回顶部的图片) 2、CSS代码(用固定定位,其他样式根据要求自己调整) .back_top{ position:原创 2018-01-10 16:33:29 · 9572 阅读 · 0 评论 -
电脑PC页面和手机移动页面适配跳转
电脑PC页面和手机移动页面适配跳转html页面,涉及到检测终端的问题,如果是电脑端,就跳到PC版页面;如果是手持端设备,就跳转到指定的shou网页上。方法一、@media screen思路:css使用媒体查询,当屏幕小于760px时,使某个元素的样式发生改变,然后通过js检测到这个改变,就可以知道现在切换到移动端了css代码:1转载 2018-01-22 16:18:06 · 5340 阅读 · 0 评论 -
div模拟textarea文本域轻松实现高度自适应
div模拟textarea文本域及高度自适应使用很简单,一个普通的block元素上加个contenteditable="true"就ok了,如下: true外面的引号甚至去掉都没关系。contenteditable属性虽是HTML5里面的内容,但是IE似乎老早就支持此标签属性了。所以,兼容性方面还是不用太担心的。ok,最麻烦的模拟textarea的可编辑转载 2017-12-07 10:40:22 · 439 阅读 · 0 评论 -
点击导航,滑动到网页中的指定位置(JS实现滑动锚点定位)
在一个网页页面中,可能会分为很多的模块内容,当我点击导航栏的某一项时,希望显示对应的内容,例如,点击下图导航中的报告服务后,希望网页滑动到 “报告服务” 的模块,点击城市品牌滑动到“城市品牌”的模块。城市品牌模块js代码 $(function () { //获取城市模块到顶部的距离 var city_top = $('#ci原创 2018-01-10 17:27:53 · 20378 阅读 · 1 评论 -
css实现三角形
css实现三角形一、html代码定义一个元素 二、利用div+before+after实现如下图效果: 利用after和before各实现一个三角形,after的index大于before。通过移位,覆盖即可实现此效果。 .arrow{ width: 100px; height: 100px;原创 2018-01-11 09:59:24 · 748 阅读 · 0 评论 -
实现两个div,左边固定div宽度200px,右边div自适应
/*方法一: BFC(块级格式化上下文)*/ .container{ width:1000px;height:400px;border: 1px solid red; } .left{ width:200px;height:100%;background: gray; float: left;转载 2017-12-15 11:30:49 · 488 阅读 · 0 评论 -
图片懒加载
图片懒加载当网站的要显示的图片比较多的时候,要请求的次数比较多,会增加用户的等待时间,利用懒加载可以大大提高用户的体验。懒加载思路:当图片出现的时候,加载图片。如果用户没有继续往下浏览,下面的图片就不加载。html5定义的data-*属性允许我们在标签内来嵌入自定义数据,这样我们就可以将img的标签内的src里的图片地址放到data-xx里边存储。如果src为空的话,就不会被请求。当图原创 2017-12-22 09:57:59 · 542 阅读 · 0 评论 -
html页面内容的收缩和展开效果
html页面内容的收缩和展开效果常见的网页中,会见到收缩和展开的效果。比如经常浏览网页里的新闻内容就会经常看到这种效果,新闻的内容只显示少数的一部分,然后后面会跟一个展开的链接,点击这个链接才会显示全部的新闻内容。1、收缩情况下显示内容效果2、点开之后显示的内容效果3、实现的代码如下:<!DOCTYPE html><html lang="e...原创 2020-02-08 12:16:46 · 34742 阅读 · 9 评论