HTML基础练习

标签：int   窗口   应该   单选   属性选择器   移动图片   Fix   z-index   记录    DOCTYPE html> HTML基础 .banner{ /*绝对定位*/ height: 48px; width: 100%; background-color: pink; text-align: center; position: fixed; top: 0; left: 0; right: 0; z-index: 50; } .back_to_menu{ /*回到菜单*/ display: inline-block; height: 20px; width: 100px; margin-top: 15px; } .menu{ /*左边导航*/ margin-top: 40px; height: 600px; width: 20%; border: 2px black solid; margin-left:-9px; background-color: #FCF8E3; display: inline-block; position: fixed; } .content{ /*右侧内容*/ margin-top:40px; margin-right: -9px; width: 81%; float: right; background-color:#FCF8E3; display: inline-block; } .color{ color: purple; } .body{ /*内容框*/ width: 99%; border:2px black solid; margin-top: 3px; padding-left:5px; padding-bottom: 5px; } .back { /*回到顶部 */ position:fixed; top: 500px; left:1100px; right:5px } .box{ border: 1px indianred solid; height: 50px; width:150px; color: #FCF8E3; text-align: center; line-height: 48px; } .box:hover{ background-color: pink; } .repeat1{ /*#无限堆叠*/ height: 150px; width:500px; background-image: url("http://ui.imdsx.cn/static/image/dsx_Small.jpg"); } .repeat2{ /*不堆叠*/ height: 150px; width:500px; background-image: url("http://ui.imdsx.cn/static/image/dsx_Small.jpg"); background-repeat: no-repeat } .repeat3{ /*纵向堆叠*/ height: 150px; width:500px; background-image: url("http://ui.imdsx.cn/static/image/dsx_Small.jpg"); background-repeat: repeat-y } .repeat4{ /*横向堆叠*/ height: 150px; width:500px; background-image: url("http://ui.imdsx.cn/static/image/dsx_Small.jpg"); background-repeat: repeat-x } .img_position{ width: 20px; height: 20px; border: 1px red solid; background-image: url("http://ui.imdsx.cn/static/image/icon.png"); background-position-x:0; background-position-y:0; display: inline-block; } .img_position1{ width: 20px; height: 20px; border: 1px red solid; background-image: url("http://ui.imdsx.cn/static/image/icon.png"); background-position:0; display: inline-block; } .img_position2{ width: 20px; height: 20px; border: 1px red solid; background-image: url("http://ui.imdsx.cn/static/image/icon.png"); background-position:0 0; display: inline-block; } .img_position3{ width: 20px; height: 20px; border: 1px red solid; background: url("http://ui.imdsx.cn/static/image/icon.png") 0 0 no-repeat; } HTML基础 回到菜单 HTML CSS HTML 回到顶部 <p></p> 段落标签 <h></h> 标题标签 年轻,就是拿来折腾的。让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。 别在最该拼搏的年纪选择稳定，世界上最大的不变是改变，只有每天进步，才能拥抱生命的无限可能！ 你以为你给对方留了电话存了微信，应该彼此也能互相帮忙，却忘记了一件很重要的事情，只有关系平等，才能互相帮助。 标题标签 <h1></h1> 标题标签h1 <h2></h2> 标题标签h2 <h3></h3> 标题标签h3 <h4></h4> 标题标签h4 <h5></h5> 标题标签h5 <h6></h6> 标题标签h6 <div> </div> 块级标签，整满整行 div是HTML中出场率的标签，特点是没有任何属性，可以通过css进行装饰后成为任何一种标签 <span> </span> 行内标签的代表，什么属性都不带，可以通过css进行装饰后成为任何一种标签 大师兄写作业了吗？ <input /&gt 文本框标签，包含多个属性，text、password、button、checkbox、radio、file、submit、reset 大师兄择偶标准： 男的 36D 男 女 上传文件: <form></form> 表单标签 表单标签可以理解为载体，承载着所有要像后端提交的数据， 通常与input连用,表单提交数据分为get提交和post提交， get提交在url上挂参数，post提交在body中 <label></label> 标题标签 label 标题标签 与input联合运用，增加input的点击范围 可直接点击文字就输入 for：映射到input的id 用户名： <textarea></textarea> 多行文本标签 多行文本 textarea 默认值在标签之间 多行文本的默认信息 <select></select> 下拉选择框标签 select option 下拉框标签 默认选择在option上增加selected size属性显示多少个 多选属性：multiple 单选 黑龙江 辽宁 大连 多选 山东 北京 上海 成都 超出3个有滚动条 山东 北京 上海 成都 <select></select> <optgroup></optgroup&gt 对下拉选项进行分组optgroup 分组，label属性是组的名字，不可选择 邢台 保定 秦皇岛 唐山 <a> </a&gt 超链接 href属性为跳转的地址，target属性为以什么方式跳转"_blank"新tab跳转，a标签还可以做锚点，通过id进行对应关系的映射 去掉a标签的下划线通过属性text-decoration:none 大师兄的博客 大师兄的博客 <img /&gt mg 图片标签 src：图片的位置 图片跳转通过a标签 alt： 当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字 <ul></ul&gt 列表 ul li · 形式的列表 狮子座 双鱼座 列表 ol li · 形式的列表 狮子座 双鱼座 分层列表 dl dd内层 dt外层 黑龙江省 哈尔滨市 牡丹江市 北京 北京 <table> </table&gt table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列 ID 用例名称 执行人 编辑 1 table表格测试 韩韩 运行 编辑 2 table表格测试 运行 编辑 3 table表格测试 韩韩 运行 编辑 CSS CSS css style: 里面的写的就叫做css 每一个样式的间隔用； 全部相同的时候引用class 例如： style="height: 48px;background-color: #6699CC" ID选择器 # 代表通过id选择器查找 例： #i1{height: 48px;background-color: red;} class选择器 .代表通过id选择器查找 例： .menu{height: 48px;background-color: aqua;} 标签选择器 标签名 代表通过id选择器查找 例： span {color: red;background-color: blue;} 标签层级选择器 标签内的标签 通过标签+空格+标签 代表通过标签选择器查找 例：span标签下面所有div标签颜色改变 例： span div{color: aqua;background-color: red;} CLASS层级选择器 通过CLASS标签选择器定位第一层，在通过层级选择器定位第二层 例： .c1 div{background-color: #336699;height: 48px;} ID层级选择器 通过ID标签选择器定位第一层，在通过层级选择器定位第二层 例： #i2 div{background-color: black;height: 48px;} ID组合选择器 ID组合选择器，应用于以id选择器进行css样式设置的，可以通过id z1 z2 z3 共用一套css样式 组合 通过逗号间隔 例： #z1,#z2,#z3{background-color: chocolate;height: 48px;} CLASS组合选择器 CLASS组合选择器，应用于以CLASS选择器进行css样式设置的，可以通过CLASS s1 s2 s3 共用一套css样式 组合 通过逗号间隔 例： .s1,.s2,.s3{background-color: darkmagenta;height:48px;} 属性选择器 属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用 例： div[s=‘dsx‘]{background-color: darkred;height: 48px;} CSS优先级 标签中style优先级最高，其次在代码中就近找，也就是重下往上找 引入CSS样式表 CSS可以写在三个地方，分别是1、标签中增加属性style，2、header中添加标签style标签，在标签中添加CSS，3、引入CSS样式表，实际就是将header中的style标签复制到一个以css为结尾的文件中，通过在header中添加link标签，引入css样式表 height 高度 width 宽度 font-size font-weight font-size:字体大小 px font-weight:字体加粗 font-weight:字体加粗 bold:粗体 700 bolder:更粗字体 lighter:更细字体 normal:默认值 400 inherit:从父类继承字体粗细 字体大 字体粗 text-align text-align 水平文本对齐方式 left:文本左对齐 right:文本右对齐 center:中间对齐 inherit:父类继承 右 line-height line-height 垂直文本对齐方式 line-height的属性直接对应外层div的宽度就可以 2 float float 浮动 块级标签浮动后 相当于分层 通过浮动可以将块及标签放到一行，相当于不同层，但是超过100%的宽度就会换行，超过100%的宽度，是相对于外层div来判断的。 none:默认不浮动、inherit:父类继承 左 并列左 右 display display 展示属性 块级标签和行内标签之间切换的属性 display:inline，块级标签转换为行内标签 display:block 行内标签转换为块级标签 行内标签无法设置无法设置高度、宽度、padding、margin，可以通过display的display:inline-block， 行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性 外联标签 内联标签 大师兄 大师兄 margin margin 外边距 外边距 自己针对外围的div产生变化 外边距撑大外层 top left right bottom padding padding 内边距 内边距 自身的边距增加 top：从上到下增加 内边距扩大自身 bottom：从下增加 left：从左增加 right：从右增加 内边距增加 position position 分层 position：fixed 固定在窗口的某个位置 top：距离顶部多少像素 left right bottom 见body.html position relative absolute position：relative 与 position：absolute(绝对定位，单用没什么作用 结合relative才牛逼) absolute的定位针对于于relative的定位 单独relative没有任何意义 见body.html z-index z-index 层级关系 分层后通过z-index来记录层级关系 越大越在前面 z-index: 10 cursor cursor 一些不同的光标 cursor:pointer 鼠标的小手 cursor:move 有很多种样式 知道干嘛的就行了 overflow overflow属性设置当div内的内容溢出div的高宽时，如何处理 默认会出现在元素框之外 hidden：溢出部分截取掉 scroll：超出就出现滚动条 hover hover属性是当鼠标移动到上面后，设置其样式 鼠标移动改变样式 background background 是针对背景一些样式设置， background-image：背景图片，图片大小如果小于div的大小。则无限堆叠 水平垂直都堆叠。可通过background-repeat属性对是否堆叠进行设置 no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)。 background-position 针对div设置图片展示的位置。background-position-y: 10px 纵向移动图片 background-position-x: 10px 横向移动图片。也可以不写x或y，默认第一个为x的值 第二个位y的值，background-position:10px 10px。 可以通过background直接简写，background 简写 参数分别为 颜色 背景图 postion横向 纵向 是否堆叠 无限堆叠： 不堆叠： 纵向堆叠： 横向堆叠： background-position 三种方式 简写background属性  HTML基础练习标签：int   窗口   应该   单选   属性选择器   移动图片   Fix   z-index   记录   原文地址：https://www.cnblogs.com/hancece/p/14921987.html