CSS
文章平均质量分 72
henouren
这个作者很懒,什么都没留下…
展开
-
css实现气泡框效果
利用css实现如上图所示的气泡框效果。 /*气泡框效果实现*/.footer .footerArea .footerRight ul li a:hover .disNone span{ width:0; height:0; font-size:0; overflow:hidden; position:a原创 2017-09-07 15:56:08 · 633 阅读 · 0 评论 -
CSS实现垂直居中(三)
在这之前,已经写了两篇关于垂直居中的实现方法,但是由于涉及到的情况各不相同。采用的方法也不一样,今天,另外介绍一种简单的通过CSS实现不同大小浏览器窗口垂直居中的方法。关键代码: #popup img{ max-width: 100%; max-height: 100%; /*以下三行实现垂直居中*原创 2017-10-20 13:46:04 · 261 阅读 · 0 评论 -
JS控制GIF图片的停止与显示(掷骰子实现)
在掷骰子游戏中,通过需要控制骰子的转动以及转动结果的显示,骰子的转动可以用GIF动图来实现,每次投掷骰子的结果可以通过点击按钮显示静态图片。代码如下: CSS实现GIF动图的停止与开始 var image = document.getElementById("gifImg");原创 2017-10-13 11:01:38 · 4247 阅读 · 1 评论 -
CSS实现三列自适应的两种方法
实现三列自适应布局 /*方法一:绝对定位法 将左右两侧分别使用绝对定位,通过left/right使之分别固定在左右两侧,并设置宽度 设置中间部分的margin为左侧的宽度 */ *{ margin: 0; padding: 0; height: 500px; } .left{ positio原创 2017-10-13 10:18:54 · 779 阅读 · 0 评论 -
CSS实现左边不动,右边自适应布局
如题,通过CSS实现左边固定,右边自适应的布局。主要有以下两种方法,均在代码上体现。 布局左不动右边自适应的两列布局 /*方法一:左边定宽,且浮动left*/ *{ margin: 0; padding: 0; } #left{ background: #007AFF; width: 250px;/*定宽*/原创 2017-10-13 09:59:09 · 3049 阅读 · 0 评论 -
CSS实现两列同等高度
要实现两列内容不同的元素显示同等高度,除了通过使用table表格以及设置固定高度外,还可通过使用display:table-cell实现。 实现布局两列等高 #box{ width: 800px; margin: 0 auto; } .col{ /*以下一句是核心代码*/ display:table-cell;/*原创 2017-10-13 09:50:50 · 1808 阅读 · 0 评论 -
图片全屏预览实现
要实现图片的全屏预览,主要知识点有一下几个:(1)点击图片弹出弹出层(2)获取已点击图片的图片地址(3)弹出层样式处理(包括背景透明度、图片居中等)(4)点击屏幕弹出层消失代码实现:HTML:主要是显示图片并创建弹出层 JS:纯js实现var imgs = document.getElementById("con原创 2017-10-20 14:26:34 · 5598 阅读 · 1 评论 -
前端性能优化常见方法
常见的web前端性能优化的方法总结:(1)减少http请求次数:CSS Sprites,JS、CSS源码压缩,控制图片大小;网页启用Gzip压缩,CDN托管,data缓存,图片服务器。(2)前端模板JS+数据,减少由于HTML标签导致的带宽浪费,前端使用变量保存ajax请求结果,每次操作本地变量,减少请求次数(3)用innerHTML代替DOM操作,减少DOM操作次数,优化javasc转载 2017-10-19 17:29:35 · 421 阅读 · 0 评论 -
常用的CSS动画效果
在实际运用中,经常需要用到旋转、放大等动画效果。以下列举了一些常见的动画效果的CSS实现。所有的动画都需要设置过渡transition:.rotateImg,.scaleImg,.rotateAndScale,.translateImg{ transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out原创 2017-09-12 17:36:53 · 1134 阅读 · 0 评论 -
HTML&CSS知识点(一)
本文非原创,转载自以下文章: (http://www.cnblogs.com/coco1s/p/4034937.html) 1、常用浏览器的内核 IE:trident内核 Firefox:gecko Safari:webkit Opera:Blink Chrome:Blink(基于webkit) 2、Doctype的作用、 声明位于文档的最前面的位置,处于标签之前。此标签可告知浏览转载 2017-09-12 17:26:19 · 196 阅读 · 0 评论 -
react知识点学习(一)——定义CSS样式
本文转载自:React入门到精通(三)——定义组件和css样式方法一:内部样式Hello {this.props.name} {this.props.title}; .alert-text{ font-size: 20px; } 需要注意的是,react引用js文件,type="text/babel" ,并且要转载 2017-09-26 17:48:25 · 525 阅读 · 0 评论 -
react表格实现以及jquery实时模糊查询
HTML: react-实时查询表格元素 其中,需要用到 react.js,react-dom.js,browser.js以及jquery库。react实现(searchBox.js):var Pro = React.createClass({ getInitialState:function原创 2017-09-26 17:17:42 · 4067 阅读 · 0 评论 -
CSS垂直居中实现
上一次,主要写了两种垂直居中的实现方法。后来无意间看到一篇关于CSS实现垂直居中的文章,讲了一种更为简单的实现方法,通过对父元素添加以下两行代码便可实现:align-items: center;display: flex;完整Demo代码: 垂直居中 .vertical-align{ width: 200px; height: 20转载 2017-09-18 17:13:17 · 547 阅读 · 0 评论 -
JavaScript实现回到顶部/底部的两种方法
HTML代码: CSS代码:实现按钮固定在页面右侧/*侧边栏*/.fixed-slider .back-top{ position: fixed; bottom:9%; right: 1%; z-index: 9; } .fixed-slider .back-end{ position: fixed; bottom:2%; right: 1%;原创 2017-09-18 16:20:07 · 3469 阅读 · 0 评论 -
CSS气泡框的两种实现
方法一: /*气泡框效果实现*/ .footer .footerArea .footerRight ul原创 2017-09-08 09:24:44 · 6940 阅读 · 0 评论 -
CSS垂直居中问题解决方法
在实际运用中,经常需要用到垂直居中的地方主要有一下两种情况:1、导航栏导航栏常用到的ul,li标签均为块级元素,a标签为行内元素。要使得a标签的文字垂直居中于li中,只需要a标签的高度与li的高度一致皆可。然而,a标签是行内元素,不能直接设置其height值,因此,可以选择a的dispaly方式为block,即可为之设置高度line-height。具体代码如下:原创 2017-09-15 14:43:45 · 888 阅读 · 0 评论 -
关于HTML中div从display:none到display:block透明度渐增显示的实现
在编写前端页面的过程中,经常会遇到将鼠标移至链接或li上时显示div的需求。如图:而在这过程中,为了有更好的用户体验,通常要求弹出的div显示过程是渐进的。此时可以采用以下步骤来实现:(1)在HTML中编写页面代码,并在CSS中设置要弹出的div显示display:none;HTML:原创 2017-09-07 09:28:04 · 13805 阅读 · 0 评论