共享博客 - 简单搜索

css布局分栏布局介绍

2024年04月09日 1. 设置栏数语法:column-count: 数值;2. 设置每栏的宽度语法:column-width: 数值+单位; 注: column-count 和 column-width 设置其中一个即可3. 设置栏间距语法:column-gap: 数值+单位;4. 设置栏间隔线语法:column-rule: 宽度线型(solid/dashed/dotted) 颜色; eg:column-rule: 2px solid r

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

css布局弹性布局介绍以及 flex容器属性

2024年04月09日弹性布局语法:display: flex; 设置弹性布局需要注意的四点: 1. 当给一个元素设置了 display: flex; 后，该容器就成为了弹性盒; 2. 当容器设置了 flex 后，子元素的 float、clear、vertical-align 将会失效; 3. 我们把设置 display: flex; 的元素称之为 flex 容器，把里面的子元素称为 flex 项目; 4. 当给元素设置了 flex 布

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

Css布局响应式布局介绍

2024年04月09日 1. 概念: 写一套css样式可以同时适配多个终端，是为解决移动互联网诞生的。2. 作用: 面对不同的分辨率设备灵活性强，能够快捷解决多设备显示适应问题3. 原理媒体查询 ① 外联式媒体查询语法<link rel="stylesheet" type="text/css" media="screen and (min-width: 960px)" href="red.css"/

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

Css变形其他一些变形属性的语法以及使用

2024年04月09日 1. 改变变形元素中心位置语法:transform-origin: left | right | center top | center | bottom;2. 变形综合将多种变形综合在一起时，顺序不一样，效果有可能不一样 eg:transform: rotate(360deg) scale(1.5); transform: scale(1.5) rotate(360deg); 顺序改变，效果不变 eg:transform: transl

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

Css3过渡动画 transition 属性介绍以及使用

2024年04月08日语法:transition: 过渡属性过渡时间过渡方式过渡延迟时间;1. 过渡属性( transition-property ) 取值: all: 所有发生改变的css属性都添加过渡 ident: 指定css属性过渡列表 none: 没有css属性过渡 eg:transition: all 1s; transition: transform 1s,background 2s;2. 过渡时间( transition-

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

Css3动画 animation 属性介绍以及使用

2024年04月08日语法:animation: 动画名称动画执行一次所需时间动画延迟执行时间动画播放次数动画执行状态动画播放后的状态;eg:animation: box_ani 10s 2s infinite paused forwards;1. 动画名称( animation-name ) eg:animation: person 1s; 注: 此处的动画名称要与动画关键帧定义的动画名称一致2. 动画执行一次所需时间( animation-duration ) 取值

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

Css3圆角 border-radius属性介绍以及使用

2024年04月08日语法:border-radius: 数值+单位;1. 设置一个值border-radius: 20px; 四个方向的圆角均为20px2. 设置两个值border-radius: 10px 50px; 左上角和右下角为10px; 右上角和左下角为50px3. 设置三个值border-radius: 10px 100px 50px; 左上角为10px; 右上和左下为100px; 右下为50px4. 设置四个值border-radius: 0px 10px 50p

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

文本阴影 text-shadow 与盒阴影 box-shadow 属性语法介绍

2024年04月08日文本阴影语法:text-shadow: 水平偏移量垂直偏移量模糊度颜色值; 水平偏移量: 向左为负，向右为正垂直偏移量: 向上为负，向下为正模糊度: 不允许设置负值，为0没有模糊度 eg:text-shadow: 5px 5px 8px #333, 8px 8px 8px #999; 注: 多组值之间用逗号隔开鹏仔小扩展: 给文本添加边框(描边字体)-webkit-text-stroke: 3px red;盒阴影语

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

使用分栏布局实现瀑布流效果纯css实现瀑布流效果

2024年04月08日本次，使用纯css实现瀑布流，方便简单快捷。下面我简单写了一个demo分享给大家其中 column-count 用来设置列数 column-gap 用来设置列间距 break-inside: avoid; 避免在元素内部断行并产生新列附代码如下:<style> body{ width: 100%; height: 100%; background: #000; } .box{ width: 600px;

前端 css

移动端判断用户使用 IOS 还是 android 进行访问

2024年04月08日这次项目是用vue一个webApp，有个升级功能，升级时候需要判断用户使用的苹果手机还是安卓手机访问，如果是安卓，进入安卓的下载地址，如果是苹果进入苹果的，那么就需要判断下用户到底使用的 IOS 还是 android。附代码如下//判断ios还是安卓 var u = navigator.userAgent; //IOS端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //android端 v

前端 JS JavaScript

移动端常见的适配不同屏幕大小的方法有哪些？

2024年04月08日响应式布局简而言之，就是页面元素的位置随着屏幕尺寸的变化而变化，通常会用百分比来定位，而在设计上需要预留一些可被“压缩”的空间。Cover布局就跟background一size的cover属性一样，保持页面的宽高比，取宽或高之中的较小者占满屏幕，超出的内容会被隐藏。此布局适用于主要内容集中在中部，边沿无重要内容的设计。Contain布局同样，也跟background一size的contain属性那样，保持页面的宽高比，取宽或高之中的较大者占满屏幕，不足

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

四种常用方法设置不定/定宽高元素在窗口/父元素中水平垂直居中方法

2024年04月08日一、定宽高元素在屏幕窗口水平垂直都居中，方法如下：元素{ position: fixed; left: 50%; top: 50%; /*负值+宽的一半+单位*/ margin-left: -width/2+px; /*负值+高的一半+单位*/ margin-top: -height/2+px; }二、不定宽高元素在屏幕窗口水平垂直都居中，方法如下(此方法需要满足自身包含尺寸的元素，例如图片等)：元素{ position: fixed;

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

伪元素 before、after的介绍和元素隐藏不可见的两种方式区别

2024年04月08日伪元素1.元素 before 在父元素中所有子元素的开头添加一个伪元素 eg:.box:before{ content: "SharedBlog"; 或 content: url(img/1.jpg); }2.元素 after 在父元素中所有子元素的最后添加一个伪元素 eg:.box:after{ content: "百变鹏仔"; display: block; widt

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS

vue和elementUI 中 el-table 的数据如何导出Excel

2024年04月08日最近在用 vue 和 elementUI 做后台管理系统，刚好遇到将后台管理中一些用户信息的数据要导出来，生成Excel表格下载，刚好给大家分享下方法。首先，我们需要使用下面命令安装下相关依赖npm install --save xlsx file-saver接着，我们在组件中引入import FileSaver from 'file-saver' import XLSX from 'xlsx'最后在methods写入下面方法//导出

前端 JS JavaScript vue ElementUI

CSS常见的三种布局模型流动（flow）、浮动（float）、层模型（layer）

2024年04月08日 1.流动模型（Flow）在网页没有设置css样式时的布局模型，html元素根据自身的特性显示在网页中，块元素自上而下排列，内联元素在一行逐个进行显示。2.浮动模型（Float）对于块元素：脱离正常的文档流，不占据空间，在一行逐个进行显示。对于内联元素：可以设置宽、高、margin、padding 等属性。3.层模型（Layer）定位布局语法：position: static | absolute | relative | f

懒猪前端开发前端博客个人博客网站制作鹏仔先生百变鹏仔 HTML CSS javascript JS