![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
酷酷的橙007
哈尔滨工业大学控制科学与工程专业博士在读,前端工程师,算法工程师
展开
-
30个最常用的CSS选择器
原创 2020-08-19 21:52:11 · 147 阅读 · 0 评论 -
记录一个自定义滚动条样式
#charts_store_main::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 4px; background-color: #f5f5f5;}#charts_store_main::-webkit-scrollbar { width: 8px; height: 6px; background-color:原创 2020-08-04 14:07:55 · 128 阅读 · 0 评论 -
利用div+css3实现一个背景渐变的button按钮
随着目前前端页面的需求不断提升,有些场景需要渐变背景的元素。本文利用div和css3新属性,实现了一个背景渐变的按钮,具体如下:background: linear-gradient 背景为渐变色属性利用css3中动画特性animation,实现背景从左至右变化(color_move)为了实现渐变效果,将background的宽度拉长至400%上代码:html:<div class="btn_demo"> <div class="text">体 验</div&原创 2020-07-03 22:19:08 · 938 阅读 · 0 评论 -
自己封装的Switch Button(Vue组件,checkbox改装),同时解决父子组件的事件冒泡问题的新思路
用一晚上的时间自己封装了一个Switch button组件,因为ElementUI里面那个是在是太难用了,尤其是其父组件也有点击事件的时候,解决冒泡问题真是让人头秃。。。本组件用checkout button改编的,不具有点击事件,父元素点击时,可以切换是否checked。本博客方案也为事件冒泡问题提供了一个解决方案,也就是说,尽量让父子组件只有一个有点击事件,要不然只能让子组件有点击事件,然后让子组件通过@click.stop方式禁止冒泡,即,父组件就不具有点击事件了。这里我们希望点击子组件,父原创 2020-06-11 23:55:57 · 420 阅读 · 0 评论 -
关于checkbox标签已有checked=checked属性但是不显示勾选问题【亲测好用】
本人在做项目过程中,用到switch button(CheckBox改造的)组件,开始时写如下代码,标签上明明有checked= checked属性,但是,就是不打勾。add_prop() { console.log(this.num) if (this.num == 0) { document.getElementById('aaaa').setAttribute('checked', 'checked') this.num = 1 } else原创 2020-06-11 23:33:35 · 2079 阅读 · 0 评论 -
移动WEB开发之rem适配布局
1. rem基础rem单位rem(root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小比如,根元素(html)设置 font-size=12px;非根元素设置width: 2rem,则换成px表示就是24px。总结:em相对于父元素的字体大小来说的rem相对于html元素字体大小来说的rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小,可以整体控制2. 媒体查询2.1 什么是媒体查询媒体查询( M原创 2020-06-01 11:10:49 · 452 阅读 · 0 评论 -
移动WEB开发之流式布局
学习目标能够知道移动web的开发现状能够写出标准的viewport能够使用移动web的调试方法能够说出移动端常见的布局方案能够描述流式布局能够独立完成京东移动端首页1. 移动端基础1.1 浏览器现状PC端常见浏览器360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器、以及其他杂牌浏览器。国内的UC和QQ,百度等手机浏览器原创 2020-05-31 19:36:43 · 1862 阅读 · 0 评论 -
移动WEB开发之flex伸缩布局
学习目标能够说出flex盒子的布局原理能够使用flex布局的常用属性能够独立完成携程移动端首页案例1. flex布局体验1.1 传统布局与flex布局传统布局兼容性好布局繁琐局限性,不能在移动端很好的布局flex弹性布局操作方便,布局极为简单,移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本,不支持或仅部分支持建议:如果是PC端页面布局,我们还是传统布局如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局1.2 初体验&原创 2020-05-30 10:45:44 · 611 阅读 · 0 评论 -
HTML5 + CSS3新特征
HTML51. 什么是HTML5简介1.1 HTML5简介万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。作为新HTML语言,具有新的元素,属性和行为。XHTML和HTML5区别:XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。我们基础班学习的是 XHTMLHTML5有更大的技术集,允许更多样化和虽大的网站和应用程序。增加了新特性:语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特效特性,原创 2020-05-29 17:56:59 · 829 阅读 · 4 评论 -
Webpack简单安装及项目打包
Webpack介绍Webpack是一款模块加器打包工具,它能把各种资源,如JS、J5X、ES6、SASS、LESS图片等都作为模块来处理和使用。安装webpack安装:cnpm install webpack -gcnpm install webpack-cli -g测试安装成功:执行下面两个代码,显示版本号,即为成功webpack -vwebpack-cli -v配置创建webpack.base.config.js配置文件entry:入口文件,指定webpack用哪个文件原创 2020-05-16 21:46:08 · 464 阅读 · 0 评论 -
利用Node.js爬取简单页面数据
当某些网站限制打开控制台爬取页面内容时,可以通过node向服务器发送请求,爬取我们想要得到的页面文件内容。爬取简单页面内容这里以百度为例:项目目录中生成package.jsoncnpm init -y项目目录下安装requests包cnpm i requests --save-dev爬取页面内容主文件(index.js):let requests = require('requests') // 请求包let fs =require('fs') // 读写文件let pa原创 2020-05-19 17:23:33 · 1942 阅读 · 2 评论 -
Web前端基础回顾(HTML、CSS)
目录前言(前端介绍)Web开发HTML常用标签介绍前言(前端介绍)Web开发网页,交由浏览器运行的程序组成:HTML CSS JavaScript开发前准备:编辑器:Vscode、Pycharm、Sublime、NotePad、EditPlus…运行环境:浏览器 Chrome Firefox调试工具:浏览器自带开发者工具浏览器分类:按照浏览器内核(引擎):Chrome F...原创 2020-04-29 22:26:30 · 340 阅读 · 0 评论 -
利用flex实现元素水平垂直居中
首先介绍一下flex布局。采用Flex布局的元素,称为Flex容器(flex container),简称“容器”。它的所有子元素自动成为容器成员,成为flex项目(flex item),简称“项目”。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框 的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始...原创 2019-07-19 13:43:39 · 14357 阅读 · 0 评论 -
CSS中元素居中的几种方式
我们在调整页面样式的过程中,经常需要元素居中,包括字体水平/垂直居中,块级元素(如div)的水平/垂直居中,今天就来介绍一下以上提到的几种居中实现方式。块级元素居中先给出html:<div class="father"> <div class="son"> </div></div>如果只是想让一个元素水平居中,在没有浮动的...原创 2019-07-15 13:46:36 · 1839 阅读 · 0 评论 -
关于浮动介绍和清除浮动的几个方法
我们都知道,块级元素是单独占一行的。有时候我们希望让多个块级元素排在一行显示,其中一个方法就是让元素浮动,也就是今天要说的float属性。float属性包含3个属性值:元素设置float属性,属性值为left或者right时,该元素会脱离原本的文本流,向包裹的父元素左/右浮动。举个例子:首先设置一个父元素,class=“father”,父元素中包含5个子元素,class=“son son...原创 2019-07-14 11:50:38 · 350 阅读 · 3 评论 -
利用jquery编写文字水平的滚动字幕(跑马灯)
给大家推荐一个用jQuery编写的滚动字幕程序,有的人也叫跑马灯程序。这个程序相对于传统跑马灯程序增加了文字滚动速度调节、显示一段时间后消失、鼠标移入停止、鼠标移出继续滚动等功能,同时修改了刷新界面时会先闪现一下字幕内容的bug。本程序基于jquery-3.4.0.min.js插件版本,废话不多说,直接上代码。HTML: <div id="container_small_tip">...原创 2019-06-16 19:16:56 · 3677 阅读 · 0 评论 -
圣杯布局和双飞翼布局对比
摘要今天在刷某公司前端笔试题时,遇到一个编程题,实现双飞翼布局和圣杯布局。双飞翼布局和圣杯布局主要描述的是上下header,中间宽度自适应,左右宽度固定的一类布局方式。这两种布局方式是公司笔试或面试中最基础的也是必考的知识点,因此在这里记录一下,方便以后复习。HTML结构对比双飞翼布局和圣杯布局其实最后的效果是一样的,css样式上也基本类似,但是在设计时还是有明显不同的。简单来说,首先对于H...原创 2019-05-16 09:24:01 · 274 阅读 · 0 评论