搜索到
207
篇与
的结果
-
19、盒子模型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型</title> <style> /* 一、盒子模型（box model）：可以把 HTML 中所有的元素都理解成盒子。用于装内容的容器 目的就是为了将 HTML 文档中的内容进行归纳整理。方便管理，从而达到布局的效果。 内容区 content 边框 border 内边距 padding 外边距 margin 1.内容区 content 元素中所有的子元素和文本等都在内容区中排列 内容的大小使用 width和 height 属性设置 width 设置内容区的宽度 height 设置内容区的高度 */ .box1{ width: 200px; height: 200px; background-color: #c7edcc; } </style> </head> <body> <div class="box1"></div> </body> </html> -
18、CSS文本样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS文本样式</title> <style> /* 一、文本相关属性 1.color：设置文本颜色 2.text-align 设置文本水平对齐方式 可选值： left 左对齐（默认值） right 右对齐 center 居中 justify 两端对齐 3.text-decoration 设置文本装饰 可选值： none 无装饰（默认值） underline 下划线 overline 上划线 line-through 删除线 4.text-indent 用于设置文本第一行的缩进 单位：px % em 5.text-transfrom 设置字母大小写显示 none 无装饰（默认） uppercase 大写显示 lowercase 小写显示 capitalize 首字母大写 6.letter-spacing 设置字符之间的距离 7.word-spacing 设置单词之间的距离 8.line-height 设置行之间的距离（行间距，行高） 行高=上间距+下间距+字体大小 行间距=下间距+上间距（行高-字体大小） */ p{ color:red; font-size: 20px; text-align:justify; text-decoration:none; text-indent: 2em; text-transform: capitalize; letter-spacing:5px; word-spacing: 20px; line-height: 80px; } </style> </head> <body> <p>我想做个好人Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit expedita inventore tempore neque odit nemo qui molestiae. Inventore cupiditate ex similique harum minus, quas minima earum fuga aliquam sit <placeat class="lorem"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique illum nisi minus exercitationem aut quisquam dignissimos, voluptates vero ea fugit possimus repellendus in, voluptas ipsum id fugiat, reiciendis molestiae <perspiciatis class="lor"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint ad distinctio ut pariatur asperiores, assumenda est consectetur, necessitatibus qui consequatur totam repellat esse atque commodi fuga sapiente modi delectus! At. </p> </body> </html>
-
17、CSS字体样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS字体样式</title> <style> /* 一、字体相关属性： 1.font-size 字体大小 2.font-family字体的系列（字体族） 可以同时设置多个字体，每种字体之间以逗号隔开 设置多个字体的目的是为了用户可能的能够支持字体 网页字体五大类： serif 衬线字体 sans-serif 非衬线字体 monospace 等宽字体 cursive 草书字体 fantasy 虚幻字体 若字体名称中包含空格，则必须使用双引号 3.font-weight 字体的粗细 可选值： normal 正常显示（默认值） bold 粗体 lighter特细 bolder特粗 "number"利用数值指定粗细100-900，值后没有单位 400相当于normal 700相当于bold 4.font-style 字体的样式 可选值： normal 正常显示 itallc 斜体 （通常斜体使用相对较少，反而将斜体设置成normal） 二、字体的简写属性：font font：font-style font-weight font-size/line-height font-family 注意： 每个属性之间以空格隔开 font-size font-family 不可以省略并且必须按照顺序书写，其他可以省略 */ h1{ font-size: 80px; font-family:fantasy; } p{ /* font-size: 30px; font-family:serif; font-weight:900; font-style: italic;*/ font:italic bolder 80px 宋体,黑体 } </style> </head> <body> <h1>天天好心情 I'M Happy</h1> <p>今天天气不错</p> <p>挺风和日丽的</p> <p>我们今天在上课</p> <p>我嫩爹</p> </body> </html>
-
16、颜色单位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS颜色单位</title> <style> /* 一、颜色单位 1.预定义颜色名：HTML和CSS规定了147种颜色名。例如：red yellow green blue 2.RGB颜色值 rgb（Red,Green,Blue):括号中每个参数代表对应颜色的浓度 浓度值是0~255之间的整数，0表示无浓度，255最大浓度 也可以使用百分比表示浓度0%~100% 3.十六进制颜色值 #RRGGBB：RR-红色 GG-绿色 BB-蓝色。每种颜色使用十六进制整数表示浓度 十六进制（满十六进一）：0 1 2 3 4 5 6 7 8 9 a b c d e f 例如：#ff0000 若每种颜色的两位数值都一样可以简写：#f00 4.RGBA：相较于RGB多了个A表示透明度，取值范围在0.0-1.0之间 0.0表示透明1.0表示不透明0.5表示半透明 5.HSL/HSLA H色调（0=360）0红色->120绿色->240蓝色 S饱和度（0%-100%）0%灰色->100%全彩 L亮度（0%-100%）0%黑色->100%白色 A透明度（0.0-1.0）0.0透明->1.0不透明 */ .div1{ width: 200px; height: 200px; /* background-color: rgb(255,200,0);*/ /* background-color: rgb(100%,0%,0%);*/ /* background-color: #ff0000;*/ /*background-color: #f00;*/ /*background-color: rgba(255,0,0,0.3);*/ background-color: hsla(0,100%,50%,.3); } </style> </head> <body> <div class="div1"></div> </body> </html>
-
15、CSS长度单位 <!DOCTYPE html> <html lang="en"style="font-size:30px;"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS长度单位</title> <style> /* 一、长度单位 1.像素px：一个就是屏幕中一个不可分割的点。我们应用的屏幕实际上是由一个个的像素点构成的。 不同显示器的像素点大小也不同。在屏幕尺寸相同的情况下，像素越小，显示效果越清晰。 大部分浏览器默认字体大小是16px。 2.百分比%：相对于父元素大小的百分比进行计算 优点：当父元素大小发生变化时，子元素的大小也会按比例进行调整 3.相对于字体大小单位em：相对于当前元素字体大小进行计算 1em=当前字体大小（1倍font-size） 2em=2倍的font-size 4.rem:相对于根元素字体大小进行计算 */ .father{ font-size:50px; width: 500px; background-color: #c7edcc; } .son{ font-size: 200%; background-color: #fde6e0; /*width: 200%;*/ width: 6rem; } </style> </head> <body> <div class="father"> 今天天气不错 <div class="son">挺风和日丽的</div> </div> </body> </html>
