随笔分类 - HTML/CSS
摘要：一、实现左右两列式布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
阅读全文
摘要：浮动要封闭到一个盒子当中,否则就会对页面后续的元素产生影响 清除浮动 一、overflow: hidden 不加overflow: hidden前 给父元素添加overflow: hidden后 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta
阅读全文
摘要：BFC规范 BFC （Box Formatting Context ，块级格式上下文）是页面上的一个隔离的独立容器 一个盒子如果不设置高度,当子元素浮动时，无法撑起自身,就会造成父元素高度塌陷,原因是这个盒子没有形成 BFC 创建BFC 1.float 的值不是 none 该方法可以实现效果，但没有
阅读全文
摘要：一、理解 当元素添加了浮动后，元素就会脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素就会停下来，同时会影响后面的元素的排版 脱离文档流: 元素相当于漂浮起来，不会占据页面中的空间 文档流：文档中可显示对象在排列时所占用的空间 二、如何浮动 给需要浮动的元素添加 float 属性 |
阅读全文
摘要：如何设置 favicon.ico 通过link标签,在head 标签中添加 <!-- href是ico的存放路径 --> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
阅读全文
摘要：只需要添加 background-size: 100% 100%; 就行 div { background: url(); background-size: 100% 100%; }
阅读全文
摘要：效果 代码如下 <style> div { position: relative; width: 199px; height: 20px; border: 1px solid gray; } div::after { content: ''; position: absolute; top: 5px
阅读全文
摘要：效果 代码如下 <style> .box { position: relative; margin: 100px auto; width: 100px; height: 200px; background: blue; } .box span { position: absolute; left:
阅读全文
摘要：CSS固定菜单栏 - 当鼠标向下滑动时，位于最上面的导航一直不动，而内容发生变化 <style> * { padding: 0px; margin: 0px; } .navbar { width: 100%; background: black; /* 固定住导航条 */ position: fix
阅读全文
摘要：文字阴影(text-shadow) h4{text-shadow:3px 3px 2px yellowgreen;} 多重阴影，用逗号隔开 h4{text-shadow:3px 3px 2px yellowgreen,5px 5px 2px orange;} 盒阴影(box-shadow) 内阴影在
阅读全文
摘要：一、SVG是用标记式语言进行描述的，使用XML来描述 二、SVG支持的三种图形对象：矢量图形形状、图像和文本 三、SVG的优点： 矢量图是使用相对点来保存数据的，因此可以缩放到任意大小而不会失帧 SVG仅仅是保存矢量图，文件大小相对于JPEG、GIF和PNG更小,可压缩性更强 SVG图像可在任何高分
阅读全文
摘要：基本结构 表格：table标签 (表示整个表格) 行：tr标签 （table row，表示行，在表格中，有多少组就表示有多少行） 列：td标签 (table date cell ，表示表单行元格) 表格标题：caption标签 (表格中一般会有一个标题，有且仅有一个，默认情况下，标题位于整个表格第一
阅读全文
摘要：CSS三大特性 层叠性 继承性 优先性 层叠性 1.当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器 2.权重低的选择器效果会被权重高的选择器效果覆盖，权重相同时取后者 id选择器的权重为100，类选择器的权重为10，标签选择器的权重为1 继承性 继承性是子元素继承父元素
阅读全文
