随笔分类 - 前端基础
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @font-face{ font-family:'myfont'; src :url('./font/仓耳非白W05
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：相对定位 绝对定位 固定定位 粘滞定位 导航条-粘滞定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
阅读全文
摘要：BFC虽然可以达到外部背景由内部内容撑开的效果，但是存在副作用 所以由clear将affter受浮动效果解除，来解决以上问题
阅读全文
摘要：开启BFC方式： 1.设置浮动float（副作用比较大，不推荐） 2.将元素设置为行内块元素 display:inline-block；(不推荐) 3.将元素的overlfow设置为非visible的值 overflow:scoll;(带滚动条) overflow:auto; overflow:hi
阅读全文
摘要：简单布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
阅读全文
摘要：浮动 都设置浮动时。可以达到按行排列的效果 浮动 文字环绕效果 脱离文档流效果
阅读全文
摘要：盒子模型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu
阅读全文
摘要：继承 继承 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
阅读全文
摘要：转自https://www.cnblogs.com/strugglingbo/p/14401921.html 餐厅选择器练习地址：http://flukeout.github.io/元素选择器第1关plate选中 plate 元素第2关bento选中 bento 元素id选择器第3关#fancy选中
阅读全文
摘要：查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <style> ul>li.first{ color:violet; } /* 伪类（不存在的类，特殊的类） 伪类用来描述一个
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <style> /* 子元素选择器 语法：父元素>子元素 */ div>span>p{ color: aqua; } /* [属性名]选
阅读全文
摘要：图片 查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接</title> </head> <body> <!-- img标签 引入外部图片路径 路劲规则和超链接一样 img可以算是一个行内元素，
阅读全文
摘要：查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 浏览器多个空格自动解析为一个 不能直接写大于小于以及一些特殊符号 如果需要使
阅读全文
