div+css
文章平均质量分 73
夏末_阳光依然耀眼
一个人,走在陌生的城市,听伤感的音乐,看陌生的风景。我们都在寻找,人生就是寻找爱的过程,每个人都会遇到三种人,你爱的,爱你的,与你共度一生的。并不是每一对有缘相爱的恋人,都有相守一生的缘分;也许这一场恋爱是情深缘浅,下一场就缘定终生,去爱吧,像不曾受伤一样。
展开
-
CSS圣杯布局实例
圣杯布局 body {background-color: #ffffff; font-size:14px; padding:0; margin:0;} #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;} .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-转载 2016-08-15 14:28:41 · 551 阅读 · 0 评论 -
jquery多个鼠标移上显示下拉菜单
jquery多个鼠标移上显示下拉菜单: demo <!-- jQuery(document).ready(function ($){ //$(".subCategory").hide(); $(".down").each(function(i,obj){ $(obj).hover ( function原创 2016-11-02 09:25:48 · 635 阅读 · 0 评论 -
jquery带定时器的多个下拉菜单
jquery带定时器的多个下拉菜单无标题文档*{ margin:0; padding:0; list-style:none;}.list{ width:800px;}.pl-text{padding: 20px 0; font-size: 14px; height: 21px;}.pl-fr{float: right; position: relative原创 2016-11-02 09:50:13 · 543 阅读 · 0 评论 -
解决UC浏览器、微信浏览器使用display:flex;的兼容性问题
在android平台的uc浏览器和微信浏览器中使用display: flex;会出问题。使用display: flex;的时候需要加上display: -webkit-box;使用flex: 1;的时候要加上:-webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; 使用alig转载 2016-11-14 15:58:29 · 4282 阅读 · 0 评论 -
史上最简单jquery轮播图
直接上代码:序号body{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#666666;margin:0px;padding:0px;background:#fff;}p,from,h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;}原创 2016-11-18 17:54:16 · 1102 阅读 · 0 评论 -
jquery input placeholder支持兼容ie7,ie8
/* * jQuery placeholder, fix for IE6,7,8,9 * @author byh */var JPlaceHolder = { //检测 _check : function(){ return 'placeholder' in document.createElement('input'); }, //初始化原创 2016-12-14 09:47:42 · 1841 阅读 · 0 评论 -
jquery简单实现tab选项卡效果
最简单选项卡div{margin:0;padding:0;width:184px;height:200px;border:1px solid #ccc;display:none;}.tab{margin:0;padding:0;list-style:none;width:200px;overflow:hidden;}.tab li{float:left;width:60px;height转载 2016-12-15 17:02:43 · 441 阅读 · 0 评论 -
jquery点击下拉菜单鼠标移开隐藏(可模拟下拉框)
$(document).ready(function(){ $("ul.subnav").parent().append(""); $("ul.topnav li span").click(function() { $(this).parent().find("ul.subnav").slideDown('fast').show(); $(this).parent().hover原创 2017-03-08 17:12:42 · 2026 阅读 · 0 评论 -
js制作404错误页面5秒钟倒计时自动跳转
404错误页面 404 Sorry,this page flew to the moon! 5秒后自动跳转,如果不跳转,请点击下面的链接返回首页 function delayURL(url) { var delay = document.getElementById("time").innerHTML; if(delay > 0) {原创 2017-03-09 10:28:46 · 523 阅读 · 0 评论 -
微信h5页面开发遇到那些坑
一、首先是ios对时间date()的支持不一样:var date =new Date("2016-05-31 00:00:00"); 这种写法在安卓和pc上都不正常的,唯独在ios手机上会显示Nan,查阅一些资料,经过一番调试发现:ios上只支持:var date =new Date("2016/05/31"); 这种格式,调试发现 2016/05/31 等原创 2017-03-23 10:49:04 · 6681 阅读 · 0 评论 -
jquery简单菜单下拉导航
jquery简单菜单下拉导航代码如下:复制运行即可简单导航菜单*{ margin:0; padding:0; list-style:none;}#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5原创 2016-11-02 09:22:55 · 551 阅读 · 0 评论 -
调用腾讯视频播放器APi代码
调用腾讯视频播放器APi代码 调用腾讯视频播放器APi var video = new tvp.VideoInfo(); video.setVid("q0011iyvdam");//视频vid var player = new tvp.Player(750, 450);//视频高宽 player.setCurVideo(video);转载 2016-11-11 09:47:22 · 18099 阅读 · 0 评论 -
调用优酷视频播放器APi代码
调用优酷视频播放器APi调用优酷视频播放器APi player = new YKU.Player('youkuplayer',{styleid: '0',client_id: 'YOUR YOUKUOPENAPI CLIENT_ID',vid: 'XMTc1NjI0MTMzNg=='});转载 2016-11-11 09:46:19 · 2351 阅读 · 1 评论 -
CSS双飞翼布局实例
双飞翼布局 body {background-color: #ffffff; font-size:14px; padding:0; margin:0;} .header, .footer{ padding: 20px 3px; background: #cccccc; text-align: center; } .su转载 2016-08-15 14:36:10 · 435 阅读 · 0 评论 -
jquery实现的一个超级简单的下拉菜单
nav a { text-decoration: none; } nav > ul > li { float: left; text-align: center; padding: 0 0.5em; } nav li ul.sub-menu { display: none; padding-left: 0 !important; } .sub-menu li { co原创 2016-10-09 10:33:00 · 329 阅读 · 0 评论 -
可控制导航下拉方向的jQuery下拉菜单代码
可控制导航下拉方向的jQuery下拉菜单代码*{ margin:0; padding:0; list-style:none;}.nav{ width:700px; height:30px; line-height:30px; margin:200px auto;}.nav li a{ color:#fff; text-decoration:none; display:block; flo原创 2016-10-09 10:50:18 · 550 阅读 · 0 评论 -
基于Jquery的模拟Select下拉菜单
无标题文档*{ margin:0; padding:0; list-style:none;}/*套在Select外层,用于隐藏Select框*/.selectContainer{position:relative; width:262px; display:inline-block; _display:inline; _zoom:1; z-index:1000; background:#转载 2016-09-20 13:31:08 · 711 阅读 · 1 评论 -
@media媒体查询判断ipad和iPhone各版本
Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。转载 2016-09-08 10:22:19 · 15116 阅读 · 0 评论 -
jquery鼠标移上图片变暗
hover*{ margin:0; padding:0; list-style:none;}.box li{ width:300px; height:200px; position:relative; float:left;}.box li a img{width:300px; height:200px;}.mask{ position:absolute; left:0; top:0;原创 2016-09-21 21:09:53 · 1208 阅读 · 0 评论 -
jquerty鼠标移上显示隐藏菜单简洁下拉菜单
鼠标移上显示隐藏菜单$(document).ready(function(){ $('#jsddm > li').bind('mouseover', jsddm_open); $('#jsddm > li').bind('mouseout', jsddm_timer);});document.onclick = jsddm_close;var timeout =原创 2016-09-22 13:44:36 · 980 阅读 · 0 评论 -
jquery简单树形菜单代码
jquery简单树形菜单代码:jquery的树形菜单代码 @charset "utf-8";body{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#666666;margin:0px;padding:0px;background:#fff;}p,from,h1原创 2016-11-03 10:54:50 · 762 阅读 · 0 评论 -
可控制导航下拉方向的jQuery下拉菜单代码
可控制导航下拉方向的jQuery下拉菜单代码:可控制导航下拉方向的jQuery下拉菜单代码*{ margin:0; padding:0; list-style:none;}.nav{ width:700px; height:30px; line-height:30px; margin:200px auto;}.nav li a{ color:#fff; text-decora转载 2016-11-03 10:58:30 · 422 阅读 · 0 评论 -
jquery判断当前浏览器的实现代码
使用方法: $.browser.['浏览器关键字'] $(function(){ if($.browser.msie){ alert("this is msie"); }else if($.browser.safari){ alert("this is safari!"); }else if($.browser.mozilla){ alert("this is转载 2017-03-23 17:44:57 · 264 阅读 · 0 评论 -
jquery列表点击加载更多
jquery列表点击加载更多,可点击多次转载 2017-04-18 10:38:08 · 3348 阅读 · 1 评论 -
纯css3实现的太极八卦并且会转动的css3特效
纯CSS3实现太极图形样式代码 - 代码笔记 .square{ width:400px;height:400px;position:relative; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); animation:rota转载 2017-09-22 11:23:43 · 1096 阅读 · 0 评论 -
css 样式class命名规范
header 头content/containe 内容footer 尾nav原创 2017-10-11 13:47:32 · 785 阅读 · 0 评论 -
CSS常用 Less 公共样式封装
/------------------------------------- ├ 布局 ┆ └------------------------------------/// 盒子宽高.size(@w, @h) { width: @w; height: @h; }// 最小尺寸, 兼容IE6.min-width(@min-w) { min-width: @min-w; _wi转载 2017-12-14 14:35:39 · 15967 阅读 · 1 评论 -
做网站经常会用到的一些js效果
1.返回顶部 $(function(){ $('.top').hide(); $(window).scroll(function() { if($(window).scrollTop() >= 100){ $('.top').fadeIn(300);转载 2017-11-27 10:54:58 · 356 阅读 · 0 评论 -
TweenMax.js背景位移动画
背景动画* { margin: 0; padding: 0;}.fibers { display: block; width: 275px; height: 600px; background: url(images/spectra-wire-sprite.png) no-repeat 0 0 transparent;} var st=0; TweenM原创 2018-01-11 15:05:47 · 976 阅读 · 0 评论 -
iOS系统及微信中audio自动播放
//音乐播放暂停 $("#audioBtn").click(function(){ if(music.paused){music.play(); $("#audioBtn").removeClass("pause").addClass("play"); }else{music.pause(); $("#audioBtn").removeClass("play").addC转载 2017-12-19 16:30:18 · 502 阅读 · 0 评论 -
jQuery弹出层垂直居中效果
<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>jQuery弹出层垂直居中效果</title> <st原创 2018-08-01 00:15:24 · 223 阅读 · 0 评论 -
css 移动web li 左右两列布局
<!doctype html><html><head><meta charset="utf-8"><title></title> <style> html,body,section{ width: 100%; height: 100%; margin: 0; padding: 0;...转载 2019-04-02 15:52:17 · 977 阅读 · 0 评论 -
css每列四行,加载完一列后数据自动填充到下一列
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Ge...转载 2019-04-02 16:09:32 · 342 阅读 · 0 评论 -
JQuery 锚点连接屏幕滚动
$(function(){ $(window).scroll(function(){ //为页面添加页面滚动监听事件 var wst = $(window).scrollTop() //滚动条距离顶端值 for (i=1; i<6; i++){ //加循转载 2017-09-20 11:29:06 · 348 阅读 · 0 评论 -
移动端网页纯原生js选项卡tab切换
适合移动网页纯原生js选项卡tab切换 *{ margin: 0; padding: 0} ul,li{ list-style: none} .tabClick{ background: #f3f3f3; overflow: hidden} .tabClick li{ height:40px; line-height: 40px; width: 25%; floa转载 2017-09-01 11:47:43 · 3367 阅读 · 0 评论 -
关于腾讯视频遮住div解决办法
在做网页或者专题的过程中,有时候会用到腾讯视频或者优酷视频等第三方视频,我们直接复制第三方分享的视频地址就可以了,但是如果你的页面中有用到 position:fixed 的div,希望div显示在最上层并固定在顶部,那么问题就来了,这个视频就会遮住这个 position:fixed div,曾试过设置“z-index:99999”属性,但起不到任何作用。后来研究发现,如果视频播放代码里面设置原创 2017-04-18 14:12:49 · 1817 阅读 · 0 评论 -
jQuery二级下拉菜单 下拉箭头翻转动画
附上用到的图片:原文地址:http://www.html5tricks.com/jquery-dropdown-menu-icon.html转载 2017-04-21 11:21:37 · 3104 阅读 · 0 评论 -
css实现横向带箭头步骤流程效果兼容性ie6
ul{margin:0px; padding:0px; list-style:none;} .wrap{width:960px; height:auto; line-height:30px; margin:100px auto 0;} .step-case{height:40px;} .step-case li{ float:left; margin:0px; width:12.5%;po转载 2017-06-20 14:14:57 · 665 阅读 · 0 评论 -
QQ聊天框中发送url网站链接预览内容修改方法
若您发现在QQ聊天窗口发送您的网站地址时,出现的网站简介内容需要更新,请您去修改一下您网站的网页代码,在代码中加入Meta标签。下图所示:转载 2017-06-30 10:12:42 · 5557 阅读 · 3 评论 -
iphone webapp 隐藏地址栏(全屏)解决方案
要注意的几个点:这个方法要在内容加载完成后执行,换句话浏览器内容的高度要超过浏览器窗口高度(出现‘滚动条’)才有效。针对这个高度自适应的窗口(height:100%),得用特殊方式解决://强制让内容超过$('#main').css("height",window.innerHeight+100);window.scrollTo(0, 1);//重置成新高度$("#main")转载 2017-06-30 18:02:47 · 9182 阅读 · 0 评论