![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
czw10000
这个作者很懒,什么都没留下…
展开
-
z-index
z-indexz-index 可以改变定位流中的前后加载顺序。 定位流中有以下规律1.默认情况下定位流会覆盖标准流2.默认情况下后面的会覆盖前面的3.定位流中设置z-index,是一个整数数值,谁的大谁就在上面如果父元素设置z-index,子元素的z-index就会失效,谁的父元素大,谁就显示上方(从父原则)<!DOCTYPE html><html><head><meta charset="UTF-8"><titl原创 2020-12-26 09:13:31 · 153 阅读 · 0 评论 -
固定定位
固定定位固定定位也会脱离标准流,设置position为fixed,依然需要借助于四个方向属性top、left、right、bottom进行空间移动不区分行级元素和块级元素,和绝对定位一样,唯一的不同它不会随着滚动条的滚动而发生移动。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>固定定位操作</title><style type="text/css原创 2020-12-26 09:12:54 · 185 阅读 · 0 评论 -
绝对定位
绝对定位会脱离标准流,所以下面的元素会顶上来,相对于在标准流的位置上进行空间移动设置属性position为absolute,同样也需要结合top、left、right、bottom四个属性搭配使用如果它的父元素或者祖先元素都没有设置定位流(相对定位、绝对定位、固定定位),绝对定位相对于body进行定位。如果父元素或者祖先元素有定位流,绝对定位相对于父元素或者祖先元素(就近原则)。在绝对定位中,也是不区分块级元素和行级元素,但是都可以设置宽高。定位流中,一般我们采用父相子绝<!DOC原创 2020-12-26 09:12:23 · 1105 阅读 · 0 评论 -
相对定位
定位流##### 相对定位不会脱离标准流。相对于在标准流的位置进行位置移动,所以下面的元素不会顶上来。属性position设置值为relative,进行位置移动结合属性top、left、right、bottom进行空间位置移动。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>相对定位</title><style type="text/cs原创 2020-12-26 09:11:35 · 1082 阅读 · 0 评论 -
浮动流
display display属性:常用取值 inline(行级元素)、block(块级元素)、inline-block(行内块元素),none(隐藏,不占空间)浮动流1.浮动流,设置标签的属性float,它能够让元素向左或者向右进行浮动,浮动流只能是左右浮动没有上下浮动,如果元素按照浮动流渲染,那么该元素会脱离标准流,在浮动流中没有行级元素和块级元素之说。但是都可以设置宽高。2.在标准流的加载方式下,如果更改标准流,那么该元素后面的元素会相应的顶上来。3.如果按照浮动流进行加载,在浮动流加载原创 2020-12-26 09:11:02 · 252 阅读 · 0 评论 -
标准流
标准流>1.HTML标签被分为两种类型,一种是块级标签(独占一行,能够设置宽高),另外一种是行级标签(不独占一行,不能设置宽高)>>2.这两种类型的标签都是按照标准流的方式进行渲染加载的(排列),行级标签从左到右加载,块级元素从上到下加载。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>标准流加载</title><style ty原创 2020-12-26 09:10:28 · 196 阅读 · 0 评论 -
盒子模型
盒子模型padding:内容到边框的距离叫做为内边距,内边距属性按照上右下左顺序进行设置,也可以分开设置改变内边距的宽度会影响元素的大小如果我们采用的内容盒子模型,content-box,那么设置内边距后元素的自身的宽高也会发生改变。但是如果我们设置盒子模型为边框盒子,border-box,那么设置内边距后自身的宽高不会发生改变,但是内容的宽高会发生改变。margin:元素边框与元素边框之间的间距就是外边距,设置的顺序也是上右下左,如果我们设置margin的值为:0 auto就代表距离上方为0像素原创 2020-12-26 09:09:46 · 121 阅读 · 0 评论 -
边框系列样式
边框系列样式 border属性,连写—> 格式:宽度 样式 颜色。倒角radius:设置边框四角的弧度。<!DOCTYPE html><html><head><meta charset="UTF-8"><title>边框</title></head><body> <div style="height:300px;width: 500px;border-radius:10原创 2020-12-26 09:08:48 · 71 阅读 · 0 评论 -
背景系列样式:
背景系列样式: 设置标签的背景相关样式background-color:设置标签的背景颜色background-image:设置背景图像,它的属性值语法格式:url(相对路径);会自动平铺background-repeat:设置平铺的方式,有四个值,repeat默认值,no-repeat不平铺,repeat-x水平平铺,repeat-y垂直平铺background-position:设置背景定位方式,格式为:水平方向数值 垂直方向数值,水平方向有left center r原创 2020-12-26 09:08:15 · 99 阅读 · 0 评论 -
文本系列样式
用于设置文本相关的一些样式font-style:设置文字样式,常用取值为斜体italic和正常normalfont-weight:设置文字的粗细,常用取值为light,lighter,bold和bolder。还可以使用数字表示 100~900font-size:设置文字的大小,取值单位为像素px,如font-size:30pxfont-family:设置字体,如"宋体",“楷体”,"微软雅黑"等font:进行连写,如:设置字体为宋体,字体大小为20px,字体为斜体,字体加粗 -->font原创 2020-12-26 09:07:19 · 169 阅读 · 0 评论 -
选择器
选择器 当我们想要设置某些标签的样式时,就必须让css代码找到对应的标签,通过选择器可以找到对应的标签常用的选择器标签选择器,语法格式:标签名称{} 如对div标签控制,—>div{}id选择器,语法格式:#id名称{},注意:id一般不能重复,需要给标签添加一个id属性类选择器,语法格式:.class名称{},class名称可以重复,需要给标签添加class属性并集选择器,语法格式:选择器1,选择器2,选择器3,… {}属性选择器,语法格式:标签[属性=“具体的属原创 2020-12-25 20:17:34 · 128 阅读 · 0 评论 -
CSS样式:进行页面美化和布局控制
CSS样式:进行页面美化和布局控制概念:Cascading Style Sheet 层叠样式表 层叠:多个样式可以作用在同一个html的元素上,可以同时生效。好处:功能比较强大将内容展示和样式控制进行分离降低耦合度,解耦分工协作更方便提高样式的可复用性使用:<style type="text/css"> 选择器 { 属性1:属性值; 属性2:属性值; 属性3:属性值1 属性值2 属原创 2020-12-25 20:15:32 · 1478 阅读 · 0 评论 -
select标签&&textarea标签
select标签 下拉列表标签,常用于单选和多选,是一个组合标签,需要和子标签option一起搭配使用,不会独占一行常用属性:name属性:发送给服务器使用的multiple属性:不写默认单选,取值为multiple表示多选,一般我们常用单选size属性:可见选项的数目。option标签selected属性:表示勾选当前选项value属性:用于发送给服务器的选项值注意:如果使用多选,那么选择的时候,需要按下ctrl键进行选择size属性我们一般情况下不去设置select原创 2020-12-25 20:13:32 · 221 阅读 · 0 评论 -
表单标签
表单标签 form表单一般用于向服务器提交的时候将form表单中的数据进行提交。action属性:表示请求的路径,通常我们指定为请求服务器的路径,表单提交服务器具体的URLmethod属性:表示请求的方式,delete、put、get、post、trace....通常情况下我们一般使用get或者post方式默认的请求方式是get请求方式,一般会将请求的数据追加在请求路径上如:.../search?q=QQ&qs=n&form=QBRE&sp=-1&pq=qq&am原创 2020-12-25 20:04:00 · 57 阅读 · 0 评论 -
内联框架标签
内联框架标签 iframeiframe标签元素会创建包含另外一个文档的内联框架(行内框架)name属性:指定ifram标签的名称,如果a标签中的target属性值是其name属性值,当你点击a标签的时候,对应的超链接内容就会出现在iframe中src属性:指的是iframe中要显示的内容的链接frameborder属性:一般情况下取值为0,不显示边框,取值为1显示边框 scrolling属性:取值为yes--滚动,取值为no--不滚动,auto-->自动width属性:表示框架的宽度原创 2020-12-25 20:02:29 · 584 阅读 · 0 评论 -
表格标签
tabletrtdthcaptiontheadtbodytfoot<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表格标签</title></head><body> <!-- 表格标签 在html中大小表示方式 默认单位是px 使用百分比 设置尺寸 高度 宽度 一般相对于父标签的尺寸.原创 2020-12-25 20:01:18 · 63 阅读 · 0 评论 -
超链接标签
超链接标签 a<a href="https://cn.bing.com/" target="_blank" height = "100px">有求必应</a><br><!-- 打开demo01.html文件 在新窗口中打开 --><a href="./demo01.html" target="_blank">打开demo01.html文件</a><!-- href 还可以指定请求服务器的请求路径 --><原创 2020-12-25 19:59:05 · 192 阅读 · 0 评论 -
图片标签
图片标签img<!DOCTYPE html><html><head><meta charset="UTF-8"><title>图片标签</title></head><body> <!-- img 图片标签 --> <img alt="" src="./image/1.jpg" > <img alt="" src="../image/2.jpg"> <原创 2020-12-25 19:58:13 · 195 阅读 · 1 评论 -
文本系列标签
文本系列标签注释h1~h6brphrbifont<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <!-- 文本系列标签 --> <!-- - 注释 - h1~h6 - br - p - hr - b原创 2020-12-25 19:57:09 · 118 阅读 · 1 评论 -
HTML基础标签
基础标签htmlheadtitlemetabodyfooterDOCTYPE<!DOCTYPE html> <!-- ctrl+shift+/ 注释快捷键 html 注释 定义文档类型为html类型的 --><html><!-- 页面标签的根标签 --><head><!-- 头部标签 控制性元素 在该标签定义的内容一般都是不显示的,除了title --><meta原创 2020-12-25 19:55:35 · 59 阅读 · 0 评论 -
HTML
HTML概念 Hyper Text Markup Language 超文本标记语言 语法格式:<> 超文本: 超文本是用超链接的方法,将各种不同空间的文本信息或者其他格式数据组织在一起的网状文本。 标记语言;由标签构成的语言---->格式:<标签名称> 如: 、、、、标记语言不把它归为编程语言。快速入门: 语法:html文件的扩展名是.html或者.htm原创 2020-12-22 23:54:53 · 63 阅读 · 0 评论