摘要: 1. 伸缩布局应用: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> section { width: 80%; height: 200px; border: 阅读全文
posted @ 2019-11-26 18:40 ivy_wang 阅读(286) 评论(0) 推荐(0) 编辑
摘要: 溢出文字隐藏 word-break: 自动换行 normal 使用浏览器的换行规则 break-all 允许在单词内换行 (允许拆开单词换行) keep-all 只能在半角空格或连字符处换行 主要处理英文 white-space 设置或检索对象内文本显示方式。通常我们使用强制一行显示内容 normal 默认处理方式 nowrap 强制在同一行内显示所有文本,直到文本... 阅读全文
posted @ 2019-11-26 16:47 ivy_wang 阅读(1682) 评论(0) 推荐(0) 编辑
摘要: 一、过渡效果 设置方式: 小知识点: 二、设置变形中心点 三、透视透视 perspective 四、CSS动画animation 阅读全文
posted @ 2019-11-26 16:01 ivy_wang 阅读(336) 评论(0) 推荐(0) 编辑
摘要: 演示例子: 阅读全文
posted @ 2019-11-26 15:50 ivy_wang 阅读(205) 评论(0) 推荐(1) 编辑
摘要: 滑动门的核心技术: 微信导航栏练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { lis 阅读全文
posted @ 2019-11-26 15:47 ivy_wang 阅读(376) 评论(0) 推荐(0) 编辑
摘要: 字体图标的作用: 字体图标使用流程: 应用: 阅读全文
posted @ 2019-11-26 15:37 ivy_wang 阅读(178) 评论(0) 推荐(0) 编辑
摘要: CSS技术的使用场景:有效的减少了服务器接收和发送请求的次数,css精灵是一种出来网页背景图像的方式,将一个页面设计到的所有零星背景图集中到一张大图中去,然后将大图应用于网页 。通过background-position 和padding来实现 例如要切大图里的小图: 制作精灵图遵循原则1. 精灵图 阅读全文
posted @ 2019-11-26 15:30 ivy_wang 阅读(570) 评论(0) 推荐(0) 编辑
摘要: vertical-align 垂直对齐 (对于块级元素无效,主要用来控制表单或者图片与文字对齐的) 图片和文字默认是基线对齐 属性: baseline 基线 top 顶线 middle 中线 bottom 底线 vertical-align 另一个作用 去除文字底侧空白缝隙 有一个特性:图片或者表单等行内块元素,他的底线和父级盒子的基线对齐,装图片底层会有一个空白缝隙 解决方法1:display: 阅读全文
posted @ 2019-11-26 15:17 ivy_wang 阅读(524) 评论(0) 推荐(0) 编辑
摘要: 1. 鼠标样式cursor 检测鼠标指针在对象上移动的鼠标指针采用何种系统预定于的光标形状 常用属性: default 小白 hands小手 /pointer move移动 text文本 2. 轮廓 outline 绘制于元素周围的一条线,位于边框边缘外围,可起到突出元素的作用 属性: outline-color outline-style outline-width 一般不会去设置外边线 直接取 阅读全文
posted @ 2019-11-26 15:10 ivy_wang 阅读(330) 评论(0) 推荐(0) 编辑
摘要: 常见的三种方式 阅读全文
posted @ 2019-11-26 15:07 ivy_wang 阅读(4885) 评论(0) 推荐(1) 编辑
摘要: 概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用。边偏移加定位定位模式才能构成一个完整的定义方式。 偏移量说明: 定位模式的分类 一、静态定位 二、相对定位 三、绝对定位 四、固定定位 五、叠放层次z-index 六、定位的模式转换 阅读全文
posted @ 2019-11-26 15:03 ivy_wang 阅读(331) 评论(0) 推荐(0) 编辑