随笔分类 - 前端
摘要：定位 css布局：盒模型、浮动、定位 、这些都是最重要的布局属性。 辅助功能属性：a、文本、背景等等，为了让页面更加美观。 定位：相对定位、绝对定位、固定定位。 概念：元素位置相对于某一参考物进行的位置的偏移。 脱标：浮动、绝对定位、固定定位。 1、相对定位 相对定位：元素相对于自身进行的位置偏移。
阅读全文
摘要：html结构：超级链接a 1、a的四个状态 a标签与其他标签不同，它有四个显示状态，可以设置不同的显示样式，代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
阅读全文
摘要：做一个这个效果↓ 代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht
阅读全文
摘要：清除浮动 1、浮动存在的问题 a) 浮动的元素不能撑高父级，代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
阅读全文
摘要：浮动的性质 1、浮动的元素脱标 常见的标签都是标准流的，区分行块，如果给元素设置浮动属性，元素会脱离表准流，元素即可设置高度，又可排在一行。 未脱标：代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
阅读全文
摘要：浮动 浮动：float 漂流的意思。 作用：让元素以某一方向并排排列。 浮动的特殊效果：元素脱离标准流，既可以设置宽高，又可以一行排列。 属性值：left，right 左浮动：float: left; 从第一个元素依次去贴父元素的左侧边。代码↓ <!DOCTYPE html PUBLIC "-//W
阅读全文
摘要：标准文档流 常用的Word文档就是一个经典的标准文档流，内容必须是从上往下，从左往右书写的，有一个光标控制，前面的大小或者内容发生变化，后面的内容会跟着发生一些位置变化。 制作的html网页就是一个标准文档流。 1、从微观上有特殊的性质 1）html文本之间有空白折叠现象。 2）文字、图片、表单元素
阅读全文
摘要：父子盒模型 子盒子的整体占位不能超过父盒子的内容区域 父盒子的内容区域宽度≥子盒子width+padding*2+border*2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
阅读全文
摘要：一、文字居中 1、水平方向居中: 2、垂直方向: ①:单行文本居中，行高等于盒子高↓ 完整代码、效果图 ↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
阅读全文
摘要：边框border 盒子占有的最外层的区域，本身是一个复合属性。 1、按样式类型分类 分成:线的宽度、线的样式、线的颜色。 宽度:border-width 宽度及颜色的演示代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
阅读全文
摘要：padding内边距 位置在宽高和边距之间，上下左右四个方向都可以设置内边距。 单位:px padding:本身是同一个复合属性，单一属性是各个方向的内边距。 padding-left(左边距) padding-right(右边距) padding-top(上边距) padding-bottom(下
阅读全文
摘要：盒模型 概述 盒模型:也叫框模型 一个盒子内容包含了五部分:宽度、高度、内边距、边框、外边距。 代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
阅读全文
摘要：1、font-style:字体样式 设置字体倾斜样式或者正常样式。 取值:normal(正常)、italic(斜体)、oblique(斜体) 代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
阅读全文
摘要：font-weight:字体加粗 属性值:数字、单词 数字:100,200……700。 数字400正常属性，代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
阅读全文
摘要：1、颜色:color 色值:十六进制、RGB、rgba、颜色名。 十六进制写法↓ color:#ff0000;红色 实际中用工具吸取(fw,ps等) 颜色使用:背景色、边框色等。 2、字体:font-family 中文:微软雅黑、宋体。 英文:Aroal、Consola 书写方法↓ 3、字号:fon
阅读全文
摘要：1、继承性 层叠式的第一个特性:继承性 继承性:给祖先设置属性，后代会继承祖先里的某些属性(并不是全部属性都继承过来) 代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x
阅读全文
摘要：基础选择器并不能满足我们所有需求，在基础选择器上进行了延伸。 1、后代选择器 通过标签之间的嵌套关系，层级关系，限定我们答题范围，在范围内具体查找相关元素。 代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt
阅读全文
摘要：1、标签选择器 通过标签名直接选择相应的标签，标签是什么就用什么选择。 代码↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit
阅读全文
摘要：css概念 css:cascading style sheets层叠式样式表，规定了html标签在网页上的显示样式 html4的时候，w3c组织将html的结果和样式做了分离。 前端三层: html 结构层，打开网页的整体架构。 css 样式层，装饰页面。 JavaScript 行为层，一些页面交互
阅读全文
摘要：1、注释 注释:里面的内容是给程序员看的，在浏览器上不会渲染。 作用:清晰标注，有一部分代码不想显示，希望保留。 书写:<!--注释内容--> sublime快捷键添加注释:ctrl+/ 2、字符实体 一些特殊符号并不能直接文本内容里书写 如果想在网页显示<h1>，很明显这个不能直接写 html提供
阅读全文
浙公网安备 33010602011771号