捕鱼麦大叔-CSDN博客

原创 Atom中七个实用React插件

提前下载好Atom并安装，打开setting > install, 出现界面如下：直接在Search packages中搜索需要的插件即可插件一： atom-ternjs JS ES6新语法支持，代码智能提示补全插件二：atom-beautify 代码美化格式工具插件三：open in browser 将HTML代码一键在浏览器中打开插件四：emmet 自动一键补全代码插件五：fil...

2018-07-02 15:40:24 3345

原创 jQuery实现滚动公告栏特效

效果：HTML:<span class="new-notice">最新公告：</span><div class="notice"> <ul> <li> <a href="#"><span>2018-5-31</span&

2018-05-22 17:26:29 7883

转载 CSS Reset 2.0标准

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr...

2018-05-21 13:23:11 5546

原创 HTML5新增list属性

HTML5中为单行文本框（<input type="text" />）新增了一个list属性。通过list属性可以将文本框与<datalist>数据项绑定在一起，实现一个下拉提示框，用户可以手动或从下拉列表中选择。Demo演示：当用户输入时就会进行自动匹配：代码：<!doctype html><html><head><meta..

2018-05-20 20:22:10 3182

原创 web前端面试常考问题——持续更新中(5.20)

（一）综合题： 1.介绍一下你的技术栈 HTML5 + CSS3 + ES6 + Jquery + React + Webpack + git + npm + 2.简单自我介绍 3.电商网站怎样做优化，提高加载速度？ 4.什么是同源策略，如何实现跨域？同源策略/SOP（Same origin po...

2018-05-17 23:54:36 513

放大镜特效是电商网站常用效果，指鼠标滑过图片时会出现图片的局部放大图，使用JS就可实现，下面是最终效果图：放大镜原理：鼠标在小图片上移动时，通过捕获鼠标在小图标上的位置，定位大图标相应的位置主要功能：鼠标移入，放大镜显示鼠标移出，放大镜隐藏鼠标移动，放大镜随之移动，并且当大制定部分涉及三个鼠标事件：onmouseover ：鼠标指针移动到指定对象时触发onmouseout：鼠标指针移出指定对象...

2018-05-06 15:37:23 1648

原创 jQuery弹出层通用函数封装

弹出层是很多网站都会用到的效果，接下来用实现弹出层函数封装：（一）先看页面效果：1. header 顶部导航条最右侧放登陆、注册两个链接2.点击登陆链接时，弹出登陆窗体3.点击右侧关闭按钮，登陆窗体关闭4.点击注册链接时，弹出注册窗体5.点击右侧关闭按钮，注册窗体关闭（二）html结构（为简略，结构已省略logo、nav、登录注册等具体内容）：<!DOCTYPE html><h...

2018-03-10 12:39:24 1579

原创 CSS@media媒体查询，实现简单的响应式布局

页面相应式要求如下：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>响应式布局练习</title> <style> /*基本样式*/

2018-03-07 14:32:44 11176

原创 JavaScript封装简易的图片轮播函数

图片轮播是很多网站都会用到的功能，接下来原生JS简易实现图片自动轮播第一步：定义页面 html 结构：<div class="banner" id="banner"> <a href="#"> <div class="banner-slide slide1 slide-active"></div&

2018-03-06 18:14:38 953

原创慕课网——CSS作业练习题

作业地址：点击打开链接html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css慕课网作业</title> <link rel="stylesheet&quo

2018-03-06 00:52:58 1389

原创实现不定高元素垂直居中三中方式

效果图如下：html结构： <div class="parent"> <div class="child">demo</div> </div>方法一：display: table-cell + vertical-align: middle具体样式： .parent { width: 60px; height: 2...

2018-03-05 12:12:24 441

原创 CSS四种方案实现——居中布局

不定宽元素的居中对齐方案一： text-align: center + display: inline-block代码：css:<style type="text/css"> .parent { height: 80px; background: #ddd; text-align: center;...

2018-03-02 16:09:53 244

转载 input输入框:focus时美化效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>input</title> <style type="text/css">

2018-03-02 11:31:07 5858

捕鱼麦大叔的博客