随笔分类 -  web前端CSS3基础

CSS3的学习笔记
CSS3----less----预处理器
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>运行式编译</title> <style type="text/less"> *{ margin: 0; padding: 0; } .wrap{ position: relati 阅读全文
posted @ 2021-07-19 09:44 2237774566 阅读(65) 评论(0) 推荐(0)
CSS3----过渡--整合
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html{ height: 100%; } body{ w 阅读全文
posted @ 2021-07-16 16:41 2237774566 阅读(35) 评论(0) 推荐(0)
CSS3----新增UI样式----线性渐变
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 600px; height: 阅读全文
posted @ 2021-07-16 10:58 2237774566 阅读(56) 评论(0) 推荐(0)
CSS3----新增UI样式
摘要：圆角 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 200px; heigh 阅读全文
posted @ 2021-07-14 21:44 2237774566 阅读(62) 评论(0) 推荐(0)
CSS3----盒模型新增样式
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .test{ width: 200px; height: 阅读全文
posted @ 2021-07-13 21:28 2237774566 阅读(46) 评论(0) 推荐(0)
CSS3----文本新增样式
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 300px; height: 阅读全文
posted @ 2021-07-13 12:05 2237774566 阅读(82) 评论(0) 推荐(0)
CSS3----自定义字体（自定义字体与字体图标）
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* @font-face { font-family:Daum; src: url(font/Inkfree.t 阅读全文
posted @ 2021-07-13 11:54 2237774566 阅读(186) 评论(0) 推荐(0)
CSS3----伪元素和伪类选择器----伪元素选择器
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* div{ height: 200px; backgr 阅读全文
posted @ 2021-07-12 15:06 2237774566 阅读(49) 评论(0) 推荐(0)
CSS----伪元素和伪类选择器----结构性伪类
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* .wrap li:nth-child(1){ 找到w 阅读全文
posted @ 2021-07-12 14:16 2237774566 阅读(48) 评论(0) 推荐(0)
CSS3----伪元素和伪类选择器---动态伪类和表单伪类
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #test:hover{ color: pink; } #test:active{ color: red; } < 阅读全文
posted @ 2021-07-09 16:58 2237774566 阅读(59) 评论(0) 推荐(0)
CSS3----伪类与伪类元素选择器--链接伪类和锚点伪类
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ text-decoration: none; } a:link{ color: #bfa; } a:visi 阅读全文
posted @ 2021-07-09 12:01 2237774566 阅读(110) 评论(0) 推荐(0)
CSS3----属性选择器
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* #wrap > div{ border: 1px s 阅读全文
posted @ 2021-07-09 11:28 2237774566 阅读(54) 评论(0) 推荐(0)
CSS3----基本选择器及其扩展
摘要：1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 /* 8 通配符，类选择器（.），id选择器（#），元素（元素名），后代（空格），分组 阅读全文
posted @ 2021-07-09 11:26 2237774566 阅读(47) 评论(0) 推荐(0)