宅到深夜 - 博客园

2019年9月23日

摘要：百分比布局，可以实现宽度自适应阅读全文

posted @ 2019-09-23 15:34 宅到深夜阅读(148) 评论(0) 推荐(0)

摘要： 1.左侧固定，右侧自适应 2.右侧固定，左侧自适应 3.两侧固定，中间自适应阅读全文

posted @ 2019-09-23 14:02 宅到深夜阅读(507) 评论(0) 推荐(0)

摘要：概念：触发了BFC的盒子，盒子内部与外部完全隔离，容器内的子元素不会在布局上影响到外部的元素一.产生BFC的方式： 1.overflow只要取值不是visible的情况 2.float的取值不为none的时候 3.display取值为table或者inline-block 4.position的取阅读全文

posted @ 2019-09-23 13:00 宅到深夜阅读(453) 评论(0) 推荐(0)

2019年9月22日

精灵图sprite的使用

摘要： 1.将小图标拼接在一张图片上，制作一张精灵图sprite.png 2.用PS打开精灵图sprite.png，利用切片工具选中需要添加到网页上的图标，双击查看切片选项，记录四个尺寸属性(W,H,X,Y) 3.在css中添加图标样式阅读全文

posted @ 2019-09-22 21:37 宅到深夜阅读(809) 评论(0) 推荐(0)

ico图标的引用

摘要： 1.需要设计师提供图片（ .jpg .jpeg .gif .png等图像格式） 2.登录对应的网站http://www.bitbug.net/,将图片转换成ico格式的文件 3.使用代码阅读全文

posted @ 2019-09-22 20:59 宅到深夜阅读(986) 评论(0) 推荐(0)

2019年9月21日

flex伸缩布局

摘要：一.在父盒子上设置样式 1.display:flex;让盒子变成一个伸缩盒子 2.flex-direction 控制主轴方向 flex-direction:row 水平往右； flex-direction:column 垂直往下； 3.justify-content 主轴对齐方式 justify-c 阅读全文

posted @ 2019-09-21 23:06 宅到深夜阅读(1472) 评论(0) 推荐(0)

字体图标

摘要： 1.阿里巴巴矢量图标使用（1）在阿里巴巴矢量图标官网 https://www.iconfont.cn/ 搜索所需要的图标。（2）点击添加到购物车（添加入库）（3）到我的购物车，点击下载代码。（4）解压后，将.css .eot .svg .ttf .woff .woff2文件保存到一个新建文件阅读全文

posted @ 2019-09-21 20:57 宅到深夜阅读(325) 评论(0) 推荐(0)

CSS动画

摘要： 1.申明并使用动画第一步申明动画或第二步使用动画 animation:动画名称动画时间延时时间动画次数（infinite 不限次数）动画方向（normal ：从 from 到to alternate 从 from 到to 再从to 到from）动画效果（linear ease st 阅读全文

posted @ 2019-09-21 18:24 宅到深夜阅读(151) 评论(0) 推荐(0)

transform 变换

摘要： 1.scale 缩放 transform:scale(x,y) 如：transform:scale(2,1.5) transform:scaleX(2) transform:scaleY(2) 2.translate 平移 translate(x,y) 如：transform:translate(1 阅读全文

posted @ 2019-09-21 17:15 宅到深夜阅读(228) 评论(0) 推荐(0)

子盒子在父盒子中居中的样式

摘要： .father{ position:relative; width:600px; height:600px; } .son{ width:200px; height:200px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) } 阅读全文

posted @ 2019-09-21 16:53 宅到深夜阅读(941) 评论(0) 推荐(0)

公告