<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML CSS</title>
<style>
.menu{
height: 600px;
width: 29%;
border: 1px solid black;
margin-left: -7px;
position: fixed;
top: 60px;
left: 0;
padding-left: 20px;
overflow: auto;
}
.c1{
position: fixed;
top: 48px;
left: 0;
bottom: 0;
}
.c2{
/*border: 1px black solid;*/
/*width:70% ;*/
/*height: 1000px;*/
/*display: inline-block;*/
/*!*margin-top: 3px;*!*/
/*margin-left: 32.5%;*/
height: 300px;
width: 67%;
/*float: right;*/
border: 1px solid black;
margin-top: 5px;
/*padding-left: 20px;*/
/*display: inline-block;*/
/*width: 230px;*/
position: relative;
top: 10px;
left: 33%;
bottom:3px;
margin-bottom: 10px;
overflow: auto;
}
.c3{
height: 300px;
width: 67%;
border: 1px solid black;
margin-top: 5px;
position: relative;
top: 11px;
left: 33%;
overflow: auto;
}
.c4{
height: 170px;
width: 67%;
border: 1px solid black;
margin-top: 5px;
position: relative;
top: 11px;
left: 33%;
overflow: auto;
}
.c5{
height: 500px;
width: 67%;
border: 1px solid black;
margin-top: 5px;
position: relative;
top: 11px;
left: 33%;
overflow: auto;
}
.c6:hover{
background-color: red;
color: black;
}
.image-postion {
display: inline-block;
border: 1px solid red;
height: 20px;
width: 20px;
background-repeat: no-repeat;
background-position-y: 0;
background-position-x: 0;}
.image-postion2 {
margin-left: 10px;
display: inline-block;
border: 1px solid red;
height: 20px;
width: 20px;
background-repeat: no-repeat;
background-position: 0 0;
}
.go-top {
position: fixed;
bottom: 5px;
right: 5px;
height: 40px;
width: 80px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div style="background-color: aqua;width: 100%;height: 50px;text-align: center;line-height: 50px;position: fixed;z-index: 10;top: 0;">白羊座</div>
<div class="c1" >
<div class="menu" style="background-color: azure">
<dl>
<dt>
<a href="#html" onclick="html()"><h3>HTML</h3></a>
</dt>
<div>
<dd><a href="#p-test"></a></dd>
<dd><a href="#h-test"><h3><h></h> 标题标签H ** </h3></a></dd>
<dd><a href="#div-test"><h3><div></div> 块级标签 白板 *****</h3></a></dd>
<dd><a href="#span-test"><h3><span></span> 行内标签 白板 *****</h3></a></dd>
<dd><a href="#input-test"><h3><input /> 文本框标签*****</h3></a></dd>
<dd><a href="#form-test"><h3><form></form> 表单标签 *</h3></a></dd>
<dd><a href="#label-test"><h3><label></label> 标题标签 **</h3></a></dd>
<dd><a href="#textarea-test"><h3><textarea></textarea> 多行文本标签 *</h3></a></dd>
<dd><a href="#select-test"><h3><select></select> 下拉选择框标签 ****</h3></a></dd>
<dd><a href="#a-test"><h3><a></a> 超链接标签 *****</h3></a></dd>
<dd><a href="#img-test"><h3><img /> 图片标签 ****</h3></a></dd>
<dd><a href="#ul-test"><h3><ul></ul> 列表标签 **</h3></a></dd>
<dd><a href="#table-test"><h3><table></table> 表格标签 ***</h3></a></dd>
</div>
<dt>
<a href="#css-test" onclick="css()"><h3>CSS</h3></a>
</dt>
<div class="css-test" id="menu-css" style="display: block;">
<dd><a href="#css-test"><h3>CSS ***** </h3></a></dd>
<dd><a href="#id-test"><h3>ID选择器 ***** </h3></a></dd>
<dd><a href="#class-test"><h3>CLASS选择器 ***** </h3></a></dd>
<dd><a href="#lab-test"><h3>标签选择器 ***** </h3></a></dd>
<dd><a href="#cen-test"><h3>标签层级选择器 *** </h3></a></dd>
<dd><a href="#class-cen-test"><h3>CLASS层级选择器 *** </h3></a></dd>
<dd><a href="#id-cen-test"><h3>ID层级选择器 *** </h3></a></dd>
<dd><a href="#id-group-test"><h3>ID组合选择器 *** </h3></a></dd>
<dd><a href="#class-group-test"><h3>CLASS组合选择器 *** </h3></a></dd>
<dd><a href="#attribute-group-test"><h3>属性选择器 ***** </h3></a></dd>
<dd><a href="#sort-test"><h3>CSS优先级 ***** </h3></a></dd>
<dd><a href="#import-test"><h3>引入CSS文件 ***** </h3></a></dd>
<dd><a href="#height-test"><h3>CSS属性 height **** </h3></a></dd>
<dd><a href="#width-test"><h3>CSS属性 width **** </h3></a></dd>
<dd><a href="#font-size-test"><h3>CSS属性 font-size font-weight ** </h3></a></dd>
<dd><a href="#text-align-test"><h3>CSS属性 text-align *** </h3></a></dd>
<dd><a href="#line-height-test"><h3>CSS属性 line-height *** </h3></a></dd>
<dd><a href="#float-test"><h3>CSS属性 float ***** </h3></a></dd>
<dd><a href="#display-test"><h3>CSS属性 display ***** </h3></a></dd>
<dd><a href="#margin-test"><h3>CSS属性 margin **** </h3></a></dd>
<dd><a href="#padding-test"><h3>CSS属性 padding **** </h3></a></dd>
<dd><a href="#position-test"><h3>CSS属性 position ***** </h3></a></dd>
<dd><a href="#cursor-test"><h3>CSS属性 cursor *** </h3></a></dd>
<dd><a href="#overflow-test"><h3>CSS属性 overflow **** </h3></a></dd>
<dd><a href="#hover-test"><h3>CSS属性 hover **** </h3></a></dd>
<dd><a href="#background-test"><h3>CSS属性 background ***** </h3></a></dd>
</div>
</dl>
</div>
</div>
<span style="display: block;font-size: 2em;margin: 0 auto;width: 110px;padding-left: 450px;padding-top: 80px">HTML</span>
<div class="c2" id="p-test">
<h3><p></p>段落标签</h3>
<h3></br>换行</h3>
<p>年轻,就是拿来折腾的。让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。
别在最该拼搏的年纪选择稳定，世界上最大的不变是改变，只有每天进步，才能拥抱生命的无限可能！
你以为你给对方留了电话存了微信，应该彼此也能互相帮忙，却忘记了一件很重要的事情，只有关系平等，才能互相帮助。
不要为了户口丢掉生活，为了稳定丢掉青春，为了平淡丢掉梦想，因为你所谓的稳定，不过实在浪费生命。
真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。
只有等现实的日子富足了，能力够强了，才可以去追求那些美好的生活状态，才该去追求那些伟大的梦。否则那些梦幻般的生活，都只是空中阁楼，不堪一击。
生活是自己的，自己都不求进取，凭什么让别人给你美好的未来？</p>
</div>
<div class="c3" id="h-test">
<h1><h1></h1>标题标签h1</h1>
<h2><h2></h2>标题标签h1</h2>
<h3><h3></h3>标题标签h1</h3>
<h4><h4></h4>标题标签h1</h4>
<h5><h5></h5>标题标签h1</h5>
<h6><h6></h6>标题标签h1</h6>
</div>
<div id="div-test" class="c4"><h3><div></div></br></h3><h4>
块级标签，整满整行 div是HTML中出场率的标签，特点是没有任何属性，可以通过css进行装饰后成为任何一种标签</h4>
<div style="background-color: burlywood;height: 35px" ></div>
</div>
<div id="span-test" class="c4"><h3><span></span></br></h3>
<div>行内标签的代表，什么属性都不带，可以通过css进行装饰后成为任何一种标签</div>
<span style="border: 1px red solid;display: inline-block">你写作业了吗？</span>
</div>
<div class="c3" id="input-test">
<h3><input/></h3>
<div>
<h4>文本框标签，包含多个属性，text、password、button、checkbox、radio、file、submit、reset</h4>
</div>
<div>
<input type="text" value="默认值"> <input type="text"><input type="button" value="提交">
<p>请选择</p>
<input type="checkbox" checked="checked" value="1"><span>男</span>
<input type="checkbox" value="2"><span>女</span>
<!-- 单选框 radio name相同 勾选是互斥-->
<input type="radio" name="sex" checked="checked"><span>男</span>
<input type="radio" name="sex" ><span>女</span></br>
<input type="file" >
<input type="submit">
<input type="reset">
</div>
</div>
<div class="c4" id="form-test">
<h3><form></form></br></h3>
<h4>表单标签可以理解为载体，承载着所有要像后端提交的数据，通常与input连用,表单提交数据分为get提交和post提交，get提交在url上挂参数，post提交在body中</h4>
<form action="/login" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="button" value="登录">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</div>
<div class="c4" id="label-test">
<h3><label></label></br></h3>
<h4>label 标题标签 与input联合运用，增加input的点击范围 可直接点击文字就输入 for：映射到input的id</h4>
<label for="username">用户名</label>
<input type="text" id="username" placeholder="placeholder属性">
</div>
<div class="c4" id="textarea-test">
<h3><textarea></textarea></br></h3>
<h4>多行文本 textarea 默认值在标签之间</h4>
<textarea >默认值</textarea>
</div>
<div class="c5" id="select-test">
<h3><select></select></br></h3>
<h3><option></option></br></h3>
<h4>select option 下拉框标签 默认选择在option上增加selected size属性显示多少个 多选属性：multiple</h4>
<div>
<h5 style="display: inline">单选</h5>
<select name="city">
<option value="1" selected="selected">哈尔滨</option>
<option value="2">辽宁</option>
<option value="3">大兴安岭</option>
<option value="4">吉林</option>
</select>
<h5 style="display: inline">多选</h5>
<select name="city" multiple="multiple">
<option value="1" selected="selected">哈尔滨</option>
<option value="2">辽宁</option>
<option value="3">大兴安岭</option>
<option value="4">吉林</option>
</select>
<h5 style="display: inline">超过4个就出滚动条</h5>
<select name="city" multiple="multiple" size="4">
<option value="1" selected="selected">哈尔滨</option>
<option value="2">辽宁</option>
<option value="3">大兴安岭</option>
<option value="4">吉林</option>
<option value="4">黑河</option>
</select>
<h3><select></select></br></h3>
<h3><optgroup></optgroup></br></h3>
<h4>对下拉选项进行分组optgroup 分组，label属性是组的名字，不可选择</h4>
<select name="city" multiple="multiple" size="4">
<optgroup label="黑龙江">
<option value="1" selected="selected">哈尔滨</option>
<option value="3">大兴安岭</option>
<option value="4">吉林</option>
<option value="4">黑河</option>
</optgroup>
<optgroup label="辽宁">
<option value="1" selected="selected">沈阳</option>
<option value="3">大连</option>
</optgroup>
</select>
</div>
</div>
<div class="c4" id="a-test">
<h3><a></a></br></h3>
<h4>超链接 href属性为跳转的地址，target属性为以什么方式跳转"_blank"新tab跳转，a标签还可以做锚点，通过id进行对应关系的映射 去掉a标签的下划线通过属性text-decoration:none</h4>
<a href=http://www.imdsx.cn">大师兄博客</a>
<a href=http://www.imdsx.cn" style="text-decoration: none">大师兄博客</a>
</div>
<div class="c2" id="img-test">
<h3></img></h3>
<h4>img 图片标签 src：图片的位置 图片跳转通过a标签 alt：当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字</h4>
<img src="http://ui.imdsx.cn/static/image/dsx.jpg" style="height: 150px;width: 150px">
</div>
<div class="c5" id="ul-test">
<h3><ul></ul></br></h3>
<div style="padding-left: 20px;display: inline-block;width: 230px;">
<div><h4>列表 ul li · 形式的列表</h4></div>
<div style="display: inline-block; padding-left: 20px">
<ul>
<li>第一</li>
<li>第二列</li>
</ul>
</div>
</div>
<div style="padding-left: 20px;display: inline-block;width: 230px;">
<div><h4>列表 ol li 数字形式的列表</h4></div>
<div style="display: inline-block;padding-left: 20px">
<ol>
<li>第一</li>
<li>第二列</li>
</ol>
</div>
</div>
<div style="padding-left: 20px;">
<div><h4>分层列表 dl dd内层 dt外层</h4></div>
<div style="display: inline-block;">
<dl>
<dt>黑龙江</dt>
<dd>哈尔滨</dd>
</dl>
<dl>
<dt>辽宁</dt>
<dd>大连</dd>
</dl>
</div>
</div>
</div>
<div class="c3" id="table-test">
<h3><table></table></h3>
<h4>table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列</h4>
<table border="1">
<thead>
<th>id</th>
<th>用例名称</th>
<th>执行人</th>
<th>编辑</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">table表格测试</td>
<td>小白</td>
<td>
<a href="" style="text-decoration: none">详情</a> 
<a href="" style="text-decoration: none">编辑</a>
</td>
</tr>
<tr>
<td>2</td>
<td>table表格测试</td>
<td>小白</td>
<td>
<a href="" style="text-decoration: none">详情</a> 
<a href="" style="text-decoration: none">编辑</a>
</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2">table表格测试</td><!-- rowspan 列合并 -->
<td>小白</td>
<td>
<a href="" style="text-decoration: none">详情</a> 
<a href="" style="text-decoration: none">编辑</a>
</td>
</tr>
<tr>
<td>4</td>
<td>小白</td>
<td>
<a href="" style="text-decoration: none">详情</a> 
<a href="" style="text-decoration: none">编辑</a>
</td>
</tr>
</tbody>
</table>
</div>
<span style="display: block;font-size: 2em;margin: 0 auto;width: 110px;padding-left: 450px;padding-top: 27px">CSS</span>
<div class="c4" id="css-test">
<h2>css</h2>
<h4>css style: 里面的写的就叫做css 每一个样式的间隔用； 全部相同的时候引用class</h4>
<p>style="height: 48px;/p>
</div>
<div class="c4" id="id-test">
<h2>ID选择器</h2>
<h4># 代表通过id选择器查找</h4>
<p>#i1{height: 48px;}</p>
</div>
<div class="c4" id="class-test">
<h2>class选择器</h2>
<h4>. 代表通过class选择器查找</h4>
<p>.menu{height: 48px;}</p>
</div>
<div class="c4" id="lab-test">
<h2>标签选择器</h2>
<h4>标签名 代表通过标签选择器查找</h4>
<p>span {color: red;}</p>
</div>
<div class="c4" id="cen-test">
<h2>标签层级选择器</h2>
<h4>标签内的标签 通过标签+空格+标签 代表通过标签选择器查找 例：span标签下面所有div标签颜色改变</h4>
<p>span div{color: aqua;}</p>
</div>
<div class="c4" id="class-cen-test">
<h2>CLASS层级选择器</h2>
<h4>通过CLASS标签选择器定位第一层，在通过层级选择器定位第二层</h4>
<p>.c1 div{height: 48px;}</p>
</div>
<div class="c4" id="id-cen-test">
<h2>ID层级选择器</h2>
<h4>通过ID标签选择器定位第一层，在通过层级选择器定位第二层</h4>
<p>#i2 div{height: 48px;}</p>
</div>
<div class="c4" id="id-group-test">
<h2>ID组合选择器</h2>
<h4>ID组合选择器，应用于以id选择器进行css样式设置的，可以通过id z1 z2 z3 共用一套css样式 组合 通过逗号间隔
</h4>
<p>#z1,#z2,#z3{height: 48px;}</p>
</div>
<div class="c4" id="class-group-test">
<h2>CLASS组合选择器</h2>
<h4>CLASS组合选择器，应用于以CLASS选择器进行css样式设置的，可以通过CLASS s1 s2 s3 共用一套css样式 组合 通过逗号间隔</h4>
<p>.s1,.s2,.s3{height:48px;}</p>
</div>
<div class="c4" id="attribute-group-test">
<h2>属性选择器</h2>
<h4>属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用</h4>
<p>div[s='dsx']{height: 48px;}</p>
</div>
<div class="c4" id="sort-test">
<h2>CSS优先级</h2>
<h4>标签中style优先级最高，其次在代码中就近找，也就是重下往上找</h4>
</div>
<div class="c4" id="IMPORT-test">
<h2>引入CSS样式表</h2>
<h4>CSS可以写在三个地方，分别是1、标签中增加属性style，2、header中添加标签style标签，在标签中添加CSS，3、引入CSS样式表，实际就是将header中的style标签复制到一个以css为结尾的文件中，通过在header中添加link标签，引入css样式表<link rel="stylesheet" href="tmp.css"></h4>
</div>
<div class="c4" id="height-test">
<h2>height</h2>
<h4>高度</h4>
</div>
<div class="c4" id="width-test">
<h2>width</h2>
<h4>宽度</h4>
</div>
<div class="c3" id="font-size-test">
<h2>font-size font-weight</h2>
<h4>font-size:字体大小 px font-weight:字体加粗</h4>
<h4>font-weight:字体加粗 bold:粗体 700 bolder:更粗字体 lighter:更细字体 normal:默认值 400 inherit:从父类继承字体粗细</h4>
<span style="width: 80px;height: 48px;font-size: 20px">字体大</span>
<span style="width: 80px;height: 48px;font-weight: 700">字体粗</span>
</div>
<div class="c3" id="text-align-test">
<h2>text-align</h2>
<h4>text-align 水平文本对齐方式</h4>
<h4>left:文本左对齐 right:文本右对齐 center:中间对齐 inherit:父类继承</h4>
<div style="text-align: right;border: 1px red solid;width: 80px;height: 50px">1</div>
</div>
<div class="c3" id="line-height-test">
<h2>line-height</h2>
<h4>line-height 垂直文本对齐方式</h4>
<h4>line-height的属性直接对应外层div的宽度就可以</h4>
<div style="line-height: 40px;border: 1px red solid;width: 80px;height: 50px;text-align: center">1</div>
</div>
<div class="c3" id="float-test">
<h2>float</h2>
<h4>float 浮动 块级标签浮动后 相当于分层</h4>
<h4>通过浮动可以将块及标签放到一行，相当于不同层，但是超过100%的宽度就会换行，超过100%的宽度，是相对于外层div来判断的。 none:默认不浮动、inherit:父类继承</h4>
<div style="float: left;width: 100px;height: 50px;border: 1px red solid">左边</div>
<div style="float: left;width: 100px;height: 50px;border: 1px red solid">并列左边</div>
<div style="float: right;width: 100px;height: 50px;border: 1px red solid">右边</div>
</div>
<div class="c5" id="display-test">
<h2>display</h2>
<h4>display 展示属性</h4>
<h4>块级标签和行内标签之间切换的属性 display:inline，块级标签转换为行内标签 display:block 行内标签转换为块级标签 行内标签无法设置无法设置高度、宽度、padding、margin，可以通过display的display:inline-block，行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性</h4>
<div style="display: inline;height: 100px;background-color: cornflowerblue;width: 100px">外联标签</div>
<span style="display: block;width: 100px;height: 100px;background-color: aquamarine">内联标签</span>
<span style="display: inline-block ;width: 100px;height: 50px;background-color: blue">大师兄</span>
<span style="width: 100px;height: 50px;background-color: blue">大师兄</span>
<span style="width: 100px;height: 50px;display: none">不显示</span>
</div>
<div class="c3" id="margin-test">
<h2>margin</h2>
<h4>margin 外边距</h4>
<h4>外边距 自己针对外围的div产生变化 外边距撑大外层 top left right bottom</h4>
<div style="border: 1px red solid;width: 90%;height: 100px">
<div style="margin-top: 10px;width: 100%;height: 50px;background-color: greenyellow"></div>
</div>
</div>
<div class="c3" id="padding-test">
<h2>padding</h2>
<h4>padding 内边距</h4>
<h4>内边距 自身的边距增加 top：从上到下增加 内边距扩大自身 bottom：从下增加 left：从左增加 right：从右增加
</h4>
<div style="border: 1px red solid;width: 90%;height: 100px">
<div style="padding: 1px;width: 100%;height: 50px;background-color: hotpink"></div>
</div>
</div>
<div class="c3" id="position-test">
<h2>position</h2>
<h4>position 分层</h4>
<h4>position：fixed 固定在窗口的某个位置 top：距离顶部多少像素 left right bottom 见body.html</h4>
<h4>position relative absolute</h4>
<h4>position：relative 与 position：absolute(绝对定位，单用没什么作用 结合relative才牛逼) absolute的定位针对于于relative的定位 单独relative没有任何意义 见body.html</h4>
</div>
<div class="c3" id="z-index-test">
<h2>z-index</h2>
<h4>z-index 层级关系</h4>
<h4>分层后通过z-index来记录层级关系 越大越在前面</h4>
<div style="border: 1px red solid;width: 150px;height: 50px;position: relative">
<div style="width: 150px;height: 50px;position:absolute ;background-color: cornflowerblue;z-index: 10">z-index: 10</div>
<div style="width: 150px;height: 50px;position:absolute;background-color: purple;z-index: 9">z-index:9</div>
</div>
</div>
<div class="c3" id="cursor-test">
<h2>cursor</h2>
<h4>cursor 一些不同的光标 cursor:pointer 鼠标的小手 cursor:move 有很多种样式 知道干嘛的就行了</h4>
<input type="button" style="cursor: pointer" value="小手">
<input type="button" style="cursor: move" value="元素移动">
<input type="button" style="cursor: crosshair" value="截图">
</div>
<div class="c3" id="overflow-test">
<h2>overflow</h2>
<h4>overflow属性设置当div内的内容溢出div的高宽时，如何处理 默认会出现在元素框之外 hidden：溢出部分截取掉 scroll：超出就出现滚动条</h4>
<div style="overflow: hidden; height: 80px;width: 80px;display: inline-block"><img src="http://ui.imdsx.cn/static/image/dsx.jpg"></div>
<div style="overflow: scroll; height: 80px;width: 80px;display: inline-block"><img src="http://ui.imdsx.cn/static/image/dsx.jpg"></div>
<div style="overflow: auto; height: 80px;width: 80px;display: inline-block"><img src="http://ui.imdsx.cn/static/image/dsx.jpg"></div>
</div>
<div class="c3" id="hover-test">
<h2>hover</h2>
<h4>hover属性是当鼠标移动到上面后，设置其样式</h4>
<div class="c6" style="height: 48px;width: 150px;border: 1px solid red;text-align: center;color: white;text-align: center">显示什么?</div>
</div>
<div class="c3" id="background-test">
<h2>background</h2>
<h4>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横向 纵向 是否堆叠</h4>
<div><h4>无限堆叠</h4></div>
<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');height: 160px"></div>
<div><h4>不堆叠</h4></div>
<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');height: 160px;background-repeat: no-repeat"></div>
<div><h4>纵向堆叠</h4></div>
<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');height: 160px;background-repeat: repeat-y"></div>
<div><h4>横向堆叠</h4></div>
<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');height: 160px;background-repeat: repeat-x"></div>
<div><h4>background-position 两种方式</h4></div>
<div class="image-postion" style="background-image: url('http://ui.imdsx.cn/static/image/icon.png');"></div>
<div class="image-postion2" style="background-image: url('http://ui.imdsx.cn/static/image/icon.png');"></div>
<div><h4>简写background属性</h4></div>
<div style="border: 1px red solid;height: 18px;width: 20px;background: white url('http://ui.imdsx.cn/static/image/icon.png') 0 0 no-repeat"></div>
</div>
<div class="go-top">
<input type="button" style="height: 40px;width: 80px;opacity: 0.5;cursor: pointer" value="返回顶部" onclick="goTop()">
</div>
<script src="public.js"></script>
</body>
</html>
