![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML+CSS
废柴小z
这个作者很懒,什么都没留下…
展开
-
控制图片缩放移动
鼠标滚轮缩放图片,双指移动缩放图片鼠标移动拖动图片,单指移动拖动图片Vue.component('imgControler', { props:{ imgsrc: String }, data: () => { return { isWin: isWin, imgscale: 3, imgLeft: 0, imgTop: 0,原创 2022-03-14 20:01:40 · 1850 阅读 · 0 评论 -
loading图库
好看创意的loading其他:https://www.digitaling.com/articles/29206.htmlhttps://www.lanrentuku.com/gif/a/loading.htmlhttp://www.sucaijishi.com/gif-11-57-1.html原创 2021-12-22 16:39:26 · 73 阅读 · 0 评论 -
党建大屏common.js
function resetRem(){ let rootWidth = document.documentElement.clientWidth || document.body.clientWidth; let rootDom = document.querySelector('html'); rootDom.style.fontSize = rootWidth / 1920 * 10 + 'px';}resetRem();function forbidMenu(){.原创 2021-12-08 13:38:14 · 195 阅读 · 0 评论 -
rem适配
设计图分辨率为1920*1080时,onload后或created钩子函数内执行function resetRem(){ let rootWidth = document.documentElement.clientWidth || document.body.clientWidth; let rootDom = document.querySelector('html'); rootDom.style.fontSize = rootWidth / 1920 * 10 + 'px'原创 2021-03-11 20:48:42 · 146 阅读 · 0 评论 -
position和float如何影响元素类型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>position与float</title></head><body><!-- position:static,absolute,relative,fixed; --><!-- 知识点一 --> <!-- 定位原创 2021-02-14 09:57:12 · 123 阅读 · 0 评论 -
CSS3立体文字最佳实践
原文地址:https://www.cnblogs.com/lcchuguo/p/5202698.html1.单单纯纯的效果一为了简化操作。我们使用和上一篇文章《纯CSS3文字效果推荐》一样的文档结构,后面的效果大差小不差。也就不再列出。前端开发whqet css里面还是首先来全局的设置,依旧和上一篇文章大差小不差,只是为了避免视觉疲劳,我们改动了背景颜色和文字颜色。body{ background-color: #666; } @import url(http://fonts.转载 2020-08-19 17:01:14 · 660 阅读 · 0 评论 -
css实现三角形以及不规则多边形
实现如下多边形方法一:<div class="container"> <span class='trangle-lt'></span> <span class='trangle-rb'></span> </div>.container{ width: 200px; height: 200px; background-color: pink;原创 2020-07-23 10:14:03 · 643 阅读 · 0 评论 -
css实现超过两行用...表示
display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;原创 2020-04-10 17:15:05 · 3730 阅读 · 0 评论 -
顶部和底部高度固定,中间高度自适应
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>头尾固定中间高度自适应布局</title> <style> html, body { height:100%; margin:0; padding:0; } #...原创 2020-03-19 19:28:50 · 907 阅读 · 0 评论 -
sass基础
Compass由SASS的核心团队成员Chris Eppstein创建,是一个非常丰富的样式框架,包括大量定义好的mixin,函数,以及对SASS的扩展。CSS预处理器(CSS Preprocessor),是一种构架于css之上的高级语言,可以通过脚本编译生成CSS代码SASS 2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受...原创 2019-12-03 18:17:31 · 299 阅读 · 0 评论 -
移动端适配方案
尺寸:超小屏:768以下;小屏:768-992中屏:992-1200宽屏:1200以上;适配方案方案一:百分比布局方案二:bootstrap方案三:媒体查询方案四:flex布局方案五:rem适配动态计算html的字体大小的公式如下:rem = document.documentElement.clientWidth * dpr / 10说明:1.乘以...原创 2019-12-03 18:10:58 · 128 阅读 · 0 评论 -
圣杯布局 & 双飞翼布局
圣杯布局方法一: .container{ position:relative; } .middle{ background-color: deeppink; width:100%; height:200px; box-sizing...原创 2019-12-03 17:48:31 · 123 阅读 · 0 评论 -
元素居中方法
方法一:.container{ width:500px; height:500px; display:flex; background-color: red; justify-content:center; align-items:center; ...原创 2019-12-03 17:43:22 · 81 阅读 · 0 评论 -
清除浮动的三种方法
方法一://浮动元素底部加一个空<div class='clear'></div>.clear{clear:both;overflow:hidden;height:0}方法二:给浮动元素父元素设置overflow:hidden触发bfc(块级格式化上下文)方法三:(推荐) .clearfix:after{content:'';display:bloc...原创 2019-12-03 17:37:30 · 127 阅读 · 0 评论