html
muzi187
这个作者很懒,什么都没留下…
展开
-
Object.defineProperty()
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body> <div id="root"> </div> <sc.原创 2021-11-26 11:21:43 · 198 阅读 · 0 评论 -
CSS深入理解之margin
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之marginmargin一、margin与容器尺寸1、CSS margin可以改变容器的尺寸2、Margin与可视尺寸:(1)适用于没有设定width/height的普通block水平元素(不包括float元素,absolute/fixed元素,inline元素,table-cell元素...)(2)原创 2017-12-21 17:23:11 · 545 阅读 · 0 评论 -
CSS深入理解之padding
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之paddingPadding一、Padding对于block水平元素.div{width:50px;} -->实际宽度50.div{width:50px;padding:0 15px;} -->实际宽度80padding影响元素尺寸 .div{width:80px;box-sizing:borde原创 2017-12-08 14:08:26 · 1991 阅读 · 0 评论 -
js实现一键复制
地址:http://pan.baidu.com/s/1mi3iAgS 复制粘贴 复制 //这里的参数说明一下,text是要复制的文本内容,button是点击触发复制的dom对象,msg是复制成功后的提示信息,parent是包含flash的父元素func原创 2017-11-03 14:37:53 · 1457 阅读 · 0 评论 -
必应搜索框制作 搜索提示 jQuery及JavaScript实现
注:学习慕课网前端开发课程《搜索框的制作》搜索提示 jQuery及JavaScript实现利用fiddler工具将文件放到某域下进行调试 利用fiddler将本地网页放到某个域下 bing search body{background-color: #333;margin:0;padding:0;} .bg-div{position:relative;b原创 2017-08-11 17:10:44 · 1214 阅读 · 0 评论 -
模拟天猫--网页定位导航效果
分为左右两部分左侧内容,右侧炫富的导航菜单左侧滚动时,右侧内容不改变位置点击右侧链接,左侧定位到相应栏目左侧滚动到相应栏目,右侧定位到对应链接锚点(anchor):锚点是网页制作中超链接的一种,又叫命名锚记。锚点是一种页面内的超级链接jQuery事件:1、scroll([data],fn):当用户滚动指定的元素时,会发生scroll事件适用于所有可滚动的元素和windo原创 2017-08-01 16:57:37 · 1197 阅读 · 0 评论 -
制作淘宝搜索框,js选择店铺、宝贝
1、仿照淘宝制作搜索框。可以选择店铺或者宝贝示例图为 taobao demo @font-face{font-family:iconfont;src:url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);src:url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont原创 2017-08-16 15:29:15 · 1478 阅读 · 0 评论 -
瀑布流布局
1、页面布局及样式 *{padding: 0;margin:0;} #main{ position: relative; } .box{ padding: 15px 0 0 15px; float:left; } .pic{ padding: 10px; b原创 2017-08-07 13:58:52 · 336 阅读 · 0 评论 -
div有border时不能用offsetWidth获取div宽度
动画body{ margin:0; padding:0;}ul,li{ list-style:none;}ul li{ width:200px; height:100px; background:yellow; margin-bottom:20px; border:4px solid #000;} window.onload=fu原创 2017-05-10 14:39:55 · 748 阅读 · 0 评论 -
CSS深入理解之float浮动
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之float浮动Float1、float设计初衷是:文字环绕效果2、浮动具有破坏性,会让父元素高度塌陷!3、清除浮动带来的影响(1)在底部插入具有clear:both;声明的元素与外部可以直接接触,例如可以发生margin重叠效果(2)父元素BFC(IE8+)或haslayout(IE6/IE7)原创 2017-12-15 15:10:06 · 498 阅读 · 0 评论 -
CSS深入理解之overflow
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之overflowoverflow一、overflow基本属性1、overflow的基本属性值:visible(默认),hidden(不是裁剪是隐藏),scroll(水平和垂直方向都有滚动条轨道),auto(超出容器的方向出现滚动条),inherit(IE8+)2、Overflow-x和overflow-y原创 2017-12-25 16:33:38 · 1853 阅读 · 0 评论 -
CSS深入理解之absolute
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之absoluteabsolute一、absolute与float鲜为人知的兄弟关系,相同的特性表现:包裹性absolute的包裹性.box { padding: 10px; background-color: #f0f0f0; }input { positio原创 2018-01-11 11:39:12 · 5184 阅读 · 0 评论 -
滑动门特效
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>sliding doors</title> <link rel="stylesheet" href="styles原创 2018-03-01 10:39:15 · 375 阅读 · 0 评论 -
图片有序预加载
1、图片有序预加载 -- 不使用插件<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name=&qu原创 2018-03-01 10:27:01 · 235 阅读 · 0 评论 -
图片无序预加载
1、不使用预加载<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author&原创 2018-03-01 10:21:53 · 196 阅读 · 0 评论 -
CSS深入理解之border
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之borderborder一、border-width不支持百分比类似的还有outline,box-shadow,text-shadow,......都不支持百分比值。属性border-width支持关键字:thin(细的),medium(默认值,中等的),thick(粗的)在CSS2.1之后,IE8+浏览原创 2018-01-29 10:50:34 · 924 阅读 · 0 评论 -
CSS深入理解之line-height
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之line-heightline-height一、line-height的定义行高line-height,两行文字基线之间的距离。1、什么是基线?字符(x)下边缘2、为什么是基线?基线是*线定义之根本。3、需要两行么?不需要,两行的定义决定了一行的表现行高line-height可以让单行文本垂直原创 2018-01-26 14:16:23 · 17506 阅读 · 0 评论 -
CSS深入理解之vertical-align
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之vertical-alignVertical-align一、vertical-align基本认识vertical-align支持的属性值及组成:除了inherit(继承)外,还包括4类:1、线类:baseline(默认值,基线对齐),top,middle,bottom2、文本类:text-top,text原创 2018-01-25 12:00:30 · 596 阅读 · 0 评论 -
vertical-align的兼容性问题
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之vertical-align-->第八章vertical-align糟糕的兼容性IE6/IE7IE8/Chrome/FireFox/...1、Baseline(1)小图片和文字(2)大图片和文字(3)大行高下的大图片和文字2、Middle(1)小图片和文字(2)大图片和文字原创 2018-01-25 10:50:02 · 3970 阅读 · 0 评论 -
CSS深入理解之z-index
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之z-indexZ-index一、Z-index基础1、z-index属性指定了元素及其子元素的z顺序 ,而z顺序 可以决定当元素发生覆盖的时候,哪个元素在上面。通常一个较大z-index值的元素会覆盖较小z-index值的元素。2、属性值:(1)z-index:auto; 默认值(2)z-in原创 2018-01-02 17:19:18 · 514 阅读 · 0 评论 -
js实现-商城分类导航效果
window.onload=function(){ var Lis=document.getElementsByTagName("li"); for(i=0;i<Lis.length;i++){ Lis[i].i = i; Lis[i].onmouseover=function(){ this.className="lihover"; var h0 = (this.i原创 2017-05-17 17:00:27 · 10276 阅读 · 0 评论 -
css实现-商城分类导航效果
全部商品分类 图书、音像、数字商品 电子书 免费 小说 励志与成功 婚恋/两性原创 2017-05-17 16:03:33 · 580 阅读 · 0 评论 -
鼠标移入时显示,移除时隐藏
1、匀速运动动画body,div,span{ margin:0; padding:0;}#div1{ width:200px; height:200px; background:red; position:relative; left:-200px; top:0;}#div1 span{ width:20px; height:50px; backgro原创 2017-05-06 14:32:11 · 2828 阅读 · 0 评论 -
js模拟QQ面板拖拽效果及状态切换效果(DOM事件)
利用js的DOM事件模拟QQ面板的拖拽效果,以及QQ面板的状态切换效果 拖动 帐 号: 密 码:原创 2016-12-13 10:51:53 · 888 阅读 · 0 评论 -
事件处理程序&&事件对象
一、事件流事件流描述的是从页面中接受事件的顺序。IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流1、事件冒泡事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)。2、事件捕获事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。二、事件处理程序1、HTML事件处理原创 2016-11-24 11:52:23 · 476 阅读 · 0 评论 -
title添加小图标
网页title添加小图标在网页title下添加href是图标地址原创 2016-12-06 16:04:43 · 1082 阅读 · 0 评论 -
列表分页(PHP)
当网页显示的列表为数据库查询的数据时,总是会有很多内容,需要用到分页。利用bootstrap的样式写一个简单的页数显示效果。如图所示表示当前是第二页<?php/////////////数据库连接/////////////假设取出list表中所有数据$perNumber = 15; // 每页显示的记录数$page = $_GET ['page']; // 获得原创 2016-12-08 15:40:42 · 3093 阅读 · 0 评论 -
jQuery防止表单重复提交
用户连续点击提交按钮时会一直重复提交表 提交 已提交0次 var tm=null;function calcSubmitCnt(){ var cnt=parseInt($('#submitCnt').text()); cnt=cnt+1; $('#submitCnt').text(cn原创 2016-12-12 16:33:34 · 462 阅读 · 0 评论 -
微信点击分享到朋友圈的按钮,右上角提示
#shareit { -webkit-user-select: none; display: none; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.85); text-align: center; top: 0; left: 0; z-index: 105;转载 2016-11-17 09:16:21 · 12169 阅读 · 0 评论 -
根据经纬度在地图上定位
GPS经纬度坐标偏移问题。这个是由于中国要求对经纬度进行加密导致的,所以百度和Google的地图上都存在这个问题,即使用手持设备或者导航设备获取到的经纬度在地图上定位发现并不是对应的位置,而存在很大的偏移。无偏移精准定位*{margin:0px;padding:0px;}html, body {height: 100%;} body, button, i原创 2016-11-10 09:00:02 · 8170 阅读 · 1 评论 -
将画布转化成图片:canvas-->img
1、html 2、canvas是已处理好的画布,转化成png图片即可var cimg = function() { var imgSrc = document.getElementById("canvasId").toDataURL("image/png"); document.getElementById("imgId").src = imgSrc;}原创 2016-11-03 11:50:21 · 7776 阅读 · 1 评论 -
键盘事件模拟抽奖
键盘事件KeyDown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件。KeyPress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。KeyUp:当用户释放键盘上的键时触发。EVEVT对象的keyCode属性用于得到键盘对应键的键码值图片分别为刚进入页面,正在抽奖,点击停止后html 抽奖原创 2016-12-17 16:07:42 · 361 阅读 · 0 评论 -
使用div显示文字
使用div显示文字时,想要只显示一行,且多余部分用省略号表示,只需设置div的style即可。style="width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"原创 2017-01-09 16:32:27 · 4333 阅读 · 0 评论 -
js多物体不同运动
动画body{ margin:0; padding:0;}ul,li{ list-style:none;}ul li{ width:200px; height:100px; background:yellow; margin-bottom:20px; border:4px solid #000;} window.onload=function(){ var原创 2017-05-11 17:22:58 · 293 阅读 · 0 评论 -
js实现文字向上无缝滚动
向上无缝滚动body { font-size: 12px; line-height: 24px; text-algin: center; /* 页面内容居中 */}* { margin: 0px; padding: 0px; /* 去掉所有标签的marign和padding的值 */}ul { list-style: none;原创 2017-05-15 11:03:31 · 3174 阅读 · 0 评论 -
js实现限时抢倒计时
团购——限时抢还剩 function FreshTime(){ var endtime=new Date("2017/5/15,12:20:12");//结束时间 var nowtime = new Date();//当前时间 var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); d=par原创 2017-05-15 10:17:50 · 1202 阅读 · 0 评论 -
js高考倒计时
高考倒计时 距离2017年高考还有天 window.onload = function(){ var timedate= new Date("6,6,2017"); var now = new Date(); var date = timedate.getTime() - now.getTime(); //得出的为毫秒原创 2017-05-13 17:33:33 · 3265 阅读 · 0 评论 -
js输出当前系统时间
当前系统时间 显示时间的位置window.onload = function(){ showTime();}function checkTime(i){ if (i<10) { i="0" + i; } return i;}function showTime(){ var now=new Date(); var year=now.getFullYear(原创 2017-05-13 17:12:58 · 1060 阅读 · 0 评论 -
物体运动-jQuery-图标向上运动再从下方出现运动到原位置
图标动画效果演示*{margin: 0;padding: 0;}#move{height:200px;width:300px;margin: 10px auto;background: #eee;border: 1px solid #ccc;}#move a{display:inline-block;height:25px;width:58px;background: #fff;margi原创 2017-05-12 17:21:47 · 848 阅读 · 0 评论 -
js物体运动-图标向上运动再从下方出现运动到原位置
图标动画效果演示*{margin: 0;padding: 0;}#move{height:200px;width:300px;margin: 10px auto;background: #eee;border: 1px solid #ccc;}#move a{display:inline-block;height:25px;width:58px;background: #fff;margi原创 2017-05-12 16:44:37 · 668 阅读 · 0 评论