搜索到
146
篇与
的结果
-
21、盒子模型-内边距 <!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 二、内边距 padding 用于设置内容区与边框之间的距离 1.可以设置四个方向的内边距 padding-top padding-right padding-botton padding-left 2.注意： 设置内边距会影响盒子大小 背景会延伸到内边距 三、内边距的简写属性： padding 可以直接设置四个方向的内边距 (顺时针上右下左) */ .box1{ width: 300px; height: 300px; background-color: #c7edcc; border: 1px solid #000; /*设置四个方向内边距*/ /*padding-top: 50px; padding-right: 50px; padding-bottom: 50px; padding-left: 50px;*/ padding: 10px 20px 30px 40px; } .son{ width: 300px; height: 300px; background-color: #fde6e0; } </style> </head> <body> <div class="box1"> <div class="son"></div> </div> </body> </html><!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 二、内边距 padding 用于设置内容区与边框之间的距离 1.可以设置四个方向的内边距 padding-top padding-right padding-botton padding-left 2.注意： 设置内边距会影响盒子大小 背景会延伸到内边距 三、内边距的简写属性： padding 可以直接设置四个方向的内边距 (顺时针上右下左) */ .box1{ width: 300px; height: 300px; background-color: #c7edcc; border: 1px solid #000; /*设置四个方向内边距*/ /*padding-top: 50px; padding-right: 50px; padding-bottom: 50px; padding-left: 50px;*/ padding: 10px 20px 30px 40px; } .son{ width: 300px; height: 300px; background-color: #fde6e0; } </style> </head> <body> <div class="box1"> <div class="son"></div> </div> </body> </html> -
20、盒子模型的边框 <!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 二、盒子的边框 border 边框由三个部分组成，缺一不可！ 1.边框的宽度 border-width 可以分别设置四个边框的宽度 border-top-width border-right-width border-bottom-width border-left-width border-width：10px 20px 30px 40px(上右下左)顺时针 border-width：10px 20px 30px上 左 右 下 border-width：10px 20px上下左右 2.边框的样式 border-style 可选值： solid 实线 dotted 点状虚线 dashed 虚线 double 双线 可以分别设置四个边框的样式 border-top-style border-right-style border-bottom-style border-left-style 3.边框的颜色 boder-color 使用方式与border-width一模一样 三、边框的简写属性：border border 属性可以设置边框所有的相关样式 border:border-width border-style border-color(顺序无要求) top： right： bottom： left： */ .box1{ width: 200px; height: 200px; background-color: #c7edcc; /*边框的宽度*/ /*border-width: 10px;*/ /* border-top-width: 10px; border-right-width: 20px; border-bottom-width: 30px; border-left-width: 40px;*/ /*边框的样式*/ /*border-style:solid;*/ /* border-top-style: solid; border-right-style: dotted; border-bottom-style: dashed; border-left-style: double;*/ /*边框的颜色*/ /* border-color: red;*/ /*border-color: red yellow blue green;*/ /*边框的简写属性*/ border: 10px solid red; } </style> </head> <body> <div class="box1"></div> </body> </html>
-
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>
