<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式操作:设置长宽</title> <style> div{ height: 50px; width: 100px; } /*给行内标签设置长宽没有任何影响*/ span{ height: 50px; width: 100px; } </style> </head> <body> <div>div</div> <span>span</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体属性</title> <style> /*Arial:宋体 sans-serif 无衬线*/ p{ font-family: "Microsoft Yahei","微软雅黑","Arial",sans-serif; font-size: 24px; font-weight: lighter; color: red; /*color: #4e4e4e;*/ /*color: rgb(128,128,128);*/ /*加法三原色;七彩灯带;彩色;三原色;红绿蓝*/ color: rgba(0,0,0,1.0); /*最后一个参数只能调节颜色的透明度 不能调节文本*/ } </style> </head> <body> <p>以把多个字体名称作为一个“回退”系统来保存。</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字属性</title> <style> /*text-indent:首行缩进 */ p{ font-size: 16px; text-indent: 32px; /*align 靠边排列整齐*/ /*text-align: left;*/ /*text-align: right;*/ text-align: justify; /*justify 仅对齐*/ /*text-decoration: underline;*/ /*text-decoration: underline 文本装饰:下划线 overline 上划线 line-through 线路贯通 中划线*/ /*text-decoration: overline;*/ text-decoration: line-through; } a{ text-decoration: none; color: orange; } a:hover{ color: blue; } </style> </head> <body> <p>属性规定元素中的文本的水平对齐方式。</p> <s>属性规定元素中的文本的水平对齐方式。</s> <a href="http://www.xiaohuar.com">属性规定元素中的文本的水平对齐方式。</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景属性</title> <style> p{ color: white; background-color: black; } div{ /*background-color: orange;*/ height: 500px; width: 500px; /*background-image: url("111.png");*/ /*!*背景图片 默认是填充整个区域 如果大小不够 默认重复填充*! image 图像*/ /*background-repeat: repeat-x 背景重复 : 重复 x 横向 y:纵向*/ /*background-repeat: repeat-x;*/ /*background-repeat: repeat-y;*/ /*background-position: center center;*/ /*background-position: 10px 30px;*/ /*!*第一个参数调节的是左右 第二个参数调节的上下*!*/ background: orange url("111.png") no-repeat center center; } </style> </head> <body> <p>背景图片平铺排满整个网页</p> <div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图片示例</title> <style> .c1{ height: 400px; background-color: red; } .c2{ height: 400px; background-color: green; } .c3{ height: 500px; background: url("111.png"); background-attachment: fixed; /*background-attachment: fixed 背景附件：固定*/ } .c4{ height: 400px; background-color: yellow; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框</title> <style> div{ /*border-color: red;*/ /*border-style: solid;*/ /*solid 固体 实心的*/ /*border-width: 1px;*/ /*border: 3px solid black;*/ /*border: solid 3px blue;*/ /*dashed 虚线*/ border: dashed green 3px; } p{ border-left: 3px solid red; border-bottom: 5px dotted green; /*bottom 下 top 上*/ border-top: 1px dashed orchid; border-right: 10px solid dimgrey; } </style> </head> <body> <div> 使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。 </div> <p>使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>画圆</title> <style> div{ height: 400px; width: 400px; background: red; border: 3px solid black; border-radius: 50%; /*radius 半径*/ } </style> </head> <body> <div></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> body{ /*margin-top: 0;*/ /*margin-right: 0;*/ /*margin-bottom: 0;*/ /*margin-left: 0;*/ /*!* 上下10px 左右20px*!*/ /*margin: 10px 20px;*/ /*margin: 10px 20px 30px; !* 上 左右 下*!*/ /*margin: 10px 20px 30px 40px; !* 上 右 下 左 顺时针*!*/ margin: 0; /*margin 边缘*/ /*!*上下左右全为0*!*/ } .c1 { height: 400px; width: 400px; border: 3px solid black; } .c2{ background-color: green; height: 50px; width: 50px; border: 3px solid red; /*margin: auto 0;*/ } p{ border: 3px solid; /*padding-top: 20px;*/ /*padding-left: 10px;*/ /*padding-bottom: 30px;*/ /*padding-right: 50px;*/ /*text-align: right;*/ padding: 10px; /* padding 同样支持1 2 3 4个参数 效果同margin*/ } </style> </head> <body> <!--<div class="c1"></div>--> <!--<div class="c2"></div>--> <p>我们换个p</p> <!--<p>我们换个p</p>--> <div class="c1"> <div class="c2"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> <style> body{ margin: 0; } #d1{ border: 3px solid black; } .c1{ height: 100px; width: 100px; background-color: red; float: left; } .c2{ height: 100px; width: 100px; background-color: black; float: left; } .clearfix:after{ content: ""; display: block; /*display显示: block块*/ /*clear: both 清除浮动*/ clear: both; /* 左右两边都不能有浮动的元素*/ } </style> </head> <body> <div id="d1" class="clearfix"> <div class="c1"></div> <div class="c2"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用浮动左右布局</title> <style> body{ margin: 0; } .blog-left{ float: left; width: 20%; height: 1000px; background-color: #4e4e4e; } .blog-right{ float: right; width: 80%; height: 1000px; background-color: #eeeeee; } </style> </head> <body> <div class="blog-left"></div> <div class="blog-right"> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> <div>div</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>溢出</title> <style> div{ height: 50px; width: 50px; border: 3px solid red; overflow: hidden; /*overflow 溢出: hidden 隐藏;*/ } </style> </head> <body> <div> <p>默认值。内容不会被修剪，会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。</p> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆形头像</title> <style> body{ margin: 0; background-color: darkgray; } div{ height: 120px; width: 120px; border-radius: 50%; border: 5px solid white; overflow: hidden; } img{ /*max-width: 100%;*/ width: 100%; } </style> </head> <body> <div> <img src="111.png" alt=""> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定位</title> <style> body { margin: 0; } /*.c1{*/ /*height: 50px;*/ /*width: 50px;*/ /*background-color: green;*/ /*top: 100px;*/ /*left: 100px;*/ /*position: static;*/ /*!*!*默认是静态的 不能动位置*!*!*!*/ /*!*position: relative;*!*/ /*!*!*相对定位*!*!*!*!*/ /*}*/ .c2{ height: 200px; width: 200px; background-color: red; top: 50px; left: 50px; position: absolute; /*!*绝对定位*!*!*!*/ } /* fixed 相对页面静止 static 相对内容静止 */ .c1 { border: 3px solid red; height: 100px; width: 100px; position: fixed; right: 20px; bottom: 50px; } </style> </head> <body> <!--<div class="c1">--> <!--<div class="c2"></div>--> <!--</div>--> <div class="c1"> 回到顶部 </div> <div style="height: 1000px;background-color: green"></div> <div style="height: 1000px;background-color: black"></div> <div style="height: 1000px;background-color: blue"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证是否脱离文档流</title> <style> body{ margin: 0; } </style> </head> <body> <!--<div style="background-color: red;height: 50px;width: 50px;position: relative;left: 50px">relative相对定位</div>--> <!--<div style="background-color: blue;height: 50px;width: 50px"></div>--> <!--<div style="background-color: red;height: 50px;width: 50px;position: relative">relative相对定位</div>--> <!--<div style="background-color: blue;height: 50px;width: 50px;position: absolute;left: 50px">absolute绝对定位</div>--> <!--<div style="background-color: orchid;height: 50px;width: 50px"></div>--> <div style="background-color: red;height: 50px;width: 50px;"></div> <div style="background-color: blue;height: 50px;width: 50px;position: fixed;right: 20px;bottom: 50px;border: 5px solid red">fixed相对窗口固定</div> <div style="background-color: orchid;height: 50px;width: 50px"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模态框</title> <style> body{ margin: 0; } .cover{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(128,128,128,0.45); z-index: 999; } .modal{ height: 200px; width: 400px; background-color: white; position: fixed; left: 50%; top: 50%; z-index: 1000; margin-top: -100px; margin-left: -200px; } /*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/ </style> </head> <body> div>我是最底层的</div> <div class="cover"></div> <div class="modal"> <p><label for="d1">username:<input type="text" id="d1"></label></p> <p><label for="d2">password:<input type="text" id="d2"></label></p> <input type="submit"> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>透明度比较</title> <style> .c1 { background-color: rgba(128, 128, 128, 0.9); } /*opacity 透明度 数值越小越模糊*/ .c2{ opacity: 0.5; background-color: rgb(128,128,128); } </style> </head> <body> <p class="c1">111</p> <p class="c2">222</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>去除ul标签丑陋部分</title> <style> ul{ list-style-type: none; padding: 0; } </style> </head> <body> <ul> <li><a href="">哈哈1</a></li> <li><a href="">哈哈2</a></li> <li><a href="">哈哈3</a></li> </ul> </body> </html>
111.png
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="mycss.css"> </head> <body> <div class="blog-left"> <div class="blog-avatar"> <img src="111.png" alt=""> </div> <div class="blog-title"> <p>Jason的博客</p> </div> <div class="blog-info"> <p>这个人很帅,帅的什么都没有留下!</p> </div> <div class="blog-link"> <ul> <li><a href="">关于我</a></li> <li><a href="">微博</a></li> <li><a href="">微信公众号</a></li> </ul> </div> <div class="blog-tag"> <ul> <li><a href="">#Python</a></li> <li><a href="">#Java</a></li> <li><a href="">#Golang</a></li> </ul> </div> </div> <div class="blog-right"> <div class="article-list"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2019-5-29</span> </div> <div class="article-body"> <p>重金求子,事成500万答谢并赠送大别墅一套!</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#Javascript</span> </div> </div> <div class="article-list"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2019-5-29</span> </div> <div class="article-body"> <p>重金求子,事成500万答谢并赠送大别墅一套!</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#Javascript</span> </div> </div> <div class="article-list"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2019-5-29</span> </div> <div class="article-body"> <p>重金求子,事成500万答谢并赠送大别墅一套!</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#Javascript</span> </div> </div> <div class="article-list"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2019-5-29</span> </div> <div class="article-body"> <p>重金求子,事成500万答谢并赠送大别墅一套!</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#Javascript</span> </div> </div> <div class="article-list"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2019-5-29</span> </div> <div class="article-body"> <p>重金求子,事成500万答谢并赠送大别墅一套!</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#Javascript</span> </div> </div> <div class="article-list"> <div class="article-title"> <span class="title">重金求子</span> <span class="date">2019-5-29</span> </div> <div class="article-body"> <p>重金求子,事成500万答谢并赠送大别墅一套!</p> </div> <div class="article-bottom"> <span>#Python</span> <span>#Javascript</span> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display</title> <style> #d1{ display: none; /*标签不显示 并且也不再占用位置*!*/ /*visibility: hidden;*/ /** 标签不显示 但是位置还在*!*!*/ } span{ display: inline-block; /* 既有块儿级标签能设置长宽的特点 又有行内标签 都在一行的特点*/ /*height: 400px;*/ /*width: 400px;*/ background-color: red; border: solid 3px black; } .c1 { height: 50px; width: 50px; background-color: red; /*展览;*/ display: inline; /*inline 内联*/ } .c2 { height: 50px; width: 50px; background-color: green; display: inline; } </style> </head> <body> <p id="d1">123</p> <p>123</p> <span>span1</span> <span>span2</span> <div class="c1">div1</div> <div class="c2">div2</div> </body> </html>
body { margin: 0; background-color: #eeeeee; } a { text-decoration: none; /*decoration装饰*/ } ul { list-style-type: none; padding-left: 0; } .blog-left { float: left; width: 20%; height: 100%; position: fixed; background-color: #4e4e4e; } .blog-avatar { width: 200px; height: 200px; border: 5px solid white; border-radius: 50%; margin: 20px auto; overflow: hidden; } .blog-avatar img { max-width: 100%; } .blog-title,.blog-info { color: darkgrey; text-align: center; } .blog-link a,.blog-tag a{ color: darkgrey; } .blog-link a:hover,.blog-tag a:hover{ color: white; } .blog-link,.blog-tag { margin: 100px auto; } ul li { text-align: center; margin: 10px auto; font-size: 24px; } .blog-right { float: right; width: 80%; height: 1000px; } .article-list { background-color: white; margin: 20px 40px 20px 10px; box-shadow: 3px 3px 3px rgba(0,0,0,0.5); } .article-title { border-left: 5px solid red; text-indent: 16px; } .title { font-size: 36px; } .date { float: right; margin-top: 20px; margin-right: 20px; font-weight: bold; } .article-body { text-indent: 24px; font-size: 16px; border-bottom: 1px solid black; } .article-bottom { padding: 15px 20px; }
css day2 2.如何调节样式 两个快递盒之间的距离(标签与标签之间的距离) 称之为 外边距(margin) 纸盒的厚度(边框) 称之为边框(border) 内部的物品到盒子的距离(内部文本与边框的距离) 称之为 内边距(padding) 物品本身的大小(文本大小) 称之为内容(content) 浮动的元素 是脱离正常文档流的 也就意味着没有独占一行一说 也不再占用原来的位置 浮动的元素 会造成父标签塌陷 clear 清除浮动带来的负面影响(父标签塌陷) 定位： 所有的标签默认都是静态的 无法直接调节位置 你需要先将其设置成可定位状态 1.相对定位 相对于标签自身原来的位置 2.绝对定位 相对于已经定位过的父标签 但只给你一个父标签的长宽 让你做定位 3.固定定位 相对于浏览器窗口 固定在某个位置 浏览器会优先展示文本内容 脱离文档流 1.浮动的元素都是脱离文档流的 2.绝对定位是脱离文档流的 3.固定定位也是脱离文档流的 不脱离文档流 1.相对定位不脱离文档流 模态框 opacity 即可以调节颜色透明度也可以调文本透明度 属性操作: 字体属性: color 字体颜色 font-size 字体大小(24px) font-weight 字重 font-family 字体样式 文字属性 text-align:center/left/right/justify text-decoration装饰:none/underline/overline/line-through text-indent缩进:32px 背景属性 颜色： red #4e4e4e rgb(128,128,128) RGB颜色值 输入不限制格式,只要包含3个合格的整数即可 rgba(255,0,0,0.5);} 相对于使用 rgb(255,255,0),使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能,这里的 0.5 表示透明度, rgba(128,128,128,0.5) backgroud-color backgroud-image 属性为元素设置背景图像。 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距 默认是平铺满这个区域 浏览器窗口可以把它当成一个三维坐标系 横X 竖Y 指向用户的Z backgroud-repeat重复:no-repeat/repeat-x/repeat-y backgroud-position位置:center center 第一个上下 第二个左右 支持简写 backgroud:red url('') no-repeat center center 背景图片应用场景 所有浏览器你能够看到的都是走网路请求传输过来的 当你的网站需要用到很多小图标的时候，可以将所有的小图片放在一张 图片上，然后通过背景图片的位置来控制显示哪一个小图片 从而节省加载资源 边框属性 border-style:solid/dotted -组成的虚线/dashed .组成的虚线 border-color:red border-width:5px 支持简写 border:3px solid red; border-top/left/right/bottom 盒子模型 以快递盒为例 margin:外边距(标签与标签之间的距离) border:边框 padding:内填充 内边距 content:文本内容 margin-top/left/right/bottom margin:1 2 3 4 padding:1 2 3 4 浮动 float 浮动是脱离文档流的 也不再遵循块儿级独占一行的特点 浮动主要用于页面布局 浮动会带来父标签塌陷的问题 clear 清除浮动带来的影响 clear:left/right/both display是控件的css属性之一，表示的是显示模式。none表示不显示在网页上，但是代码存在;bolck是此元素将显示为块级元素，此元素前后会带有换行符 .clearfix:after{ content:'' display:block; clear:both } 哪里塌陷 就给谁加一个clearfix类属性即可 如果给当前标签加没有效果 那么你可以考虑给目标标签外层 再套一个div 然后给这个新的div加 是否脱离文档流 脱离 1.浮动 2.绝对定位abs 3.固定定位fixed 不脱离 1.相对定位rela 定位 所有的标签默认都是静态的static 没有定位一说 要想改变标签位置 需要先改变标签位置状态 position:static 1.相对定位 relative 2.绝对定位 absolute 3.固定定位 fixed 溢出属性 overflow:hidden,scroll,auto z-index 模态框(百度登录页面) opacity 透明度
