1.简述块元素和行内元素的概念及特性
答:块元素,无论内容多少,该元素独占一行(p、h1-h6…);
行内元素,内容撑开宽度,左右都是行内元素的可以排在一行(a、strong、em…)。
2.了解浮动在网页中的应用,left和right的区别?
答:left元素向左浮动;right元素向右浮动。
3.使用clear属性清除浮动时,属性值left、right和both有什么区别?
答:left在左侧不允许浮动元素;
right在右侧不允许浮动元素;
both在左、右两侧不允许浮动元素。
4.解决父级边框塌陷的4种方法分别是什么,各自的使用场景是什么?
答:1、浮动元素后面加空div,空div会造成HTML代码冗余;
2、 设置父元素的高度,元素固定高会降低扩展性;
3、 父级添加overflow属性,下拉列表框的场景不能用;
4、父级添加伪类after。
5.学员操作:PPT第16页(制作电视剧详情列表页面)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电视剧详情列表</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#father{
margin-top: 10px;
margin-left: 30px;
width: 315px;
height: 350px;
}
.a1{
background-image:url("1.gif");
background-repeat:no-repeat;
background-position: 2% 50%;
border:1px darkgrey solid;
margin-bottom: 10px;
}
h3{
font-size: 12px;
line-height:27px;
text-indent:38px;
}
.a2{
padding: 2px 2px;
line-height: 10px;
float: left;
border: 1px darkgrey solid;
margin-right: 10px;
}
.a3{
font-size: 12px;
line-height:27px;
}
.a4{
margin-top: 10px;
margin-left: 2px;
clear: left;
font-size: 12px;
line-height:27px;
}
.a5{
float:right;
}
a{
text-decoration: none;
color:black;
}
a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
</style>
</head>
<body>
<div id="father">
<div class="a1">
<h3>明星荐片</h3>
</div>
<div class="a2">
<img src="3.gif"/>
</div>
<div class="a3">
<strong>周秀娜荐片:让子弹飞</strong><br/>
导演:姜文<br/>
主演:姜文 周润发 葛优<br/>
点评:我最喜欢的要算《让子弹飞》了,超喜欢...[详情]<br/>
</div>
<div class="a4">
<ul >
<li><a href="#">《巴别塔》:好的故事引人深思 <span class="a5">阿朵</span></a></li>
<li><a href="#">《洛杉矶之战》:外星人那么弱智? <span class="a5">丁子俊</span></a></li>
<li><a href="#">《让子弹飞》:武侠里也可以有爱情 <span class="a5">周秀娜</span></a></li>
<li><a href="#">《剑雨》:好的故事引人深思 <span class="a5">叶年生</span></a></li>
<li><a href="#">《春风沉醉的夜晚》:非常真实 <span class="a5">如小果</span></a></li>
<li><a href="#">《克洛伊》:故事简单却细致 <span class="a5">刘若英</span></a></li>
</ul>
</div>
</div>
</body>
</html>