css
muzi187
这个作者很懒,什么都没留下…
展开
-
js模拟QQ面板拖拽效果及状态切换效果(DOM事件)
利用js的DOM事件模拟QQ面板的拖拽效果,以及QQ面板的状态切换效果 拖动 帐 号: 密 码:原创 2016-12-13 10:51:53 · 902 阅读 · 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 · 17564 阅读 · 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 · 642 阅读 · 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 · 4008 阅读 · 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 · 2027 阅读 · 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 · 2078 阅读 · 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 · 1243 阅读 · 0 评论 -
模拟天猫--网页定位导航效果
分为左右两部分左侧内容,右侧炫富的导航菜单左侧滚动时,右侧内容不改变位置点击右侧链接,左侧定位到相应栏目左侧滚动到相应栏目,右侧定位到对应链接锚点(anchor):锚点是网页制作中超链接的一种,又叫命名锚记。锚点是一种页面内的超级链接jQuery事件:1、scroll([data],fn):当用户滚动指定的元素时,会发生scroll事件适用于所有可滚动的元素和windo原创 2017-08-01 16:57:37 · 1223 阅读 · 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 · 1505 阅读 · 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 · 10352 阅读 · 0 评论 -
css实现-商城分类导航效果
全部商品分类 图书、音像、数字商品 电子书 免费 小说 励志与成功 婚恋/两性原创 2017-05-17 16:03:33 · 599 阅读 · 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 · 682 阅读 · 0 评论 -
使用div显示文字
使用div显示文字时,想要只显示一行,且多余部分用省略号表示,只需设置div的style即可。style="width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"原创 2017-01-09 16:32:27 · 4377 阅读 · 0 评论 -
键盘事件模拟抽奖
键盘事件KeyDown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件。KeyPress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。KeyUp:当用户释放键盘上的键时触发。EVEVT对象的keyCode属性用于得到键盘对应键的键码值图片分别为刚进入页面,正在抽奖,点击停止后html 抽奖原创 2016-12-17 16:07:42 · 370 阅读 · 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 · 960 阅读 · 0 评论