css
jiaweimin123
前端小小小菜鸟,学习技术中。。。
展开
-
css 实现垂直水平居中
CSS样式: #contanien{position:relative;}#box{width:200px;height:200px;border:2px solid red;position:absolute;left:50%;top:50%;margin-left:-100px;margin-top:-100px;}原创 2017-08-22 12:03:47 · 203 阅读 · 0 评论 -
js 获取当前时间输出并刷新date
当前系统时间 *{ margin: 0; padding: 0; } #show{ width: 350px; height: 100px; background-color: #0d88c1; m原创 2017-09-20 12:53:19 · 1440 阅读 · 0 评论 -
js继承 原型链+构造函数+组合继承法
//继承方法之原型链 function A() { //创建一个原型对象A,有属性和方法 this.judge=true; } A.prototype.value=function () { return this.judge }; function B() { //创建B,属性和A不相同 this原创 2017-09-12 14:40:41 · 403 阅读 · 0 评论 -
CSS 分隔线 中间带文字 分隔符
HTML部分: 最近常用路线 CSS部分:.order { height: 60px; line-height: 60px; text-align: center;}.order .line { display: inline-block; width: 35%; bo原创 2017-10-08 14:46:02 · 9580 阅读 · 0 评论 -
原生js封装好的动画函数+jQuery函数animate
jQuery方法:$(function () { $("#move a").mouseenter(function () { $(this).find('i').animate({top: '25px', opacity: '30'}, 300, function () { $(this).css({width: "30px"}); $(this).animate({top: '0', opacity: '10'}, 200)原创 2017-09-20 12:59:27 · 2025 阅读 · 0 评论 -
css 常见页面布局之圣杯布局(margin负值法)
Document *{ margin: 0; padding: 0; } #container{ width: 100%; height: 100px; background-color: darkred;原创 2017-09-30 20:24:08 · 826 阅读 · 0 评论 -
CSS :after伪类实现圆形蒙板动画,翻转
Document section{ width:90%; margin:100px auto 0; font-size:0; }section a{ display:inline-block; width:30%; position:relative; margin:0 1.6% 3%; overflow:hidden; }section img原创 2017-10-11 15:42:55 · 1528 阅读 · 0 评论 -
HTML CSS +js 实现tab选项卡,自动轮换
Tab-选项切换 *{ margin: 0; padding: 0; } .container{ width: 500px; height: 180px; margin: 20px auto; border: 1px solid red; } .header{ width: 500px; height: 40px; /*bo原创 2017-10-06 14:28:06 · 1082 阅读 · 0 评论 -
css 手风琴菜单效果,图片动画
Title KungFu Panda <img src="http://www.2cto.com/uploadfile/Collfiles/20140225/20140225085908528.jpg" style="width: 630px; height: 315px;转载 2017-10-16 12:21:26 · 532 阅读 · 0 评论 -
web前端常见框架总结 ui框架+js框架
整理的一些了解的前端市场上主流使用的CSS和JS的框架UI框架:1、lay UI官网地址:http://www.layui.com/简洁明了,返璞归真,包含常用的布局、字体、颜色、动画、轮播、进度条,内置表单、日期选择、模板等。2、amaze UI官网地址:http://amazeui.org/中国首个开源跨屏的H5前端框架,移动优先的原则,包含众多类型免费模板和插件,原创 2017-11-02 18:27:57 · 9008 阅读 · 0 评论 -
CSS getStyle 获取元素的样式,解决offSet+样式所产生的bug
//封装好的函数,获取样式style(解决offset样式的bug)function getStyle(obj, attr) { if (obj.currentStyle) { //IE浏览器 return obj.currentStyle[attr] } else { //原创 2017-09-20 09:51:57 · 619 阅读 · 0 评论 -
javascript 正则表达式+表单验证 结合运用简单例子
以下为js代码,HTML和css未粘贴~ 主要原理为:判断input输入框获得焦点、按键移开、失去焦点三种情况window.onload=function () { var Ps=document.getElementsByTagName('p'); var nameMsg=Ps[0]; //第一次输入用户名的提醒 var psdMsg1=Ps[1];原创 2017-09-12 09:15:25 · 645 阅读 · 0 评论 -
css 炫酷鎏金字体,颜色渐变
.top>div p{ overflow: hidden; //超出部分隐藏 font-size: 1.2rem; //大小 font-style: oblique; //倾斜 text-align: left; line-height: 3rem; //垂直居中 background-image: -webkit-linear-gra原创 2017-09-15 10:17:32 · 7358 阅读 · 0 评论 -
css @media rem+百分比布局 响应式布局之媒体查询
@media screen and (min-width:320px){ html{ font-size: 5px; !important; }}@media screen and (min-width:480px){ html{ font-size: 10px; !important; }}@media screen and原创 2017-09-15 10:52:37 · 3490 阅读 · 0 评论 -
运用jQuery+jplayer 制作简洁音乐播放器
使用jplayer插件,运用jQuery和JavaScript制作简易的音乐播放器!原创 2017-08-30 09:01:24 · 1164 阅读 · 0 评论 -
前端性能优化常用方法
网页:1、减少http请求2、避免页面跳转3、延迟加载、缓存ajax样式:1、避免css表达式2、用@link代替@import3、样式表置顶图片:1、CSS sprite雪碧图2、不在HTML中缩放图片3、使用小而且可缓存的iconJavaScript:1、脚本沉底2、使用外部js和css3、减少DOM操作4、精简去重最后:可参考Yahoo前端性能优化的35条军规原创 2017-09-24 13:19:52 · 255 阅读 · 0 评论 -
Bootstrap carousel轮播图插件 简洁版
HTML部分 (只需修改图片路径,增删图片数量都可,尺寸统一)翻译 2017-09-15 19:39:48 · 1214 阅读 · 1 评论 -
vue.js 学习笔记 制作简单的todo list
//只粘贴了部分代码 这是其中一个component下面的一个组件 {{message}} {{item.value}} go Bar // 引入store来进行存储itms import store from '@/router/store' export原创 2017-09-17 19:48:44 · 266 阅读 · 0 评论 -
@media 媒体查询 479尺寸下一般手机的设置
/*媒体查询,根据宽度改变根元素的大小*/@media screen and (min-width:1200px){ html{ font-size: 22px;!important; }}@media screen and (min-width: 960px) and (max-width: 1199px){ html{ font-s原创 2017-09-18 09:36:31 · 1441 阅读 · 0 评论 -
电商网站必备 简单版轮播图库
html部分 css部分/*包裹轮播图的div*/#container{ width: 800px; height:440px; overflow: hidden; display: inline-block; p原创 2017-09-10 08:37:48 · 1321 阅读 · 0 评论 -
原生js实现倒计时功能,创建元素div插入元素,时间结束替换倒计时功能,移除元素
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> .timer {width: 340px;height: 75px;position: absolute;display: flex;justify-content: sp原创 2018-01-10 20:25:27 · 1206 阅读 · 0 评论