首页
Python
Java
IOS
Andorid
NodeJS
JavaScript
HTML5
【
从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
】的更多相关文章
从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p></div> -- 对 <a href="#"><span></span></a> -- 对 <span><div></div></span> -- 不合理 2. 块级元素不能…
从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 aside 定义网页的侧边栏 hgroup 将网页某个区域的标题进行组合 figure 将网页中的元素进行组合 figcaption 定义figure的标题 dialog 定义一个对话框 2.定义带有记号的文本语法: <mark>带有记号的文本</mark> 3.定义一定范围内的标量或测…
从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成,声明由属性和值组成. 语法: 选择符{ 属性:值; 属性:值; } 注: (1)属性和值用冒号连接 (2) 一条声明结束要添加分号 (3)属性和属性不分先后顺序 3.样式表的创建 1.内联样式(行间样式,行内样式) 语法:<标记 style="属性:值;"></标记&g…
从零开始学习前端开发 — 11、CSS3选择器
一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择器) 1.后代选择器语法: E F eg: .box a{color:red;} 匹配.box中所有的子元素a 2.子代选择器语法: E>F eg: .box>a{color:red;} 匹配.box中第一级子元素a 3.相邻兄弟选择器语法: E+F eg: .box+h3{background:…
从零开始学习前端开发 — 18、BFC
一. BFC的概念 BFC--block formating context的缩写,中文译为"块级格式化上下文" 二.如何触发BFC 1.设置float除none以外的值(left,right) 2.设置overflow除visible以外的值(hidden,auto,scroll) 3.设置display属性(table,table-cell,inline-block,flex) 4.设置position属性(fixed,absolute) 三.BFC的作用 1.可以解决上下marg…
从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 eg: transition: all 1s; ident 指定要过渡的css属性列表 eg: transition:border-radius 1s,background 2s; none 没有属性发生过渡 注:我们可以省略滑过状态或其他状态的过渡属性,但是不能省略初始状态的transition属性…
从零开始学习前端开发 — 3、CSS盒模型
★ css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成 1.内容(content) 宽度 width:数值+单位; 高度 height:数值+单位; eg: .box{width:200px;height:100px;} 2.补白或填充 (设置内容和边框之间的距离) 语法:padding:数值+单位; a) 设置一个值:padding:10px; (四…
从零开始学习前端开发 — 1、HTML基础
一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联盟)制定,行为标准由ECMA(欧洲电脑厂商联合会)制定 二.html相关概念 1.html-超文本标记语言 2.xhtml-可扩展的超文本标记语言 3.html5-html的第五次重大修改 注:html和xhtml的区别: XHTML规范:必须小写,有开始结束标签,属性也用双引号. HTML规范:不…
从零开始学习前端开发 — 17、CSS3背景与渐变
一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景在边框及边框以内的区域可见 b) padding-box 背景在padding及padding以内的区域可见 c) content-box 背景在content区域可见 二.背景原点: background-origin:padding-box|border-box|content-box; 作用:…
从零开始学习前端开发 — 16、CSS3圆角与阴影
一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border-radius:50px 5px; 左上,右下为50px,右上,左下为5px 3.设置三个值 border-radius:10px 50px 20px; 左上为10px,右上,左下为50px,右下20px 4.设置四个值 border-radius:0px 10px 30px 50px; 顺时针方向依…