收藏
批改状态：合格
老师批语：下次记得把作业总结, 写到最后,内容不需要太多, 但一定要有重点
day5，简单学习了CSS的布局原理，布局主要是通过浮动和定位来实现的，设置元素浮动后，可以使得元素在水平位置上自由设置，定位包括相对定位relative，绝对定位absolute，和固定定位fixed。
作业一：实例演示如何消除子元素浮动造成父元素高度折叠的影响
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--<link rel="stylesheet" href="./css/index2.css">-->
<style>
.box2,.box3,.box4,.box5,.box6{
width: 200px;
border:dashed mediumvioletred 1px;
}
.box1{
width:inherit;
height:150px;
background: #f0c674;
float:left;
}
/*第一种解决方法：直接根据子元素高度修改父元素高度*/
.box3{height:150px;}
/*第二种解决方法：让父元素跟随子元素浮动*/
.box4{float:left;}
/*第三种解决方法：在子元素后面清除子元素的浮动影响*/
.clear{clear:both}
/*第四种解决方法：给父元素设置overflow:hidden属性*/
.box6{overflow:hidden;}
</style>
<title>消除子元素浮动造成父元素高度折叠的影响</title>
</head>
<body>
<!--实例演示如何消除子元素浮动造成父元素高度折叠的影响-->
<div class="box2">
<div class="box1"></div>
</div>
<hr class="clear">
<!--第一种解决方法：直接根据子元素高度修改父元素高度，但随着子元素的高度变化而修改父元素高度，在某些不太能实现-->
<div class="box3">
<div class="box1"></div>
</div>
<hr>
<!--第二种解决方法：让父元素跟随子元素浮动，当元素是多层嵌套的时候，就需要设置所有父元素浮动-->
<div class="box4">
<div class="box1"></div>
</div>
<hr class="clear">
<!--第三种解决方法：在子元素后面清除子元素的浮动影响，这种方法会使得文档结构过于复杂-->
<div class="box5">
<div class="box1"></div>
<div class="clear"></div>
</div>
<hr>
<!--第四种解决方法：给父元素设置overflow:hidden属性，此方法简单易用，兼容性强-->
<div class="box6">
<div class="box1"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
作业二：实例演示三列布局的实现原理
使用绝对定位来实现三列布局，绝对定位是针对于已经定位
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/index8.css">
<style>
.header,.footer{
width: 1000px;
height:200px;
text-align: center;
line-height: 200px;
background: #f0c674;
margin:0 auto;
}
.main{
min-height:500px;
width: 1000px;
background-color: #81a2be;
margin: 10px auto;
position: relative;
}
/*.content{
position: absolute;
margin-top: 25px;
}*/
/*强行计算三列宽度进行布局*/
/*.main-left{
position: absolute;
width: 200px;
min-height:500px;
background-color: #f0c674;
text-align: center;
line-height: 500px;
}
.main-center{
position: absolute;
width: 600px;
min-height:500px;
background-color: #008856;
left: 200px;
text-align: center;
line-height: 500px;
}
.main-right{
position: absolute;
width: 200px;
min-height:500px;
background-color: #f0c674;
left:800px;
text-align: center;
line-height: 500px;
}*/
/*
另一种简便方法直接设置左右两侧的样式后，通过margin将中间部分挤压出来*/
.main-left{
width: 200px;
min-height: 500px;
background-color:rebeccapurple;
position: absolute;
left: 0;
top: 0;
text-align: center;
line-height: 500px;
}
.main-right{
width: 200px;
min-height: 500px;
background-color:rebeccapurple;
position: absolute;
right: 0;
top: 0;
text-align: center;
line-height: 500px;
}
.main-center{
margin:0 200px;
background-color: #f0c674;
height: 500px;
text-align: center;
line-height: 500px;
}
</style>
<title>绝对定位实现经典三列布局</title>
</head>
<body>
<header class="header">这里是头部区域</header>
<main class="main">
<!--<div class="content">-->
<div class="main-left">主体部分左侧</div>
<div class="main-center">主体部分中间</div>
<div class="main-right">主体部分右侧</div>
<!--</div>-->
</main>
<footer class="footer">这里是底部区域</footer>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.浮动定位
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--<link rel="stylesheet" href="./css/index9.css">-->
<style>
.header,.footer{
width: 1000px;
height:200px;
text-align: center;
line-height: 200px;
background: #f0c674;
margin:0 auto;
}
.main{
min-height:500px;
width: 1000px;
background-color: #81a2be;
margin: 10px auto;
overflow:hidden;
}
.main-left{
width:200px;
min-height:500px;
float:left;
background-color: mediumslateblue;
}
.main-center{
width: 600px;
min-height: 500px;
float: left;
background-color: fuchsia;
}
.main-right{
width:200px;
min-height:500px;
float:left;
background-color: mediumslateblue;
</style>
<title>绝对定位实现经典三列布局</title>
</head>
<body>
<header class="header">这里是头部区域</header>
<main class="main">
<div class="main-left">主体部分左侧</div>
<div class="main-center">主体部分中间</div>
<div class="main-right">主体部分右侧</div>
</main>
<footer class="footer">这里是底部区域</footer>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
