您的位置：首页 > Web前端

李洪强和你一起学习前端之(7)复习

2017-07-16 20:30 295 查看

复习:

1.1行高

行高可以继承

1.2行高单位

给单独的盒子设置:

Px　　跟文字大小没有关系

em　　行高和字体大小相乘

%

不带单位

给父盒子设置:

px　　先计算再继承

2em　　先计算再继承

%

影响盒子大小: Padding 边框

1.3.2 Padding

取值: 上右下左

1.3.3 Margin

塌陷

给父盒子设置border

给父盒子设置overflow

案例一:

实现效果:

代码:

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b9edb }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2eafa9 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #a5b2b9 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #3c7400 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #d76019 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #ad5cff }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; min-height: 23.0px }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151; min-height: 23.0px }
p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972; min-height: 23.0px }
p.p13 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972 }
span.s1 { color: #596972 }
span.s2 { color: #2b9edb }
span.s3 { color: #d76019 }
span.s4 { color: #000000 }
span.s5 { color: #929151 }
span.s6 { color: #060606 }
span.s7 { color: #ad5cff }
span.s8 { color: #ff7900 }
span.s9 { color: #3c7400 }
span.s10 { color: #97a700 }
span.s11 { color: #2eafa9 }
span.Apple-tab-span { white-space: pre }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*css初始化*/
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.box{
width: 260px;
height: 327px;
border: 1px solid #009900;
margin: 20px auto;
background:url(img/bg.gif);
}
.title{
height: 23px;
border-left: 4px solid #c9E143;
margin: 10px 0 0 10px;
/*没有设置宽度可以用padding*/
padding-left: 11px;
/*让文字垂直居中显示*/
line-height: 23px;
color: white;
/*设置不是粗体显示*/

}
h4{
/*设置不是粗体显示*/
font-weight: normal;
}
.list{
width: 222px;
height: 279px;
background: white;
margin-left: 10px;
margin-top: 5px;
padding-left: 9px;
padding-right: 9px;
}
.list li{
height: 30px;
border-bottom: 1px dashed #666666;
line-height: 30px;
background: url(img/tb.gif) no-repeat left 8px;
padding-left: 16px;
}

</style>
</head>
<body>

<div class="box">
<div class="title">

<h4>爱宠知识</h4>
</div>
<ul class="list">
<li>
<a href="">养猫比养狗健康</a>
</li>
<li>
<a href="">养猫比养狗健康</a>
</li><li>
<a href="">养猫比养狗健康</a>
</li><li>
<a href="">养猫比养狗健康</a>
</li><li>
<a href="">养猫比养狗健康</a>
</li><li>
<a href="">养猫比养狗健康</a>
</li><li>
<a href="">养猫比养狗健康</a>
</li><li>
<a href="">养猫比养狗健康</a>
</li><li>
<a href="">养猫比养狗健康</a>
</li>
</ul>
</div>

</body>
</html>

案例2:

实现效果:

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;

}
.box{
width: 208px;
height: 383px;
border: 1px solid #CECECE;
/*居中显示*/
margin: 20px auto;
}
.title{
height: 25px;
background-color: #ECEDEE;
/*设置居中*/
line-height: 25px;
}
h4{
padding-left: 9px;
}

.photo{
width: 180px;
height: 180px;
border: 1px solid #ECEDEE;
margin: 5px auto;
}
.weibo{
/*//让内容居中
margin: 0 auto 是让盒子居中*/
text-align: center;
border-bottom: 1px dashed #D1D1D1;
padding-bottom: 10px;
}
.weibo input{
height: 24px;
width: 70px;
background: url(img/vb.jpg) no-repeat;
margin-bottom: 5px;
}
.friend input{
width: 69px;
height: 23px;

}

.friend{
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="title">
<h4>个人资料</h4>

</div>
<div class="photo">
<img src="img/1.jpg"/>
</div>
<div class="weibo">
<span id="">
V闪闪
</span>
<img src="img/v.jpg"/>
<br />
<input type="button" name="" id="" value="微博" />
</div>
<div class="friend">
<input type="button" name="" id="" value="加好友" />
<input type="button" name="" id="" value="发纸条" />
<input type="button" name="" id="" value="写留言" />
<input type="button" name="" id="" value="加关注" />
</div>
</div>
</body>
</html>

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b9edb }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2eafa9 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #3c7400 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606; min-height: 23.0px }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #d76019 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #ad5cff }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #a5b2b9 }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151 }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151; min-height: 23.0px }
p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972; min-height: 23.0px }
span.s1 { color: #596972 }
span.s2 { color: #2b9edb }
span.s3 { color: #d76019 }
span.s4 { color: #929151 }
span.s5 { color: #060606 }
span.s6 { color: #ad5cff }
span.s7 { color: #3c7400 }
span.s8 { color: #97a700 }
span.s9 { color: #ff7900 }
span.s10 { color: #000000 }
span.s11 { color: #2eafa9 }
span.Apple-tab-span { white-space: pre }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航