新手学习web第八弹
4.19
今天继续深化学习了布局结构，通过老师的讲解我们自主完成了了口型结构的编写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>口型布局</title>
<style type="text/css">
/*将所有属性去掉*/
*{margin: 0; padding: 0;}
.top{
margin: 0 auto;
width:1000px ;
height: 400px;
background-color: chartreuse;
}
.bottom{
margin: 0 auto;
width:1000px ;
height: 600px;
background-color: wheat;
}
.left{
width:400px ;
height: 600px;
background-color: bisque;
float: left;
}
.right{
width:600px ;
height: 600px;
background-color: yellow;
float: left;
}
.a{
width:600px ;
height: 400px;
background-color: black;
}
.c{
width:400px ;
height: 400px;
background-color: gray;
float: left;
}
.d{
width:200px ;
height: 400px;
background-color: palegreen;
float: left;
}
.b{
width:600px ;
height: 200px;
background-color: chocolate;
}
</style>
</head>
<body>
<div class="top">上部</div>
<div class="bottom">
<div class="left">下部左</div>
<div class="right">
<div class="a">
<div class="c">
尚座
</div>
<div class="d">
下游
</div>
</div>
<div class="b">
下右下
</div>
</div>
</div>
</body>
</html>
然后教我我们验证了文本流的显示顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证文档流的显示顺序</title>
<style type="text/css">
/*初始化，把所有元素内外间距清零*/
*{margin: 0; padding: 0;}
.parent{
margin: 0 auto;
width: 400px;
/*height: 150px;*/
background-color: yellow;
/*子集元素浮动后导致父级元素高度塌陷解决方法*/
overflow: hidden;
}
.son1{
/*margin: 0 auto;*/
float: left;
width: 200px;
height: 200px;
background-color: #0000FF;
}
.son2{
width: 200px;
height: 200px;
background-color: burlywood;
}
</style>
</head>
<body>
<div class="parent">
<div class="son1">
<!--浮动，200*200，红色 -->
</div>
<div class="son2">
<!--默认不浮动，200*200 蓝色-->
</div>
</div>
</body>
</html>
最后老师给我们留下了一个课后作业让我们独立完成通过我不懈努力也是完成了下面是我写的代码有啥错误请指出来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课后作业</title>
<style type="text/css">
/**{margin: 0; padding: 0;}*/ /*把所有元素内外边距消零*/
.parent{
margin: 0 auto;
width: 1000px;
height: 500px;
/*使文本水平居中*/
text-align: center;
}
.son{
/*将块元素转换成行内块，因为块元素能更改宽高，但自动换行，行内块也能改变宽高，但不自动换行*/
display: inline-block;
/*float: left;*/
width: 150px;
height: 120px;
/*设置背景色*/
background-color:#fff;
/*给元素加一个边框，宽度是一，solid为实线*/
border: 1px solid;
/*给元素设置一个内边距*/
padding: 10px;
}
img{
width:150px;
height:120px;
/*text-align: center;*/
}
</style>
</head>
<body>
<div class="parent">
<div class="son"><img src="img/漂亮照片.jpg"/></div>
<div class="son"><img src="img/漂亮照片.jpg"/></div>
<div class="son"><img src="img/漂亮照片.jpg"/></div>
<div class="son"><img src="img/漂亮照片.jpg"/></div>
</div>
</body>
</html>
浙公网安备 33010602011771号