左手写爱等等-CSDN博客

原创 VUE去哪儿网仿写

今天。博主带来的是一个VUE项目的实战，去哪儿网移动端仿写，，其中包括了，组件传值，VUE-Router，VUEX，AJAX，以及swiper3插件实现轮播效果，由于代码比较庞大这里就不贴了，文章末尾博主会把代码百度云连接放上，欢迎下载关注。好了，我们来看下效果吧：主要是这四个页面，从上到下依次编号为1234，简单说下效果：1、页面1中点击右上角北京可以切换到城市选择页面2 ，在页面2中选择了城市...

2018-06-30 13:05:43 2426

原创 CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）

CSS3/CSS中居中解析今天，博主带来的是CSS3/CSS中的居中解析，相信小伙伴们有时候也会被各种居中搞的一脸懵逼把！居中总体来说可以分为水平居中还有垂直居中，顾名思义，定义这里就不解释了！首先，我们来看下垂直居中：（1）、如果是单行文本，则可以设置的line-height的数值，让其等于父级元素的高度！<!DOCTYPE html><html lang="en">&l...

2018-06-14 15:24:06 27882 3

原创 vue实战之在线翻译项目

vue实战之在线翻译项目今天，博主带来的分享是vue实战之在线翻译项目，一个小小的vue项目，用到了vue的很多基础语法，传组件等等！我们先来看下效果把！左侧输入一种语言，右侧选择要转换的语言，点击翻译就可以得到结果！是不是很神奇！当然博主这里仅仅罗列的七八种语言！我们就以汉语来展示了！其他语言的展示：可以输入与可以翻译的语言有： <option value="en">英语</o...

2018-06-11 18:46:52 1905

原创响应式布局之微软商城部分开发

响应式布局之微软商城部分开发今天，博主带来的分享是响应式布局之微软商城的开发，，页面比较庞大，博主仅仅开发了一部分！我们先来贴下效果吧！pc端，pad端比较像，就是间距发生变化的问题，因此博主这里仅仅开发了PC端与移动端的响应式布局！PC端效果：移动端效果：几乎主流设备都可以兼容！好了，下面正式开始：响应式，顾名思义，可以直白的理解成即可输出，即为当输入发生变化的时候，输出也会随之变化，并且大多数...

2018-06-03 18:53:51 669 1

原创移动端开发之viewport实战

移实战动端开发之viewport今天是久违了的六一，尽管我们都已经长大，可是博主还想说一句。。六一快乐！，今天博主带来的分享是移动端开发之viewport实战！楼主主要模仿了QQ刚进去时候的手机端页面，，为了提高大家的阅读兴趣，我们先来贴下效果把！1、效果如下：首先，我们刚进去的效果是这样的，标题“六一到咯！”旋转一周之后停下，最后显示为红色，从进入开始，头像下边的文字以及星星都是七彩不间断闪烁的...

2018-06-01 21:44:58 533

原创移动端开发之rem布局

移动端开发之rem布局今天，博主带来的分享是移动端开发之rem布局！先来贴下效果把！移动端设备为iphone6代码如下：主要有四部分，HTML部分，CSS部分，浏览器以及设备兼容部分，常用设置部分！第一部分：HTML部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...

2018-05-31 13:55:07 678

原创 css中position的相对定位与绝对定位解析

2018-05-27 21:50:36 402

原创 CSS3之transform，transition应用小动画

CSS3之transform，transition应用小动画今天博主给大家分享的是基于CSS3的，transform，transition的一个小动画！前者是用来改变形态的，后者是用来控制时间的，这里就不讲解了！先贴下效果：emmmm！还是这个二次元小姐姐呢！，，翻盖效果！下面贴下代码。。小伙伴们可以复制下运行一下哦：感受下小动画：<!DOCTYPE html><html lan...

2018-05-20 19:36:00 215

原创 Vue.js入门之点击切图

Vue.js入门之点击切图今天，，，，博主分享的内容是Vue.js入门之点击切图，Vue十个非常火的前端框架，，废话不多说直接贴代码！第一部分，HTML部分<!DOCTYPE html><html lang="en"><head> ...

2018-05-19 17:12:15 1339

原创 CSS3之翻牌效果

CSS3之翻牌效果今天博主给小伙伴们分享的是CSS3之翻牌效果！直接贴代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in

2018-05-18 17:01:04 527

原创 CSS3制作百分比进度条

CSS3制作百分比进度条今天呢，博主给小伙伴们带来的是使用CSS3制作百分比进度条！主要是圆角，阴影，线性渐变的应用！阴影的格式：box-shadow: x y size（大小）增强（可选参数） color 阴影; */ /* box-shadow:inset 0 0 30px red;如上所示：标注的超级清楚了，不再废话！线性渐变的格式：linear...

2018-05-17 14:20:59 3175

原创 HTML5/HTML中input标签用法解读

HTML5/HTML中<input>标签用法解读OK！今天博主为小伙伴们介绍的内容是HTML5/HTML中<input>标签的用法，，，，emmm图文并茂哦！喜欢博主的粉我哦，老铁们，点一波关注！下面正式开始内容的介绍：首先，直观上说<input>标签规定了用户可以在其中输入数据的输入字段！<input>元素在<form>元素之中使用的...

2018-05-16 13:37:52 16748 1

原创 JS仿flash图片的轮换效果！

大家都知道HTML CSS JS前端三剑客！今天我们来看一个JS的例子-------JS仿造Flash图片的轮换效果！代码分为三部分！第一部分html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport&am

2018-05-15 20:48:36 1298

原创使用纯碎的HTML CSS制作多拉A梦（即为CSS画图）

使用纯碎的HTML CSS制作多拉A梦（即为CSS画图）今天呢，博主带领小伙伴们使用纯碎的CSS制作一个多拉A梦，对，你没看错，，陪伴我们童年的蓝胖子！233要实现多拉A梦的制作，首先我们需要了解一下CSS画图的基本知识！为了引起小伙伴的兴趣！先来看下多拉A梦制作效果图把！怎么样？是不是超级可爱，2333.我们的蓝胖子，，，，第一,三角形的实现：原理：在css盒子模型之中，当一个盒子的两条边在边角...

2018-05-14 13:16:49 1414

原创 div与span，id与class，block与inline，inline-block的区别！

div与span，id与class，block与inline的区别！这次我们来学习几组CSS元素的区别！相信小伙伴们在使用的时候肯定有过这样的疑问吧？什么时候用什么时候用class？DIV。span到底咋回事的啊！扎心了，老铁！第一组：DIV与SPANdiv与span的区别呢，博主已经在另外一片文章之中说过了！觉得他比较重要再来唠叨一次把233...

2018-05-13 10:54:46 2279

原创 html css 零基础入门之第一个html代码（注重于vscode的安装使用）

html css 零基础入门之第一个html代码刚博主已经做了一个基础部分的margin与padding的讲解！为了给零基础的小伙伴们提供更多的帮助，现在我们来学习一下如何构建第一个HTML代码呢？针对与啥都不懂的萌新来说，一开始，前十个代码把，博主建议用windows自带的记事本敲代码！这样至少你会对HTML代码的结构有一个基本的了解！熟悉了HTML基本结构之后呢，，是不是觉得每次都要输入那...

2018-05-12 12:15:13 4517 3

原创 html css 入门之margin与padding的区别

margin与padding的区别今天博主带领大家来学习一下css中margin与padding的区别！大家在使用DIVA布局的时候肯定有一些疑问的把hhh首先是margin：margin是指元素自身的边框，与另外一个元素的界面的距离，比如，两个DIV块之间的距离，这个时候就要使用margin来进行设置了！设置上边距：ma...

2018-05-12 11:20:25 1040 1

qq_35788269的博客