大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

css项目中常用知识总结

css项目中常用知识总结 一、div+css布局 1.css水平垂直居中 方法1:兼容性最好的方法 . top: 50%; 定义父容器的弹性项目以主轴排列justify-content: center; display: flex; } 二、移动端布局 1.1px像素的问题 @mixin border-1px($color) { position: relative; } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { :after { -webkit-transform: scaleY(.border-1px { @include border-1px($color1) }

move.js操作CSS3动画

ease(fn):ease函数指定CSS3过渡的行为。ease 函数有 in、out、in-out、snap、cubic-bezeir等. .end():用于move.js代码片段的结束,标识动画的结束. pop方法 pop方法用在move.js方法结束之前,及.rotate(180) . 这个例子中,square元素会先移动到坐标为(500,200)的位置,然后左移500px,然后再以2s的时间以180°旋转的方式向上移动200px,即回到最初的位置。但是当我们去掉其中一个.

CSS3 border-radius 属性

上述位置1、2、3、4可以分别用border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius表示。示例: test { border-radius: 35px 15px 25px; width: 100px; } 如果要画椭圆角,就要设置border-radius水平半径和垂直半径不同。此时使用‘/’号隔离,‘/’号前表示水平半径,‘/’号后表示垂直半径,缺省值时表示含义同上。示例:test { border-radius: 45px/20px; background: #8AC007;

移动端解决方案学习记录

移动端解决方案学习记录 先附上参考资料链接; 移动端适配方案(上) 移动端适配方案(下) 可伸缩布局方案 一个CSS的px值转rem值的Sublime Text 3自动完成插件。 最终测试了 lib-flexible 的用法; 测试代码如下: html结构 Document 1rem === 100px 2rem == 200px 3rem == 300px 4rem == 400px css样式 div { margin: 0.133333rem 0;test1 { border: 0.013333rem solid red; width: 1.333333rem; width: 4.0rem;

css:transform,transition,animation总结

css:transform,transition,animation总结 1. transform 2d 名称 说明 transform 变形功能 transform-orign 指定变换起点 1.1 transform的属性值 名称 说明 参数 translate/translateX/translateY 平移 长度值或百分数 scale/scaleX/scaleY 缩放 数值 rotate 旋转 角度 skew 倾斜 角度 matrix 矩阵 略 例子: transform: translateX(100px); transform: rotate(45deg);hello world 加上过度效果: div{ width: 200px; } } 简写: animation: anim 5s ease;

居中问题总结 今天看到一道面试题,怎么样一个div水平垂直居中,当时想到的就是绝对定位+top和left,却忘了再通过margin进行修正,于是拿出css权威指南,重新复习了下定位的知识,写个总结: 一.水平居中 #box{ width: 300px; height: 200px; background-color: bisque; margin: 0 auto; position: absolute; bottom: 0; /*高度的一半*/ margin-left: -150px; transform: translate(-50%,-50%);

两种方式javascript实现图片预览

两种方式javascript实现图片预览 方式一:更适合H5页面,兼容ie10+,图片base64显示,主要功能点是FileReader和readAsDataURL 简洁代码如下: files-h5 function showPreview(source, imgId) { var file = source.files[0];方式二:更适合PC端,兼容ie7+,主要功能点是window.URL.createObjectURL 简洁代码如下: files-pc /* 图片预览 */ function showPreview(fileId, imgId) { var file = document.getElementById(fileId);

Vue实现web分页组件

Vue实现web分页组件 原文地址:http://www.maoyupeng.com/web-pagination-component-for-vue.html 效果演示 源代码 测试分页 - www.maoyupeng.com body{padding:0; that.init() }, currentPage (val) { var that = this that.init() } }, methods: { // 跳转到某页码 next (num) { var that = this if (num = that.totalPageCount) that.currentPage = that.totalPageCount;i starNum+6;i++) { tmp = {key:i, value:i } that.pagingList.push(tmp) } } else { var starNum = that.currentPage - 1;

分享一个色块跟随鼠标移动的菜单代码

分享一个色块跟随鼠标移动的菜单代码 demo地址:http://www.dtzhuanjia.com/pri...html: 菜单 菜单1 菜单2 菜单3 菜单4 菜单5 菜单1 菜单2 菜单3 菜单4 菜单5 var hc = new HoverChange({ hcWidth : "200px", hcType : "block", hcBg : "#ff5943", hcDuration : "0.6s", });css({ "width" : _this.hcWidth, "background-color": _this.hcBg, "transition-duration" : _this.hcDuration, "margin-left" : ($(li).line-height: 50px;curBlock {left:0;

table宽度

table宽度 题目虽然是说table的宽度,但其实最让人抓狂的是单元格td的宽度。平时开发中也经常会遇到这方面的问题,所以我找资料学习table的宽度的算法。 table-layout table-layout定义了表格布局算法,值为auto或fixed。 fixed 采用固定表格布局算法对表格布局。表格的宽度有width决定,列的宽度有首行单元格的width决定。先上一个demo。分析一下,这里table计算宽度为200px,第一列的计

纯CSS实现对白框

background:#FFF; position: relative; left: 30px; top: 100px; border: 25px solid; border-color: #666 transparent transparent #666; } #demo:after { content:""; left: 38px; border: 15px solid; } 有几个细节需要注意: #demo:after的两条有色边框应该与盒子的背景颜色相同,所以要记得给盒子设置背景颜色,而不是透明;此处我将盒子背景设置为与边框相同的白色。 此处有绝对定位,可以不给border设置width:0px;

常见布局方法总结-居中布局

content { display: inline-block;wrap { position: relative; width: 200px; margin-left: -100px; } (4) absolute+left:50%+translateX(-50%) 使用场景:子元素宽度不确定,支持css3的translate属性,子元素之间互不影响 快过年了快过年了快过年了快过年了快过年了快过年了快过年了 . transform: translateX(-50%);wrap { display: flex;wrap { display: table-cell; width: 300px; margin-top: -50px; transform: translateY(-50%); align-items: center;

百度前端任务(3)(4)(5)——巧谈前端基础html,css布局

background: blueviolet; width: 100%; margin-left: -200px; } 这样就用绝对布局实现了一个比较简单的右侧固定宽度,左侧宽度自适应的做法。 然后再在各个板块上加上各自的margin,padding属性就比较很好看了。 但是,可能有很多新手还不是很清楚margin,padding和width属性到底具体指什么,这里我用一张图说明一下吧。 具体如果还不知道怎么做,可以留言,我会细心帮你解答。

提升用户体验的利器——使用Vue-Occupy实现占位效果

vue文件里面通过v-occupy使用。 参数 参数 类型 描述 是否必须 data {Object} 将要绑定在节点上的数据 Yes config {Object} 占位色块的配置项 No 举例: export default { data () { return { content: '', config: { width: '200px', height: '18px', background: '#ddd' } } }, mounted () { fetch(url). height: 100%;

细说 jQuery 事件篇(五)

细说 jQuery 事件篇(五) 如果我们需要移除已经注册的事件处理程序,使某些处理程序失效。一种做法是在事件处理程序中使用条件语句进行判断,另一种更彻底的做法就是直接移除该处理程序。 移除处理程序 假设有个 div 和 button,当我们点击 button 时即改变 div 的背景色,当如果我们点击 div 本身则移除 button 上的 click 事件处理程序。 changeBgColor 样式: div { width: 200px;

css三栏布局:左右固定宽中间自适应

css三栏布局:左右固定宽中间自适应 圣杯布局 直接上代码:html: css: .middle,.left,.right {float: left; position: relative;} .middle {width: 100%;} .left {margin-left: -100%; width: 220px; left: -220px;} .right {margin-left: -220px; width: 220px;right: -220px;} .container {padding: 0 220px 0 220px} 双飞翼布局 html: css: .middle,.left

CSS形状之border-radius

CSS形状之border-radius 开发者常用border-radius来将矩形更改为圆角矩形,大部分人写上例如border-radius:5px;height: 100px; 当设置四个width: 200px; 此为css3新增的属性。 为border-radius分别指定水平、竖直弯曲程度 如上图所示,border-radius每个角度的弯曲程度都包括水平弯曲长度和竖直弯曲长度。border-radius:50%;相当于border-radius: 50%/50%; 等同于 border-top-left-radius: 2em 0.5em;

2种方法实现经典的左侧固定宽度200px,右侧自适应宽度的布局

} #left{ float: left; background: red; }    先来解释下含义,首先将body的display为flex,让body遵从flex布局,并且设置flex-flow为row,横向的,然后就是左侧div宽度200px,右侧div的flex:1,这里很关键,1会将剩余宽度全部占满,即如果左侧宽度发生改变的话,右侧能够自适应,而不用像第一种方法那样margin-left也要修改。这就是display flex的强大之处,而在面试中,没有一个人使用这种方法..

前端学习总结【101天】:CSS——关于伪类hover选择器的测试

前端学习总结【101天】:CSS——关于伪类hover选择器的测试 随便叨叨 关于:hover这个伪类选择器的使用方法,之前耽误了我超多时间,测试了蛮久,拿出来说下。 学习总结 通过伪元素、伪类无法实现子元素选择父元素,后面的元素选择前面的元素。 一、初始代码 .grandfather { height: 300px; background: gray;father { height: 200px;grandfather div p { margin: 0; border: solid 1px red;child1 { background: black;

flex属性详解

width: 600px;div { height: 100px;item-1 { width: 140px; flex: 2 1 auto; background: darkblue;item-3 { flex: 1 1 200px; background: lightblue;