随笔分类 - HTML+CSS
摘要：11-弹性布局常见属性+less 1.练习-过度、2d综合案列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> .box { width: 360px; height: 24
阅读全文
摘要：10-动画+常见页面布局+媒体查询语句+弹性布局常见属性 1.练习-太阳与海 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> * { padding: 0; margin:
阅读全文
摘要：09-渐变+过度+2D(位移+旋转+缩放) 1.过滤黑白网页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> .box { width: 100px; height: 100
阅读全文
摘要：08-圆角属性+标准盒子模型和怪异盒子模型+文字和盒子的阴影、剪裁属性+背景属性 1.练习-边框模拟三角形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> /* 边框模拟三角
阅读全文
摘要：07-H5新增属性、标签和伪类 1.练习-京东定位下拉菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="font/iconfont.css"> <style t
阅读全文
摘要：06-定位+交集选择器+图标字体 1.相对定位 <html lang="en"> <head> <style type="text/css"> /* 1 定位：将元素设置到网页中的一个具体的坐标位置。 2 相对定位也叫占位定位，相对定位通过偏移量以元素在标准流的自身位置为参考点移动， 在移动时，是在
阅读全文
摘要：05-外边距塌陷+并集选择器+块元素的宽度+img底部留白的问题 1.外边距塌陷 <html lang="en"> <head> <style type="text/css"> /* 1 嵌套的两个块元素，给第一个子元素设置外边距，此时父元素会跟着掉下来，形成外边距塌陷。 2 外边距塌陷的解决方法。
阅读全文
摘要：04-浮动+一级后代选择器 1.浮动 <html lang="en"> <head> <style type="text/css"> /* 1 行内显示模式、行内块显示模式、块级显示模式称为标准流。 2 浮动通过float属性实现，浮动是一个脱离标准流的状态，也叫浮动流。 3 当元素设置浮动之后，元
阅读全文
摘要：03-状态伪类+复合属性+外边距合并 1.四种状态伪类 <html lang="en"> <head> <style type="text/css"> /* 1 状态伪类的权重是10，当四种状态同时存在时要遵循lvha的顺序。 */ /* 未访问状态 */ a { font-size: 50px;
阅读全文
摘要：02-CSS常用属性+显示模式+选择器 1.CSS常用文件属性 color，字体颜色。 font-size，字体大小。Chrome默认字体大小16px。 font-family，字体，chrome默认字体是微软雅黑。 text-align，字体水平居中。text-align有三个值：left，居左，
阅读全文
摘要：01-HTML常用标签+特殊字符 1.HTML简介 HTML，Hyper Text Markup Language的缩写，中文译为超文本标记语言。 HTML4+CSS2常用于PC端；HTML5+CSS3常用于移动端。 2.HTML基本标签 <!DOCTYPE html>用于声明文档类型，让浏览器按照
阅读全文
