CSS3引入了新的网格布局（grid layout），以适应显示和设计技术的发展（尤其是移动设备优先的响应式设计）。 主要目标是建立一个稳定可预料且语义正确的网页布局模式，用来替代过往表现不稳定且繁琐的table、flow以及JS脚本混合技术来实现的网页动态布局。 本文将简单而准确的介绍网格布局属性的基本概念和使用方法（摘自踏得网在线HTML5教程）。 1. 概述 网格模板区域（grid-template-areas）、网格模板行（grid-templ...
网格模板（grid-template）属性及其普通写法（longhands）定义了一个固定数量的轨道，构成显式网格。 当网格项目定位在这些界限之外，网格容器通过增加隐式网格线生成隐式网格轨道。 这些隐含的和显式的网格线一起构成隐式网格（implicit grid）。 隐式网格轨道的尺寸由网格自动行（grid-auto-rows）和网格自动列（grid-auto-columns）属性来确定。 网格自动流（grid-auto-flow）属性用来控制无明确位置的网格项的自...
网格布局支持弹性尺寸（flex-size），这是一个很好的自适应布局技术。 弹性尺寸使用fr尺寸单位，其来自 "fraction" 或 "fractional unit" 单词的前两个字母，表示整体空间的一部分。 比如下面的CSS规则： grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr); 表示有4列，第一列100px固定尺寸，第三列 max-content 代表刚好包含元素不溢出不换行的尺寸，剩下的2列都是弹性尺寸。 按照弹性尺寸...
页面标题 <hr />是一条直线 小标题 小标题 <p> </p>指的是段落 <br />指的是换行，放在一句话的后面,重复用可以多空几行 指的是空格。圆角状态下的空格也可以在网页中表现出来。 Tab指缩进 title放上去的时候会显示 苹果 苹果是一种水果 香蕉 香蕉也是一种水果 <dl/> </dl/> 是指定义 姓名性别学科 李培能男语文 胡习平男语文 王小康男语文 戴晓男语文 表格由table标签创建，tr标签创建行，td(colspan可以横跨几...
HTML DOM基础知识 一、什么是DOM？ 1、HTML DOM 定义了访问和操作HTML文档的标准方法。 2、HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。 3、通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，...
LESS 中的注释 也可以额使用css 中的注释(/**/) 这种方式是可以被编译出来的。 也可以使用// 注释 不会被编译的 变量 声明变量的话一定要用@开头 例如：@变量名称：值； @test_width:300px; .box{ width:@test_width; height:@test_width; background-color:yellow; } 混合-(Mixin） 混合(mixin)变量 例如： .border{border:solid 10px red} ...
CSS3手册是学习CSS3的最佳文档，不管是自己写博客，还是买书，手册少不了。今天我给大家介绍一些CSS3有哪些分类及其使用。 具体参考：http://caibaojian.com/css3/ 上来进行以下整理。 从左侧我们可以清晰的看到文档分为了几大类： 属性 Properties（http://caibaojian.com/css3/properties/index.htm） 选择符 Selectors（http://caibaojian.com/css3/selectors/index.htm...
一、绘制基本图形 在每次用canvas画布时，都有几步是“套路” 1.在HTML中创建Canvas画布： 浏览器不支持canvas 2.获取画布标签，并得到一个2D对象： var c = document.getElementById(mycanvas); //获取标签var ctx = c.getContext("2d"); //返回一个用来绘制环境类型的环境，返回一个2D对象 ，该对象实现了一个画布使用的大多数方法。 1、绘制线条： ctx.lin...
【文章摘要】表单为你留了一个区域，这个区域等着你输入数据，这些数据讲被上传到后台服务器去，或者校验你的用户名密码，或者你的下单数据，总之，TA为你和网页的数据交互提供了一个友好的界面。 我承认又标题党了，表单这种基础知识从很早的Html版本就已经存在了，表单是用户输入和网页之间数据交互的一个界面，TA在Html中用这个标签来标记。 但是谁叫Html规范升级到5.0呢，我之所以要解释下，是因为有的朋友并...
一定要做的符合客户要求，不是自己认为对的。 一.基础标签 1.1 大小颜色位置 Html和CSS的关系 h1{ font-size：12px; color:#930; text-align:center; } Hello World! 1.2 强调 如在网上商城中，某产品的打折后的价格是需要强调的。如下图。 代码实现： 1.3 span 标签是没有语义的，它的作用就是为了设置单独的样...
前段时间写过一篇CSS基础知识之position，当时对float的理解不太准确，被慕课网多名读者指出（原文已修正，如有误导实在抱歉）。现对float进行更深入的学习，在此把学习心得分享给大家。 浮动的基础知识 浮动有4个属性：left（左浮动）、right（右浮动）、none（不浮动）、inherit（继承）。 浮动元素的包含块是其最近的块级祖先元素。 浮动元素会左偏移（或右偏移），直到它的外边界接触到『包含块的内边界』或『另一...
分类：WEB前端时间： 2015年9月8日 HTML 是用来描述网页的一套标记标签，是我们在web前端开发中的基础。下面PHP程序员雷雪松主要结合自己的经验给大家分享下HTML的基础知识，以及在自学过程中一些比较常用的和重要的HTML知识点。 基本标签 创建一个HTML文档 设置文档标题以及其他不在WEB网页上显示的信息 将文档的题目放在标题栏中 设置文档的可见部分 标签定义文档与外部资源的关系 ...
在学习中会遇到一些css基础知识，本篇介绍一些CSS样式基础知识。样式有几种引入方式? link 和 @import有什么区别样式有三种引入方式，分别是：外部引入式主要是使用link标签或者@import标签从外部引入后缀名为.css的样式文件，语法分别是：<link type=text/css;rel="stylesheet";herf="路径+###.css">@import url(路径+###.css);嵌入式把样式写在当前<style></style>标签内，语法是：<style>p {color:red; text-align:center;}<...
前段时间写过一篇CSS基础知识之position，当时对float的理解不太准确，被慕课网多名读者指出（原文已修正，如有误导实在抱歉）。现对float进行更深入的学习，在此把学习心得分享给大家。浮动的基础知识浮动有4个属性：left（左浮动）、right（右浮动）、none（不浮动）、inherit（继承）。浮动元素的包含块是其最近的块级祖先元素。浮动元素会左偏移（或右偏移），直到它的外边界接触到『包含块的内边界』或『另一个浮动元素的外边...
css3d 总结3d transform (3D变形)（rotate skew scale translate）基础知识perspective (视距,景深) perspective-origin (视点)transfrom(1) 坐标 x y z(2) 变形 基点位置 transform-origin(3)transfrom-style：preserve-3d3D旋转图片相册3d transform (3D变形)（rotate skew scale translate）基础知识perspective (视距,景深) perspective-origin (视点)transfrom(1) 坐标 x y z(2) 变形 基点位置 transform-origin(3)transfrom-...