10月26日实验作业-CSDN博客

本文链接：https://blog.csdn.net/m0_74349974/article/details/134158680

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>