css的小demo

demo1 一个高度随宽度变化的正方形 (缩小屏幕试试) 原理:margin和padding如果是用百分比设置,则是以父元素的宽度的百分比设置的. .Square{ display: inline-block; background:#FF0000; width:%; } .Square:before{ display: inline-block; content:""; padding-top:%; } .Square:before的父元素可以看作是.Square,把.Squar…

新手 gulp+ seajs 小demo

首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1.首先,务必先说明,本demo是基于nodeJs环境下开发的,因此要安装nodeJs(地址:https://nodejs.org/en/): 2.接下来安装gulp: 在第一步成功的情况下,安装gulp构建工具,并且将其依赖到项目进来:同时需要安装browser-sync,gulp-seajs-co…

一些常用的html/CSS效果---小技巧

我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table {border-collapse:collapse;border-spacing:0;} ol,ul {list-style:none;} h1,h2,h3,h4,h5,h6 {font-size:100%;} q:before,q:after {content:''} input,textarea…

React问答小demo

在学习react初期,看了一些视频和资料,react基础知识差不多学完,跟着网上的一个教程,做了一个小型的问答demo. 需求看图说: 1.点击"添加"按钮,显示问题输入表单,再次点击,隐藏表单.同时,点击"取消"按钮,隐藏表单. 2.输入问题标题和内容后,点击"确认"按钮,将问题显示在下方(按照投票数从高到低). 3.每个问题有加票和减票功能,在点击的同时,将问题按照投票数从高到低排序. 实现过程: 一.开发环境和工具 1.npm init (…

一周一个小demo — 前端后台的交互实例

这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览首先我们来看一下这个小demo的具体效果. 这个demo中,主要包括了三个步骤,也分别对应了三个功能,分别是注册,登录与留言板功能.而这三个功能基本都借助了前后台交互的几种技术,下面,本K就给大家分别展示一下这三个功能实现的代码. 二.功能实现 1.注册功能与登录功能 1.1 代码展示 1.1.1 注册功能 (1)前段部分 <!DOC…

一个基于ES6+webpack的vue小demo

上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换我们先搭建一下vue 的开发环境,根据我的一篇随笔<Vue开发环境搭建及热更新>,我们一步步搭建开发环境,project名为ES6-demo. 在之前我发表的一篇随笔< 理解最基本的Vue项目>中,说到了在放置组件和入口文件的src文件夹中,main.js文件就是入口文件,App.v…

一个基于ES5的vue小demo

由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5的vue小demo,再把这个demo写成基于ES6的,算是一个过渡吧!这个demo有一些代码借用于keepfool大神的<Vue.js--vue-router 60分钟快速入门>在此先解释一下,尊重原创!建议vue-rouer的相关知识可以跟着链接学习. 一.项目效果图二.代码编写过程 1.功能…

swiper嵌套小demo(移动端触摸滑动插件)

swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 : https://github.com/Clearlovesky/swiper3.4.2 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo<…

通过css实现小三角形

下面是用css做小三角形的demo, <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>三像素问题</title> <style type="text/css"> #rec{ /*border: 1px solid transparent;*/ border-top: 100px…

H5 PWA技术以及小demo

H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.web网页优缺点 a.开发成本低.网站更新时上传最新的资源到服务器即可.手机自带浏览器打开即可 b.体验比原生app差 c.入口不便捷 d.无网无相应,不具备离线能力 e.无app的消息推送 3.PWA是什么? PWA是一个新的前端技术,全称:Progressive Web App,这是一个渐进式的网页…

原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~

昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方法. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g…

移动端页面弹幕小Demo实例说明

代码地址如下:http://www.demodashi.com/demo/11595.html 弹幕小Demo实例地址,点击看效果写在前面:尝试做了一下弹幕的实例,欢迎提出并指正问题问题说明: Demo中页面展示如下图所示: 如果图片挂了,请看文字说明: 简单的说弹幕只完成了一个功能,从右向左缓慢移动 Demo中所涉及到的文字参数说明如下: 行走translateX= 屏幕宽度+弹幕宽度 + 70 行走时间:屏幕宽度/50(初始时间)+弹幕宽度/500 批次间隔时间:Math.min(初始时…

阴影效果的小 demo

早上没事干,感觉字体阴影的效果还是好看的,那么就来一个小demo吧! 1.这是html 简单的有一个标签或者盒子都可以 <div class="demo11">我爱考试</div> 2.css样式,用css3编写样式,感觉还不错. .demo11 { border: 1px dashed #f2b; height: 150px; width: 250px; text-align: center; line-height: 150px; margin: 0 aut…

仿百度下拉关键词，和关键词的小demo

自己做项目时用到的仿百度下拉关键词代码: $(function(){ var oTxt = document.getElementById('search_text'); oTxt.onkeyup = function() {//键盘抬起,输入第一个字母就开始执行函数 var val = this.value; var oScript = document.createElement('script'); oScript.src = "https://sp0.baidu.com/5a1Fazu…

2、链接数据库+mongodb基础命令行+小demo

链接数据库并且打印出数据的流程:1.在CMD里面输入 mongod 2.在CMD里面输入 mongo 3.在输入mongodb命令行里面进行操作,首先输入 show dbs 来查看是否能够链接得上库4.定义db var db = connect('log'); //链接数据库链接的是哪一个数据库?5.插入数据:db.login.insert(jsonData); //插入数据 5.命令行一:基础命令行(1).查看存在数据库命令 : show dbs (2).查看数据库版本命令 : db.ver…

vue入门 0 小demo (挂载点、模板、实例)

vue入门 0 小demo (挂载点.模板) 用直接的引用vue.js 首先讲几个基本的概念 1.挂载点即el:vue 实例化时元素挂靠的地方. 2.模板即template:vue 实例化时挂载点下赋值的模板. 3.赋值时的符号有插值表达式 {{msg}} . v-text="msg" .v-html="msg" 类似于css 的写法 4.实例即数据:data:{msg:'hello world!'} 4.事件表示:v-on:click=&qu…

js特效 15个小demo

js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title>图片切换</title> </head> <body> <img src="images/1.jpg" width="400" height="300" id="flower">…

入门Leaflet之小Demo

入门Leaflet之小Demo 写在前面 ---- WebGIS开发基础之Leaflet GIS基本概念:GIS.Map.Layer.Feature.Geometry.Symbol.Data(Point.Polyline.Polygon).Renderer.Scale.Project.Coordinates: GIS开发概述:架构模式.常用平台和SDK.二维三维使用Leaflet开发常用功能地图加载(底图类型.切换): 地图操作(缩放.平移.定位/书签.动画): 图层管理(加载.移除.调整顺…

Flexible实现H5移动端适配小demo

前言看了宇哥关于移动端适配的分享后,加上目前公司项目也需要做移动端适配,今天就抽空搞了搞.目前业界还是比较推崇手淘使用"rem+viewport"的解决方案,今天自己模仿手淘flexible的解决方案,实现了个简单的demo. 一句话总结 flexible动态获取设备宽度和dpr,为html元素添加两个属性:data-fontsize(设备宽度/10),data-dpr(安卓均为1,ios不同设备为2或3),同时设置meta标签的scale(1/dpr).你只需要为需要适配的元素设置…

【Java】Jsoup爬虫,一个简单获取京东商品信息的小Demo

简单记录 - Jsoup爬虫入门实战数据问题?数据库获取,消息队列中获取中,都可以成为数据源,爬虫! 爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 我们经常需要分析HTML网页,以从中提取感兴趣的信息. 开始,一个简单获取京东商品的小Demo. eg:比如我搜索java关键字 https://search.jd.com/Search?keyword=java&enc=utf-8&wq=java&pvid=71ec4d01ed1f428b8f3fc2c53a…

Nancy之基于Nancy.Hosting.Self的小Demo

继昨天的Nancy之基于Nancy.Hosting.Aspnet的小Demo后, 今天来做个基于Nancy.Hosting.Self的小Demo. 关于Self Hosting Nancy,官方文档的介绍如下 https://github.com/NancyFx/Nancy/wiki/Self-Hosting-Nancy 文档具体的内容我就不一一翻译了,主要是演示从头到尾的一个过程,然后看看Nancy.Hosting.Self的源码一.新建一个控制台应用程序(Console Applicati…

Nancy之基于Nancy.Owin的小Demo

前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katana 什么是Owin呢? 官网地址:http://owin.org OWIN在.NET Web Servers与Web Application之间定义了一套标准接口,OWIN的目标是用于解耦Web Server和Web Application. 什么是Katana呢? 官网地址:http://kata…

Nancy之基于Self Hosting的补充小Demo

前面把Hosting Nancy with ASP.NET.Self Hosting Nancy和Hosting Nancy with OWIN 以demo的形式简单描述了一下. 这篇是为Self Hosting Nancy.和Owin 下面的Self Hosting作个补充. 首先是Self Hosting Nancy的补充: 这里主要是介绍一下Topshelf 官网:http://topshelf-project.com/ GitHub地址:https://github.com/Topshe…

css的小技巧

前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素垂直居中 html, body { height: 100%; ; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex;…

[Unity3D]做个小Demo学习Input.touches

[Unity3D]做个小Demo学习Input.touches 学不如做,下面用一个简单的Demo展示的Input.touches各项字段,有图有真相. 本项目已发布到Github,地址在(https://github.com/bitzhuwei/AndroidTouchDemo). 制作Demo 很简单,只需拉一个Text,然后添加一个脚本. 脚本如下. using UnityEngine; using System.Collections; public class DisplayTouch…

【css的小demo】的更多相关文章