2020年8月21日
摘要: css3多列布局 css多列属性 属性 描述 column-count 指定元素应该被分割的列数。 column-fill 指定如何填充列 column-gap 指定列与列之间的间隙 column-rule 所有 column-rule-* 属性的简写 column-rule-color 指定两列间 阅读全文
posted @ 2020-08-21 20:29 wen22 阅读(178) 评论(0) 推荐(0) 编辑
摘要: css3转换 1、css32D转换 2D变换方法:translate()rotate()scale()skew()matrix() (1)translate() 平移 方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。 (百分比 偏移量除以本身得x或y轴) div{ transf 阅读全文
posted @ 2020-08-21 19:05 wen22 阅读(138) 评论(0) 推荐(0) 编辑
2020年8月20日
摘要: CSS3响应式布局 响应式布局的优点 响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。优点:面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点:兼容各种设备工作量大,效率低下代码累赘,会出现隐藏无用的元素,加载时间加长其实这是一种折中性质的设计解决方案,多方面因素 阅读全文
posted @ 2020-08-20 17:36 wen22 阅读(226) 评论(0) 推荐(0) 编辑
摘要: css3过渡 1、定义 过渡是元素从一种样式逐渐改变为另一种的效果 (1)指定要添加效果的CSS属性 (2) 指定效果的持续时间 默认值是0。没有任何效果 div{ transition:width2s; -webkit-transition:width2s;/*Safari */} 如果未指定的期 阅读全文
posted @ 2020-08-20 15:54 wen22 阅读(127) 评论(0) 推荐(0) 编辑
摘要: css3背景 1、background-image属性 不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。 #example1{ background-image:url(img_flwr.gif),url(paper.gif); background-position:right 阅读全文
posted @ 2020-08-20 13:44 wen22 阅读(111) 评论(0) 推荐(0) 编辑
摘要: css渐变 1、定义 CSS3渐变(gradients)是在两个或多个指定的颜色之间显示平稳的过渡。 2、分类 线性渐变(LinearGradients)-向下/向上/向左/向右/对角方向径向渐变(cGradients)-由它们的中心定义 3、线性渐变 设置一个起点和一个方向(或一个角度) (1)从 阅读全文
posted @ 2020-08-20 10:32 wen22 阅读(177) 评论(0) 推荐(0) 编辑
2020年8月19日
摘要: css3边框与框大小 5.CSS3边框 (1)、CSS3圆角 在div中添加圆角元素 div{ border:2pxsolid; border-radius:25px; } (2)、CSS3盒阴影 在div中添加box-shadow属性 div{ box-shadow:10px 10px 5px # 阅读全文
posted @ 2020-08-19 21:23 wen22 阅读(548) 评论(0) 推荐(1) 编辑
摘要: css3颜色与文本效果 1.CSS3颜色 (1)、十六进制颜色 #RRGGBB,其中RR(红色),GG(绿色)和BB(蓝色)。所有值必须介于0和FF之间。 (2)、RGB颜色 RGB颜色值指定:RGB(红,绿,蓝)。每个参数(红色,绿色和蓝色)定义 颜色的亮度,可在0和255之间,或一个百分比值(从 阅读全文
posted @ 2020-08-19 21:18 wen22 阅读(170) 评论(0) 推荐(1) 编辑
摘要: css3选择器 1、基本选择器 (1)通配符选择器(*) * { marigin: 0; padding: 0; } (2)标签选择器 如div p li p{ background-color: grey; color: orange; } (3) 类选择器(.class) .important 阅读全文
posted @ 2020-08-19 21:13 wen22 阅读(174) 评论(0) 推荐(1) 编辑
2020年8月18日
摘要: HTML5的web存储 (1)、localStorage对象 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。localStorage对象存储的数据没有时间限制。 不管是localStorage,还是sessionStorage,可使用的API都相同,常用的有: 保存数据:loca 阅读全文
posted @ 2020-08-18 21:45 wen22 阅读(264) 评论(0) 推荐(0) 编辑