1、警示框
html 的内容
<!-- 第一个警示框 -->
<div class="wp">
<h3 class="tit">Adobe Photoshop CS4 Extended</h3>
<p class="cont1">要在关闭之前存储对 Adobe Photoshop文档“未标题-1”的更改?</p>
</div>
<div style="height: 44px;"></div>
<!-- 第二个警示框 -->
<div class="wp1">
<h3 class="tit1">Adobe Photoshop CS4 Extended</h3>
<p class="cont2">要在关闭之前存储对 Adobe Photoshop文档“未标题-1”的更改?</p>
</div>
<div style="height: 44px;"></div>
<!-- 第三个警示框 -->
<div class="wp2">
<h3 class="tit2">Adobe Photoshop CS4 Extended</h3>
<p class="cont3">要在关闭之前存储对 Adobe Photoshop文档“未标题-1”的更改?</p>
</div>
css 的内容
/* 重置全局样式
作用是 把全局所有标签的内边距和外边距都重置为0,这样在使用的时候就不会被默认样式影响 */
* {
margin: 0;
padding: 0;
}
body {
background-color: #a4dae8;
}
/* 警示框1 */
.wp {
background-color: #eb346c;
padding: 0px 24px 24px;
width: 452px;
/* height: 191px; */
}
.tit {
height: 50px;
line-height: 50px;
color: #fff;
background: url(/Day01/作业/img/img1/gray-logo.png) no-repeat left center;
padding-left: 42px;
}
.cont1 {
background: #e3778f url(/Day01/作业/img/img1/gray-warning.png) no-repeat 48px 25px ;
width: 281px;
height: 85px;
padding: 34px 51px 0px 120px ;
color: #fff;
/* border:1px #ff0 solid; */
font-size: 15px;
line-height: 25px;
}
.tit1 {
background: #fae5e8 url(/Day01/作业/img/img1/pink-logo.png) no-repeat 23px 14px;
width: 436px;
height: 50px;
line-height: 50px;
border:2px #db5573 solid;
color: #d95479;
padding-left: 64px;
}
.cont2 {
background:#fff url(/Day01/作业/img/img1/pink-warning.png) no-repeat 53px 22px ;
padding: 34px 51px 0px 120px;
width: 329px;
height: 76px;
border:2px #db5573 solid;
color: #d95479;
border-top: none;
font-size: 15px;
}
.wp2 {
background-color: #fff;
padding: 0px 24px 24px;
width: 456px;
}
.tit2 {
background: url(/Day01/作业/img/img1/red-logo.png) no-repeat left center;
height: 50px;
line-height: 50px;
padding-left: 42px;
color:#939393;
}
.cont3 {
background:#fff url(/Day01/作业/img/img1/gray-warning.png) no-repeat 33px 22px ;
padding: 34px 51px 0px 120px;
width: 285px;
height: 60px;
/* border:2px #db5573 solid; */
color: #0d0d0d;
border-top: 2px #939393 solid;
font-size: 15px;
}
02、盒模型
margin 设置边距
margin-top 设置元素上边的外边距
margin-right 设置元素右边的外边距
margin-bottom 设置元素下边的外边距
margin-left 设置元素左边的外边距
合写
margin:上 右 下 左;
上 = 下 右 != 左
margin:上 右 ;
上 = 下 右 = 左
上 = 下 = 右 = 左
margin:上;
margin的经典bug
1.上下两个兄弟元素的margin重叠问题
上下两个兄弟标签,设置margin的时候,他们的之间的距离不是相加而是谁设置的margin值大,就显示谁的距离,即为值大的覆盖小的
可以理解为,上面元素的margin-bottom和下面元素的margin-top他们的值谁大取谁
解决方法:给下面的元素添加 display:inline-block
2.父子级子元素的margin-top 转递问题
在子元素中设置margin-top,表现的结果是该 margin-top传递到了父级元素上,使得父元素距离他上面的元素为该margin-top值
解决方法:
a.给父元素添加 overflow:hidden;
b.给父元素添加 border