<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
/*字体变粗 变大*/
font-size: larger;
font-weight: bolder;
}
.c2{
height: 100px;
width: 100px;
/*1像素的红色实线边框*/
border: 1px red solid;
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 100px;
}
.c3{
float: left;
}
.base{
height: 100px;
width: 100px;
border: 1px red solid;
/*background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');*/
/*background-repeat: no-repeat; !* 不堆叠*!*/
/*background-repeat: repeat-x;!* 横向堆叠*!*/
/*background-repeat: repeat-y;!* 纵向堆叠*!*/
}
.c4{
width: 100%;
border: 1px blue solid;
}
.outer{
width: 100%;
height: 100px;
border: 1px red solid;
}
.inner{
width: 100%;
height: 40px;
background-color: aqua;
/*外边距 不改变自身，针对外部进行移动*/
/*margin-top: 1px;*/
/*内边距 改变自身 */
padding-top: 1px;
}
.header{
background-color: aquamarine;
/*width: 100%;*/
height: 48px;
/*分层绝对定位*/
position: fixed;
top: 0;
left: 0;
right: 0;
line-height: 48px;
text-align: center;
}
.c5{
border: 1px red solid;
height: 200px;
width: 200px;
position: relative;
}
.c6{
background-color: black;
height: 45px;
width: 45px;
/*postion的相对定位*/
position: absolute;
}
.bp{
width: 20px;
height: 20px;
border: 1px red solid;
background-image: url('http://ui.imdsx.cn/static/image/icon.png');
background-position: 10px 10px;
}
</style>
</head>
<body style="margin: 0">
<div class="c1">天秤座</div>
<div class="c2">1</div>
<!--<div class="base c3"></div>-->
<!--<div class="base c3"></div>-->
<div class="c4">
<div style="width:100px;height: 100px;background-color: aqua;float: left"></div>
<div style="width:100px;height: 100px;background-color: aqua;float: right"></div>
<div style="clear:both"></div>
</div>
<!--display 行内转块 块转行内-->
<!--行内标签设置了宽高不生效-->
<div class="base" style="display: inline">块转行内</div>
<div class="base" style="display: inline-block">既是块又是行内</div>
<span class="base" style="display: block;">行内转块</span>
<!--隐藏元素-->
<div class="base" style="display: none"></div>
<!--外边距和内边距-->
<div class="outer">
<div class="inner"></div>
</div>
<div class="base" style="margin-top: 10px"></div>
<div class="base" style="margin-top: 10px"></div>
<!--分层-->
<div class="header">HTML</div>
<div class="c5">
<div class="c6" style="background-color: red;right: 0;top:0;"></div>
<div class="c6" style="background-color: blue;right: 0;bottom: 0"></div>
<div class="c6" style="background-color: black;z-index: 9"></div>
<div class="c6" style="background-color: pink;z-index: 10"></div>
</div>
<!--修改鼠标的箭头样式-->
<input type="button" value="登录" style="cursor: pointer">
<!--overflow 如果div内的内容大于外部div的宽高自动出现滚动条-->
<div class="base" style="overflow: auto">
<img src="timg.jpg">
</div>
</div>
<!--scroll 如果图小于外部div 会强制加上滚动条-->
<div class="base" style="overflow: scroll">
<img src="timg.jpg">
</div>
<!--hidden如果图片或内容大于外部div宽高，自动截图左上角-->
<div class="base" style="overflow: hidden;">
<img src="timg.jpg">
</div>
<div class="base" style=""></div>
<div class="bp"></div>
</body>
</html>
