2017年02月_UNDERCOVERj

原创一个vue2.0+vuex+vue-router搭建的单页潮流购物网站

项目demo地址 github源码地址首页如果觉得不错，给github源码点个赞吧QAQ前言这篇文章是总结自己写项目时的思路，遇到的问题，和学到的东西，本文只截取一部分来讲，源码已奉上，觉得项目还行的点个赞吧，谢谢一、搭建环境安装vue-clinpm install -g vue-cli 创建webpack项目vue init webpack voguecd vogue安装依赖npm i

2017-02-12 11:12:11 7745

原创 js高程读书笔记

02.23带有src的<script>元素不应该在其script标签之间包含额外的javascript代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件。在script元素中设置defer属性，相当于告诉浏览器立即下载，但是延迟执行XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。XHTML 的目标是取代 HTML。XHTML

2017-02-23 21:23:38 324

原创用jq实现无限轮播

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> *{margin: 0;padding: 0} .wrapper{position: relative;overflow: hidden;} .wr

2017-02-21 21:40:02 1045

原创自己写的vue无限轮播插件

思路：要实现无限轮播，需要在轮播图前后各加一张图片，加在前面的是轮播图的最后一张图片（重复的），加在后面的是轮播图的第一张图片（重复的）。例：<div class="wrapper-content"> <img class="wrapper-content_img" alt="4" src="img/4.jpg"/> <img class="wra

2017-02-21 21:33:51 6237

原创 div+css布局

两栏布局利用margin<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> .first{overflow: hidden;;margin-top: 50px;color:#fff;} .first-left{width

2017-02-20 23:10:07 327

清除浮动的方法可以分成两类：一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素

2017-02-17 16:16:35 205

原创 title与h3的区别、b与strong的区别、i与em的区别？

title属性没有明确意义只表示是个标题， H1 则表示层次明确的标题，对页面信息的抓取也有很大的影响； strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容。 i内容展示为斜体， em 表示强调的文本；

2017-02-17 15:53:22 1483

原创 html中的垂直居中和水平居中

方法一：运用flex布局<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> .app{width: 500px;height: 500px;background: green;} .app{display: flex;ali

2017-02-17 14:56:17 1119

原创 src和href的区别

src用于替换当前元素， href 用于在当前文档和引用资源之间确立联系。 src是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本， img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似

2017-02-17 13:11:11 428

原创 css权重

第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为100。第三等：代表类，伪类和属性选择器，如.content，权值为10。第四等：代表类型选择器和伪元素选择器，如div p，权值为1。通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中

2017-02-17 13:06:24 327

原创：nth-child(n)与：nth-of-type(n)的区别

使用p:nth-child(n)得满足两个条件 1. 它的位置必须在它父元素的第n个，从1开始计数 2. 它必须是P元素（相对于p:nth-child(n)来举例）使用p:nth-of-type(n) - 只要它是第n个P元素就行了<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8">

2017-02-17 12:23:34 430

原创相邻元素之间的margin问题：

任何元素都可以设置border 设置宽高可能无效行内元素设置padding，margin上下是无效的，左右是有效的外边距合并：指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将

2017-02-17 11:06:40 6499

原创用css3画三角形

.triangle_first{width: 0px;height: 0px;border-top: 100px solid red;border-right: 100px solid transparent}<div class="triangle_first"></div>效果： .triangle_first-clone{border-top: 50px solid red;border-l

2017-02-12 22:23:11 534

原创 js实现路由跳转和js中bind的实现

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> #display{width: 300px;height: 300px} </style&amp

2017-02-12 21:04:38 4310

原创 margin坍塌

今天在写代码过程中，解决了一个小问题，代码如下。在.first的div中设置margin-top，效果却是和父div设置margin-top一样，网上又搜了答案总结一下<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css">

2017-02-12 10:45:30 877

前端说