今日内容
1.样式操作.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>样式操作:设置长宽</title> 6 <style> 7 /*<!--给行内标签设置长宽没有任何影响-->*/ 8 div,span { 9 width: 50px; 10 height: 100px; 11 color: red; 12 } 13 </style> 14 </head> 15 <body> 16 <div>div</div> 17 <span>span</span> 18 </body> 19 </html>
2.字体属性.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文体属性 </title> 6 <style> 7 /* 8 font-family 字体 9 font-size:字体大小 10 font-weight:字体宽度 11 */ 12 p{ 13 font-family: "Microsoft Yahei","微软雅黑","Arial",sans-serif; 14 font-size: 48px; 15 font-weight: lighter; 16 /*color: red;*/ 17 /*color: #4e4e4e;*/ 18 /*color: rgb(128,128,128);*/ 19 /*rgba 只能调解颜色的透明度,不能调节文本*/ 20 color: rgba(0,0,0,1.0); 21 } 22 23 </style> 24 </head> 25 <body> 26 <p>可以把多个字体名称作为一个"回退"系统来保存</p> 27 </body> 28 </html>
3.文字属性.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文字属性 </title> 6 <style> 7 p{ 8 font-size: 48px; 9 text-indent: 32px; 10 /*center 居中*/ 11 /*text-align: center;*/ 12 /*text-align: left;*/ 13 /*text-align: right;*/ 14 /*justify 证明,正确 text-align 文本对齐*/ 15 /*text-align: justify;*/ 16 /*underline下划线在文本下*/ 17 /*text-decoration: underline;*/ 18 /*overline下划线在文本上*/ 19 /*text-decoration: overline;*/ 20 /*line-through:下划线在文本中间划线*/ 21 text-decoration: line-through; 22 } 23 a{ 24 /*文本修饰内容*/ 25 text-decoration: none; 26 color: gold; 27 } 28 a:hover{ 29 color: blue; 30 } 31 </style> 32 </head> 33 <body> 34 <p>属性规定元素中文本的水平对齐方式.</p> 35 <s>属性规定元素中文本的水平对齐方式.</s> 36 <a href="http://www.xiaohuar.com">属性规定元素中文本的水平对齐方式.</a> 37 </body> 38 </html>
4.背景图片实例.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>背景图片实例</title> 6 <style> 7 .c1{ 8 height: 400px; 9 background-color: pink; 10 } 11 .c2{ 12 height: 400px; 13 background-color: red; 14 } 15 .c3{ 16 height: 500px; 17 background: url("赏心悦目图.jpg"); 18 /*background-color: yellow;*/ 19 background-attachment: fixed; 20 /*background-attachment背景附件: fixed固定的;*/ 21 } 22 .c4{ 23 height: 400px; 24 background-color: blue; 25 } 26 27 </style> 28 </head> 29 <body> 30 <div class="c1"></div> 31 <div class="c2"></div> 32 <div class="c3"></div> 33 <div class="c4"></div> 34 </body> 35 </html>
4.背景属性.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>背景属性</title> 6 <style> 7 p{ 8 color: red; 9 text-align: center; 10 background-color: yellow; 11 height: 1000px; 12 width: 800px; 13 } 14 div{ 15 /*background-color: red;*/ 16 height: 1600px; 17 width: 2000px; 18 /*background-image: url("赏心悦目图.jpg");*/ 19 /*background-image: url("赏心悦目图.jpg");背景图片默认填充整个区域,如果大小不够,默认重复填充*/ 20 /*background-repeat: no-repeat;*/ 21 /*background-repeat: no-repeat;不足区域,不默认重复填充*/ 22 /*background-repeat: repeat-x;*/ 23 /*background-repeat: repeat-x;横向允许重复填充*/ 24 /*background-repeat: repeat-y;*/ 25 /*background-repeat: repeat-y;纵向允许重复填充*/ 26 /*background-position: center center;*/ 27 /*background-position: center;居中重复填充*/ 28 /*background-position: 10px 30px;*/ 29 /*background-position: 10px 30px; 第一个参数调节的是左右 30 第二个参数调节的是上下*/ 31 32 background: pink url("今日内容/赏心悦目图.jpg") no-repeat center center; 33 /*background: pink(底色) url("赏心悦目图.jpg")(关联图) no-repeat(不重复填充) center center(居中);*/ 34 } 35 </style> 36 </head> 37 <body> 38 <p>背景图片平铺排满整个网页</p> 39 <div> 40 哈哈 41 </div> 42 </body> 43 </html>
5.边框.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>边框</title> 6 <style> 7 /*<!--border 边框 solid立体图形-->*/ 8 div{ 9 /*border-color:red;*/ 10 /*border-style: solid;*/ 11 /*border-边框宽度*/ 12 /*border- 1px;*/ 13 /*优化*/ 14 /*border:3px solid gold;*/ 15 /*border: solid 3px red;*/ 16 17 /*dashed虚线 长方形*/ 18 border: dashed blue 3px; 19 } 20 p{ 21 border-left: 30px solid red; 22 /*bottom 下边 dotted 虚线 圆球*/ 23 border-bottom: 50px dotted blue; 24 border-top: 100px dashed yellow; 25 border-right: 20px solid darkmagenta; 26 } 27 </style> 28 </head> 29 <body> 30 <div> 31 使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上,然后根据位置去显示图片.减少频繁的图片请求. 32 </div> 33 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 34 <p> 35 使用背景图片的一个常见案例就是很多网站会把小图标放在一张图片上 36 </p> 37 </body> 38 </html>
6.画圆.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>画圆</title> 6 <style> 7 div{ 8 border: 100px solid red; 9 height: 800px; 10 width: 600px; 11 background: no-repeat url("赏心悦目图.jpg") black center center; 12 /*background: pink;*/ 13 border-radius: 5%; 14 /*border-radius: 50%;height: 800px; 800px; 画圆*/ 15 } 16 </style> 17 </head> 18 <body> 19 <div></div> 20 </body> 21 </html>
7.盒子模型.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>盒子模型</title> 6 <style> 7 /*<!--margin:页面空白空间-->*/ 8 body{ 9 /*margin-top: 0;*/ 10 /*margin-right: 0;*/ 11 /*margin-bottom: 0;*/ 12 /*margin-left: 0;*/ 13 /*!*margin: 0; *!上下左右全部为零*/ 14 /*!*margin: 10px 20px; *!上下10px 左右20px*/ 15 /*!*margin: 10px 20px 30px;*!上 左右 下*/ 16 margin: 0; 17 } 18 .c1{ 19 height: 400px; 20 width: 400px; 21 background: red; 22 border: 10px solid yellow; 23 border-radius: 50%; 24 } 25 .c2{ 26 background-color: black; 27 height: 400px; 28 width: 400px; 29 border: 10px dotted red; 30 margin: auto 0; 31 text-align: center; 32 } 33 p{ 34 border: 20px dashed rebeccapurple; 35 /*padding内边距*/ 36 /*padding-top: 20px;*/ 37 /*padding-left: 10px;*/ 38 /*padding-bottom: 30px;*/ 39 /*padding-right: 50px;*/ 40 /*text-align 文本位置*/ 41 text-align: center; 42 /*border: 0;*/ 43 padding: 10px; 44 /*padding 内边距 同时支持 1 2 3 4 个参数 效果同margin 外边距*/ 45 } 46 </style> 47 </head> 48 <body> 49 <div class="c1"></div> 50 <div class="c2"></div> 51 <p>我们换个p</p> 52 <p>我们换个p</p> 53 <div class="c3"> 54 <div class="c4"></div> 55 </div> 56 </body> 57 </html>
8.0.浮动.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮动:float</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 #d1{ 11 border: 10px solid red; 12 } 13 .c1{ 14 height: 400px; 15 width: 400px; 16 background-color: yellow; 17 float: left; 18 } 19 .clearfix:after{ 20 content: "$"; 21 /*clear清晰: both两个..都..*/ 22 clear: both; 23 /*左右两边都不能有浮动的浮动的元素*/ 24 } 25 </style> 26 </head> 27 <body> 28 <div id="d1" class="clearfix"> 29 <div class="c1"></div> 30 <div class="c2"></div> 31 </div> 32 </body> 33 </html>
8.1.利用浮动实现左右布局.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>利用浮动实现左右布局</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 .blog-left{ 11 float: left; 12 width: 30%; 13 height: 1000px; 14 background-color: red; 15 } 16 .blog-right{ 17 float: right; 18 width: 70%; 19 height: auto; 20 background-color: gold; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="blog-left"></div> 26 <div class="blog-right"> 27 <div>div</div> 28 <div>div</div> 29 <div>div</div> 30 <div>div</div> 31 <div>div</div> 32 <div>div</div> 33 <div>div</div> 34 <div>div</div> 35 <div>div</div> 36 <div>div</div> 37 <div>div</div> 38 <div>div</div> 39 <div>div</div> 40 <div>div</div> 41 <div>div</div> 42 <div>div</div> 43 <div>div</div> 44 <div>div</div> 45 <div>div</div> 46 <div>div</div> 47 </div> 48 </body> 49 </html>
8.2溢出.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>溢出</title> 6 <style> 7 div{ 8 height: 50px; 9 width: 50px; 10 border: 10px solid red; 11 /*overflow溢出 hidden隐藏*/ 12 overflow:hidden; 13 } 14 </style> 15 </head> 16 <body> 17 <div> 18 <p> 19 默认值.内容不会被修剪,会呈现在元素框之外.会呈现呈现在元素框之外.会呈现呈现在元素框之外.会呈现呈现在元素框之外.会呈现呈现在元素框之外.会呈现呈现在元素框之外 20 </p> 21 </div> 22 </body> 23 </html>
8.3display属性.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>display(显示)属性</title> 6 <style> 7 #d1{ 8 display: none; 9 /*标签不显示 并且也不再占用位置*/ 10 } 11 #d2{ 12 visibility: hidden; 13 /*标签不显示 但位置占用还在*/ 14 } 15 span{ 16 display: inline-block; 17 /*display: inline-block 一列式立方体*/ 18 height: 400px; 19 width: 400px; 20 background-color: red; 21 border: 12px solid yellow; 22 } 23 .c1{ 24 height: 400px; 25 width: 400px; 26 background-color: pink; 27 display: inline; 28 float: left; 29 } 30 .c2{ 31 height: 400px; 32 width: 400px; 33 background-color: gold; 34 display: inline; 35 float: right; 36 } 37 </style> 38 </head> 39 <body> 40 <p id="d1">123</p> 41 <p id="d2">456</p> 42 <span>span1</span> 43 <span>span2</span> 44 <div class="c1">div1</div> 45 <div class="c2">div2</div> 46 </body> 47 </html>
9.圆形头像实例 .html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>圆形头像实例</title> 6 <style> 7 div{ 8 border-radius: 50%; 9 height: 800px; 10 width: 800px; 11 border: 5px solid pink; 12 background-color: rebeccapurple; 13 float: left; 14 overflow: hidden; 15 } 16 img{ 17 width: 100%; 18 max-width: 100%; 19 border-radius: 100%; 20 text-align: center; 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 <img src="../作业/赏心悦目图.jpg" alt=""> 27 </div> 28 </body> 29 </html>
10.定位.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>定位</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 .c3{ 11 height: 50px; 12 width: 50px; 13 background-color: yellow; 14 top: 100px; 15 left: 100px; 16 /*!*position: static;*!默认是静态的 不能动位置 */ 17 position: static; 18 } 19 .c2{ 20 height: 200px; 21 width: 200px; 22 background-color: red; 23 top: 50px; 24 left: 50px; 25 /*!*position: absolute;*! 绝对定位*/ 26 position: absolute; 27 } 28 /*.c1{*/ 29 /*height: 300px;*/ 30 /* 300px;*/ 31 /*background-color: blue;*/ 32 /*top: 60px;*/ 33 /*left: 60px;*/ 34 /*position: relative;*/ 35 /*!*!*position: relative;*! 相对定位*!*/ 36 /*}*/ 37 .c1{ 38 border: 12px solid red; 39 height: 100px; 40 width: 100px; 41 position: fixed; 42 /*fixed固定的*/ 43 right: 20px; 44 bottom: 50px; 45 } 46 </style> 47 </head> 48 <body> 49 <div class="c3"> 50 <div class="c2"></div> 51 </div> 52 <div class="c1"> 53 回到顶部 54 </div> 55 <div style="height: 1000px;background-color: rebeccapurple"></div> 56 <div style="height: 1000px;background-color: red"></div> 57 <div style="height: 1000px;background-color: blue"></div> 58 </body> 59 </html>
11.验证是否脱离文档流.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>验证是否脱离文档流</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 </style> 11 </head> 12 <body> 13 <div style="background-color: red;height: 50px; 50px" ></div> 14 <div style="background-color: blue;height: 50px; 50px;float: right" ></div> 15 <div style="background-color: indigo;height: 50px; 50px" ></div> 16 </body> 17 </html>
12.模态框 登录,注册界面.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模态框</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 .cover{ 11 position: fixed; 12 top: 0; 13 left: 0; 14 right: 0; 15 bottom: 0; 16 background-color: rgba(128,128,128,0.45); 17 z-index: 999; 18 } 19 .model{ 20 height: 200px; 21 width: 600px; 22 background-color: white; 23 position: fixed; 24 left: 50%; 25 top: 50%; 26 z-index: 1000; 27 margin-top: -100px; 28 margin-left: -200px; 29 } 30 </style> 31 </head> 32 <body> 33 <div>我是最底层的</div> 34 <div class="cover"></div> 35 <div class="model"> 36 <p><label for="d1">username:<input type="text" id="d1"></label></p> 37 <p><label for="d2">password:<input type="text" id="d2"></label></p> 38 <input type="submit"> 39 </div> 40 41 </body> 42 </html>
13.透明度比较.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>透明度比较</title> 6 <style> 7 .c1{ 8 background-color: rgba(128,128,128,0.9); 9 } 10 .c2{ 11 opacity: 0.5; 12 background-color: rgb(128,128,128); 13 } 14 </style> 15 </head> 16 <body> 17 <p class="c1">111</p> 18 <p class="c2">222</p> 19 </body> 20 </html>
14.去除ul标签丑陋部分.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>去除ul标签的丑陋部分</title> 6 <style> 7 ul{ 8 list-style-type: none; 9 } 10 </style> 11 </head> 12 <body> 13 <ul> 14 <li>第1项</li> 15 <li>第2项</li> 16 <li>第3项</li> 17 <li>第4项</li> 18 <li>第5项</li> 19 </ul> 20 </body> 21 </html>
readme
1 昨日内容回顾 2 1.css 3 层叠样式表 4 5 2.css学习思路 6 1.如何查找标签 7 2.如何调节样式 8 9 3.css注释 10 HTML注释:<!----> 11 CSS注释:/**/ 12 前端语言的注释在使用的时候通常遵循成双成对出现 13 <!--导航条开始--> 14 <!--导航条结束--> 15 16 /*导航条样式开始*/ 17 /*导航条样式结束*/ 18 19 20 web框架也有针对html页面的注释 21 该注释浏览器检查也是看不到的 22 称之为模板语法的注释 23 jinja2模块: {#模板语法注释#} 24 25 26 CSS语法结构 27 选择器 {属性1:值;属性2:值;属性3:值} 28 29 1.基本选择器 30 元素/标签选择器 直接写标签名 31 类选择器 点 + 类名 32 id选择器 # + id值 33 通用选择器 * 34 35 2.组合选择器 36 后代选择器 空格 37 儿子选择器 > 38 毗邻选择器 + 39 弟弟选择器 ~ 40 41 3.属性选择器 42 标签都可以设置自定义属性 43 [] 44 [hobby] 45 [hobby="jdb"] 46 input[hobby='xxx'] 47 48 4.分组和嵌套 49 div,span,p {color:red} 50 #id,.cl,span {color:red} 51 52 5.伪类选择器 53 a:link 54 a:hover 鼠标悬浮 55 a:active 56 a:visited 57 input:focus input框获取焦点(被点击选中) 58 59 60 6.伪元素选择器 61 p:first-letter 62 p:before 63 p:after 64 65 66 选择器优先级 67 1.选择器相同的情况下:就近原则 68 2.选择器不同的情况下: 69 行内>id选择器>类选择器>标签选择器 70 71 72 2.如何调节样式 73 74 75 76 77 78 79 两个快递盒之间的距离(标签与标签之间的距离) 称之为 外边距(margin) 80 纸盒的厚度(边框) 称之为边框(border) 81 内部的物品到盒子的距离(内部文本与边框的距离) 称之为 内边距(padding) 82 物品本身的大小(文本大小) 称之为内容(content) 83 84 85 浮动的元素 是脱离正常文档流的 也就意味着没有独占一行一说 86 也不再占用原来的位置 87 88 89 浮动的元素 会造成父标签塌陷 90 91 92 clear 清除浮动带来的负面影响(父标签塌陷) 93 94 95 96 97 定位： 98 所有的标签默认都是静态的 无法直接调节位置 99 你需要先将其设置成可定位状态 100 1.相对定位 101 相对于标签自身原来的位置 102 2.绝对定位 103 相对于已经定位过的父标签 104 但只给你一个父标签的长宽 让你做定位 105 3.固定定位 106 相对于浏览器窗口 固定在某个位置 107 108 109 浏览器会优先展示文本内容 110 111 112 脱离文档流 113 脱离文档流 114 1.浮动的元素都是脱离文档流的 115 2.绝对定位是脱离文档流的 116 3.固定定位也是脱离文档流的 117 不脱离文档流 118 1.相对定位不脱离文档流 119 120 121 模态框 122 123 124 opacity 即可以调节颜色透明度也可以调文本透明度
作业
1 /*博乐园页面的页面的样式文件*/ 2 3 /*通用样式*/ 4 body{ 5 margin: 0; 6 background-color: red; 7 } 8 /*去掉ul的丑陋部分*/ 9 ul{ 10 list-style-type: none; 11 /*padding填充,覆盖*/ 12 padding: 0; 13 text-align: center; 14 margin-top: 160px; 15 } 16 /*去掉a的装饰(decoration)*/ 17 a{ 18 text-decoration: none; 19 } 20 /*左侧样式*/ 21 .blog-left{ 22 float: left; 23 background-color: aqua; 24 width: 30%; 25 height: 100%; 26 position: fixed; 27 } 28 /*左侧内部头像*/ 29 /*分两部分:外部边框 内部图片*/ 30 /*外部边框*/ 31 .blog-avatar{ 32 border-radius: 50%; 33 border: 10px solid red; 34 height: 300px; 35 width: 300px; 36 margin: 40px auto; 37 overflow: hidden; 38 } 39 /*头像图片*/ 40 .blog-avatar img{ 41 max-width: 100%; 42 } 43 /*博客 格言*/ 44 .blog-title,.blog-info{ 45 color: black; 46 font-size: 50px; 47 text-align: center; 48 } 49 .blog-tag,.blog-link{ 50 font-size: 50px; 51 text-align: center; 52 } 53 .blog-link a,.blog-tag a{ 54 color: green; 55 } 56 /*a的四大伪类选择器*/ 57 /*悬浮太*/ 58 .blog-link a:hover,.blog-tag a:hover{ 59 color: red; 60 } 61 /*连接态*/ 62 .blog-link a:link,.blog-tag a:link{ 63 color: yellow; 64 } 65 .blog-link a:active,.blog-tag a:active{ 66 color: gold; 67 } 68 .blog-link a:visited,.blog-tag a:visited{ 69 color: blue; 70 } 71 /*右侧样式*/ 72 .blog-right{ 73 float: right; 74 background-color: white; 75 width: 70%; 76 height: 100%; 77 } 78 .article{ 79 background-color: pink; 80 margin: 30px; 81 /*box-shadow 盒阴影*/ 82 box-shadow: 10px 10px 10px rgba(0,0,0,0.4); 83 } 84 .article-title{ 85 border-left: 10px solid indigo; 86 text-indent: 30px; 87 /*indent缩进*/ 88 } 89 .title{ 90 font-size: 60px; 91 /*bold 加粗*/ 92 font-weight: bold; 93 } 94 .date{ 95 float: right; 96 font-size: 48px; 97 margin-left: 100px; 98 } 99 .article-body{ 100 font-size: 48px; 101 text-indent: 30px; 102 border-bottom: 3px solid black; 103 } 104 .article-bottom{ 105 font-size: 48px; 106 padding: 20px; 107 }
博客页面搭建.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>作业</title> 6 <link rel="stylesheet" href="my.css"> 7 </head> 8 <body> 9 <!--左边--> 10 <div class="blog-left"> 11 <!--博客头像--> 12 <div class="blog-avatar"> 13 <img src="赏心悦目图.jpg" alt=""> 14 </div> 15 <div class="blog-title"> 16 <p><a href="https://www.cnblogs.com/llx--20190411">没有如果的博客</a></p> 17 </div> 18 <div class="blog-info"> 19 <p>醉饮千觞不知愁,忘川来生空余恨!</p> 20 </div> 21 <!--博客连接--> 22 <div class="blog-link"> 23 <ul> 24 <li><a href="https://i.zhaopin.com/resume">关于我</a></li> 25 <li><a href="https://weibo.com">微博</a></li> 26 <li><a href="http://xyz.zbwlkj1.com:8080/xiaochengxu1/kaitong.html">微信公众号</a></li> 27 </ul> 28 </div> 29 <div class="blog-tag"> 30 <ul> 31 <li><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#Python</a></li> 32 <li><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#Java</a></li> 33 <li><a href="https://www.baidu.com/s?ie=UTF-8&wd=Golang">#Golang</a></li> 34 </ul> 35 </div> 36 </div> 37 38 39 <!--右边--> 40 <div class="blog-right"> 41 <div class="article"> 42 <div class="article-title"> 43 <span class="title">寻人启事</span> 44 <span class="date">2019/09/06</span> 45 </div> 46 <div class="article-body"> 47 <p> 48 寻人启事事成之后,赠送100万美金 49 </p> 50 </div> 51 <div class="article-bottom"> 52 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 53 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 54 </div> 55 </div> 56 <div class="article"> 57 <div class="article-title"> 58 <span class="title">寻人启事</span> 59 <span class="date">2019/09/06</span> 60 </div> 61 <div class="article-body"> 62 <p> 63 寻人启事事成之后,赠送100万美金 64 </p> 65 </div> 66 <div class="article-bottom"> 67 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 68 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 69 </div> 70 </div> 71 <div class="article"> 72 <div class="article-title"> 73 <span class="title">寻人启事</span> 74 <span class="date">2019/09/06</span> 75 </div> 76 <div class="article-body"> 77 <p> 78 寻人启事事成之后,赠送100万美金 79 </p> 80 </div> 81 <div class="article-bottom"> 82 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 83 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 84 </div> 85 </div> 86 <div class="article"> 87 <div class="article-title"> 88 <span class="title">寻人启事</span> 89 <span class="date">2019/09/06</span> 90 </div> 91 <div class="article-body"> 92 <p> 93 寻人启事事成之后,赠送100万美金 94 </p> 95 </div> 96 <div class="article-bottom"> 97 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 98 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 99 </div> 100 </div> 101 <div class="article"> 102 <div class="article-title"> 103 <span class="title">寻人启事</span> 104 <span class="date">2019/09/06</span> 105 </div> 106 <div class="article-body"> 107 <p> 108 寻人启事事成之后,赠送100万美金 109 </p> 110 </div> 111 <div class="article-bottom"> 112 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 113 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 114 </div> 115 </div> 116 <div class="article"> 117 <div class="article-title"> 118 <span class="title">寻人启事</span> 119 <span class="date">2019/09/06</span> 120 </div> 121 <div class="article-body"> 122 <p> 123 寻人启事事成之后,赠送100万美金 124 </p> 125 </div> 126 <div class="article-bottom"> 127 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 128 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 129 </div> 130 </div> 131 <div class="article"> 132 <div class="article-title"> 133 <span class="title">寻人启事</span> 134 <span class="date">2019/09/06</span> 135 </div> 136 <div class="article-body"> 137 <p> 138 寻人启事事成之后,赠送100万美金 139 </p> 140 </div> 141 <div class="article-bottom"> 142 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 143 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 144 </div> 145 </div> 146 <div class="article"> 147 <div class="article-title"> 148 <span class="title">寻人启事</span> 149 <span class="date">2019/09/06</span> 150 </div> 151 <div class="article-body"> 152 <p> 153 寻人启事事成之后,赠送100万美金 154 </p> 155 </div> 156 <div class="article-bottom"> 157 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 158 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 159 </div> 160 </div><div class="article"> 161 <div class="article-title"> 162 <span class="title">寻人启事</span> 163 <span class="date">2019/09/06</span> 164 </div> 165 <div class="article-body"> 166 <p> 167 寻人启事事成之后,赠送100万美金 168 </p> 169 </div> 170 <div class="article-bottom"> 171 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 172 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 173 </div> 174 </div><div class="article"> 175 <div class="article-title"> 176 <span class="title">寻人启事</span> 177 <span class="date">2019/09/06</span> 178 </div> 179 <div class="article-body"> 180 <p> 181 寻人启事事成之后,赠送100万美金 182 </p> 183 </div> 184 <div class="article-bottom"> 185 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 186 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 187 </div> 188 </div><div class="article"> 189 <div class="article-title"> 190 <span class="title">寻人启事</span> 191 <span class="date">2019/09/06</span> 192 </div> 193 <div class="article-body"> 194 <p> 195 寻人启事事成之后,赠送100万美金 196 </p> 197 </div> 198 <div class="article-bottom"> 199 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 200 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 201 </div> 202 </div> 203 <div class="article"> 204 <div class="article-title"> 205 <span class="title">寻人启事</span> 206 <span class="date">2019/09/06</span> 207 </div> 208 <div class="article-body"> 209 <p> 210 寻人启事事成之后,赠送100万美金 211 </p> 212 </div> 213 <div class="article-bottom"> 214 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 215 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 216 </div> 217 </div> 218 <div class="article"> 219 <div class="article-title"> 220 <span class="title">寻人启事</span> 221 <span class="date">2019/09/06</span> 222 </div> 223 <div class="article-body"> 224 <p> 225 寻人启事事成之后,赠送100万美金 226 </p> 227 </div> 228 <div class="article-bottom"> 229 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 230 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 231 </div> 232 </div><div class="article"> 233 <div class="article-title"> 234 <span class="title">寻人启事</span> 235 <span class="date">2019/09/06</span> 236 </div> 237 <div class="article-body"> 238 <p> 239 寻人启事事成之后,赠送100万美金 240 </p> 241 </div> 242 <div class="article-bottom"> 243 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 244 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 245 </div> 246 </div><div class="article"> 247 <div class="article-title"> 248 <span class="title">寻人启事</span> 249 <span class="date">2019/09/06</span> 250 </div> 251 <div class="article-body"> 252 <p> 253 寻人启事事成之后,赠送100万美金 254 </p> 255 </div> 256 <div class="article-bottom"> 257 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 258 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 259 </div> 260 </div> 261 <div class="article"> 262 <div class="article-title"> 263 <span class="title">寻人启事</span> 264 <span class="date">2019/09/06</span> 265 </div> 266 <div class="article-body"> 267 <p> 268 寻人启事事成之后,赠送100万美金 269 </p> 270 </div> 271 <div class="article-bottom"> 272 <span><a href="https://www.cnblogs.com/chenshuaiv587/p/8135738.html">#python</a></span> 273 <span><a href="https://www.baidu.com/s?ie=UTF-8&wd=java">#javacript</a></span> 274 </div> 275 </div> 276 277 </div> 278 </body> 279 </html>
赏心悦目图.jpg
总结
1 今日内容总结 2 内容概要:css 内容day2 3 css:层叠样式表 即是对标签内的内容进行修饰 4 位置:<style></style> 5 6 主要内容: 7 1.五大属性: 8 1.字体属性 9 2.文字属性 10 3.背景属性 11 4.边框属性 12 5.display属性 (显示 占位) 13 14 2.盒子模型 15 16 3.float(浮动)关键词 17 1.浮动 18 2.是否脱离文档流 19 3.溢出overflow :hidden(隐藏) scroll(滚动) fixed(自增) 20 21 4.定位: 22 1.绝对定位 relative 23 2.相对定位 absolute 24 3.固定定位 fixed 25 26 5.透明度比较opacity 27 28 6.应用 29 1.z-index 网络层叠顺序 -状态框 30 2.去除ul标签丑陋部分 31 3.样式操作 设置长宽 32 33 34 总结详情: 35 1.五大属性: 36 1.字体属性 37 color 字体颜色 38 font-size 字体大小(24px) 39 font-weight 字重 (加粗) 40 lighter 轻便的 41 normal 正常的 42 initial 最初的 43 bold 加粗的 44 font-family 字体样式 45 2.文字属性 46 text-align:居中center /居右right /居左left /对齐 justify 47 text-decoration(表示文本标签自带样式(装饰)):none/underline(下划线)/overline(上划线)/line-though(中划线) 48 text-indent(缩进):32px 49 3.背景属性 50 red 51 #4e4e4e 52 ps:(RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。) 53 rgb(128,128,128)颜色对照表 54 rgba(128,128,128,0.5) 55 ps:RGBA是代表Red（红色）Green（绿色）Blue（蓝色）和Alpha的色彩空间。虽然它有的时候被描述为一个颜色空间，但是它其实仅仅是RGB模型的附加了额外的信息。采用的颜色是RGB，可以属于任何一种RGB颜色空间，但是Catmull和Smith在1971至1972年间提出了这个不可或缺的alpha数值，使得alpha渲染和alpha合成变得可能。提出者以alpha来命名是源于经典的线性插值方程αA + (1-α)B所用的就是这个希腊字母。 56 alpha通道一般用作不透明度参数。如果一个像素的alpha通道数值为0%，那它就是完全透明的（也就是看不见的），而数值为100%则意味着一个完全不透明的像素（传统的数字图像）。在0%和100%之间的值则使得像素可以透过背景显示出来，就像透过玻璃（半透明性），这种效果是简单的二元透明性（透明或不透明）做不到的。它使数码合成变得容易。alpha通道值可以用百分比、整数或者像RGB参数那样用0到1的实数表示。 57 backgroud-color 背景填充色 58 backgroud-image : url(""):插入图像进行填充 59 默认为是平铺满这个区域 60 backgroud-position:center center; 第一个上下 第二个左右 61 backgroud-position-x 横x 62 backgroup-position-y 竖Y 63 指向用户z 64 background-repeat背景重复填充 no-repeat不重复/repeat-x/repeat-y 65 支持简写 66 backgroud:red url("") no-repeat center center 67 68 背景图片应用场景: 69 所有浏览器你能够看到的都是走网路请求传输过来的 70 当你的网站需要用到很多小图标的时候, 71 可以将所有的小图片放在一张上 72 然后通过背景图片的位置来控制来显示哪一张小图片 73 从而节省加载资源 74 75 4.边框属性 76 border-style:solid 实线(立方体)/dotted(虚线(圆))/dashed(虚线(长方体)) 77 border-color:red 78 border-5px 79 支持简写 80 border:3px solid red; 81 border-top/left/right/bottom 82 5.display属性 83 display:none(不显示 不占位) 84 visibility:hidden(不显示,占位) 85 86 2.盒子模型 87 以快递盒为例 88 margin:外边距(标签与标签的距离) 89 border:边框 90 padding:内填充 内边距 91 content:文本内容 92 93 margin-top/left/right/bottom 94 95 96 3.float(浮动)关键词 97 1.浮动 98 float:center/right/left 99 主要应用于页面布局 100 101 浮动会带来父标签塌陷的问题? 102 解决:clear清除浮动带来的影响 103 clear:left/right/both(两者) 104 105 .clearfix;after{ 106 content:""; 107 display:block; 108 clear:both 109 } 110 111 哪里塌陷 就给谁加一个clearfix类属性即可 112 如果当前标签没有效果 那么你可以考虑给目标标签外层 113 再套一个div 然后给这个新的div加 114 2.是否脱离文档流 115 是,不在遵循块儿级标签独占一行的特点 116 1.浮动 117 2.绝对定位 118 3.固定定位 119 否,不脱离 120 1.相对定位 121 122 3.溢出overflow :hidden(隐藏) scroll(滚动) fixed(自增) 123 124 4.定位: 125 所有的标签默认都是静态的static 没有定位一说 126 要想改变标签位置,需要改变标签位置状态 127 position:static 128 1.绝对定位 relative 129 2.相对定位 absolute 130 3.固定定位 fixed 131 132 5.透明度比较opacity 133 134 6.应用 135 1.z-index 网络层叠顺序 -状态框(模态框,百度登录页面) 136 2.去除ul标签丑陋部分 137 3.样式操作 设置长宽
1 今日内容总结 2 内容概要:css 内容day2 3 css:层叠样式表 即是对标签内的内容进行修饰 4 位置:<style></style> 5 6 主要内容: 7 1.五大属性: 8 1.字体属性 9 2.文字属性 10 3.背景属性 11 4.边框属性 12 5.display属性 (显示 占位) 13 14 2.盒子模型 15 16 3.float(浮动)关键词 17 1.浮动 18 2.是否脱离文档流 19 3.溢出overflow :hidden(隐藏) scroll(滚动) fixed(自增) 20 21 4.定位: 22 1.绝对定位 relative 23 2.相对定位 absolute 24 3.固定定位 fixed 25 26 5.透明度比较opacity 27 28 6.应用 29 1.z-index 网络层叠顺序 -状态框 30 2.去除ul标签丑陋部分 31 3.样式操作 设置长宽 32 33 34 总结详情: 35 1.五大属性: 36 1.字体属性 37 color 字体颜色 38 font-size 字体大小(24px) 39 font-weight 字重 (加粗) 40 lighter 轻便的 41 normal 正常的 42 initial 最初的 43 bold 加粗的 44 font-family 字体样式 45 2.文字属性 46 text-align:居中center /居右right /居左left /对齐 justify 47 text-decoration(表示文本标签自带样式(装饰)):none/underline(下划线)/overline(上划线)/line-though(中划线) 48 text-indent(缩进):32px 49 3.背景属性 50 red 51 #4e4e4e 52 ps:(RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。) 53 rgb(128,128,128)颜色对照表 54 rgba(128,128,128,0.5) 55 ps:RGBA是代表Red（红色）Green（绿色）Blue（蓝色）和Alpha的色彩空间。虽然它有的时候被描述为一个颜色空间，但是它其实仅仅是RGB模型的附加了额外的信息。采用的颜色是RGB，可以属于任何一种RGB颜色空间，但是Catmull和Smith在1971至1972年间提出了这个不可或缺的alpha数值，使得alpha渲染和alpha合成变得可能。提出者以alpha来命名是源于经典的线性插值方程αA + (1-α)B所用的就是这个希腊字母。 56 alpha通道一般用作不透明度参数。如果一个像素的alpha通道数值为0%，那它就是完全透明的（也就是看不见的），而数值为100%则意味着一个完全不透明的像素（传统的数字图像）。在0%和100%之间的值则使得像素可以透过背景显示出来，就像透过玻璃（半透明性），这种效果是简单的二元透明性（透明或不透明）做不到的。它使数码合成变得容易。alpha通道值可以用百分比、整数或者像RGB参数那样用0到1的实数表示。 57 backgroud-color 背景填充色 58 backgroud-image : url(""):插入图像进行填充 59 默认为是平铺满这个区域 60 backgroud-position:center center; 第一个上下 第二个左右 61 backgroud-position-x 横x 62 backgroup-position-y 竖Y 63 指向用户z 64 background-repeat背景重复填充 no-repeat不重复/repeat-x/repeat-y 65 支持简写 66 backgroud:red url("") no-repeat center center 67 68 背景图片应用场景: 69 所有浏览器你能够看到的都是走网路请求传输过来的 70 当你的网站需要用到很多小图标的时候, 71 可以将所有的小图片放在一张上 72 然后通过背景图片的位置来控制来显示哪一张小图片 73 从而节省加载资源 74 75 4.边框属性 76 border-style:solid 实线(立方体)/dotted(虚线(圆))/dashed(虚线(长方体)) 77 border-color:red 78 border-5px 79 支持简写 80 border:3px solid red; 81 border-top/left/right/bottom 82 5.display属性 83 display:none(不显示 不占位) 84 visibility:hidden(不显示,占位) 85 86 2.盒子模型 87 以快递盒为例 88 margin:外边距(标签与标签的距离) 89 border:边框 90 padding:内填充 内边距 91 content:文本内容 92 93 margin-top/left/right/bottom 94 95 96 3.float(浮动)关键词 97 1.浮动 98 float:center/right/left 99 主要应用于页面布局 100 101 浮动会带来父标签塌陷的问题? 102 解决:clear清除浮动带来的影响 103 clear:left/right/both(两者) 104 105 .clearfix;after{ 106 content:""; 107 display:block; 108 clear:both 109 } 110 111 哪里塌陷 就给谁加一个clearfix类属性即可 112 如果当前标签没有效果 那么你可以考虑给目标标签外层 113 再套一个div 然后给这个新的div加 114 2.是否脱离文档流 115 是,不在遵循块儿级标签独占一行的特点 116 1.浮动 117 2.绝对定位 118 3.固定定位 119 否,不脱离 120 1.相对定位 121 122 3.溢出overflow :hidden(隐藏) scroll(滚动) fixed(自增) 123 124 4.定位: 125 所有的标签默认都是静态的static 没有定位一说 126 要想改变标签位置,需要改变标签位置状态 127 position:static 128 1.绝对定位 relative 129 2.相对定位 absolute 130 3.固定定位 fixed 131 132 5.透明度比较opacity 133 134 6.应用 135 1.z-index 网络层叠顺序 -状态框(模态框,百度登录页面) 136 2.去除ul标签丑陋部分 137 3.样式操作 设置长宽