css @media 标签 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。 语法 @media mediatype and|not|only (media feature) { CSS-Code; } 媒体…
传统的页面布局方案基于盒状模型;依赖display属性+position属性+float属性。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。 基本概念 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局:isplay: flex; 采用 Flex 布局的元素,称为 Fl…
Sass (Syntactically Awesome Stylesheets) Sass是一个将脚本解析成CSS的脚本语言,即SassScript。 Sass包括两套语法 最开始的语法叫做“缩进语法”,与Haml类似,使用缩进来区分代码块,并且用回车将不同规则分隔开。 而较新的语法叫做“SCSS”,使用和CSS一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。 通常情况下,这两套语法通过.sas…
在页面中设置锚点,方便对整个页面进行段落区分。 设置锚点的方法 1、使用ID元素定位 Html 中的任意标签都可以使用ID元素创建一个锚点。 如: <div id="anchor">top</div> <span id="point">content</span> <li id="anchor_point">bottom</li> 2、使用nam…
box-sizing: content-box|border-box|inherit; box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽…
div 块元素高度为0 当div块元素中包含的子div元素都是浮动元素;则会出现子div元素有高度,但父div元素的高度为0。 解决办法: 父元素设置height高度 添加overflow属性可设置为auto、hidden 添加一个空的div 使用为元素:after
Html 标记语言中的列表元素有ul和ol;两者的选择主要考虑列表是否要考虑排序。 ul(Unordered Lists) 无序列表 ol (Ordered Lists) 有序列表 列表的主要处理动作: 为列表设置不同的标记 将图像设置为列表项标记 为列表和列表项设置背景 设置有序列表的排序,开始和结束数字和字母 标记类型 list-style-type none 无标记。 disc 默认。标记是实心圆。 circl…
超链接 a :link 未访问 :visited 访问过 :active 激活时 :hover 悬停 文字装饰 text-decoration下划线CSS单词值参数: none : 无装饰 blink : 闪烁 underline : 下划线 line-through : 删除线 overline : 上划线 说明 一般active 和hover 两个状态的样式设置相同
html 页面编写过程中有一些元素需要特别注意使用方法。 !DOCTYPE 声明 此声明必须在html文档的第一行,位于html标签之前 此声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容…
hAtom是一个可以联合的内容的微格式,主要但不仅限于博客发布。hAtom基于Atom联合格式的一个子集。hAtom将是几个微格式开放标准之一。 该类hentry是一个根类名称,表示存在一个hAtom条目。 entry-title,author,published,entry-summary,entry-content和列出的其他hAtom属性的类名下面定义条目的属性。 hAtom模式包含以下内容: hfeed (h…