姚文浩第六次作业
8-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签的浮动</title>
<style type="text/css">
.father{
background: #eee;
border:1px dashed #999;
}
.box1,.box2,.box3{
height:50px;
line-height: 50px;
border:1px dashed #999;
margin:15px;
padding: 0px 10px;
float: left;
}
.box1{background: #ff9;}
.box2{background: #fc6;}
.box3{background: #f90;}
p{
background: #ccf;
border:1px dashed #999;
margin:15px;
padding: 0px 1px;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<p>梦想总是在失败后成功，所以梦想不能放弃。梦想总是在失败后成功，所以梦想不能放弃。梦想总是在失败后成功，所以梦想不能放弃。梦想总是在失败后成功，所以梦想不能放弃。</p>
</div>
</body>
</html>
8-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.father{
background: #ccc;
border:1px dashed #999;
}
.box1,.box2,.box3{
height: 50px;
line-height: 50px;
background: #f9c;
border:1px dashed #999;
margin:15px;
padding: 0px 10px;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
8-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>空标签清除浮动</title>
<style type="text/css">
.father{
background: #ccc;
border:1px dashed #999;
}
.box1,.box2,.box3{
height: 50px;
line-height: 50px;
background: #f9c;
border:1px dashed #999;
margin:15px;
padding: 0px 10px;
float: left;
}
.box4{clear:both;}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4"></div>
</div>
</body>
</html>
8-4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow清除浮动</title>
<style type="text/css">
.father{
background: #ccc;
border:1px dashed #999;
overflow: hidden;
}
.box1,.box2,.box3{
height: 50px;
line-height: 50px;
background: #f9c;
border:1px dashed #999;
margin:15px;
padding: 0px 10px;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
8-5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用after伪对象清除浮动</title>
<style type="text/css">
.father{
background: #ccc;
border:1px dashed #999;
}
.father:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.box1,.box2,.box3{
height: 50px;
line-height: 50px;
background: #f9c;
border:1px dashed #999;
margin:15px;
padding: 0px 10px;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
8-6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签的定位</title>
<style type="text/css">
body{
margin:0px;padding: 0px; font-size: 18px; font-weight: bold;
}
.father{
margin: 10px auto;
width: 300px;
height: 300px;
padding: 10px;
background: #ccc;
border:1px solid #000;
}
.child01,.child02,.child03{
width: 100px;
height: 50px;
line-height: 50px;
background: #ff0;
border:1px solid #000;
margin: 10px 0px;
text-align: center;
}
.child02{
position: relative;
/*position: absolute;*/
left:150px;
top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="child01">01</div>
<div class="child02">02</div>
<div class="child03">03</div>
</div>
</body>
</html>
8-7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子标签相对于直接父标签定位</title>
<style type="text/css">
.father{
margin: 10px auto;
width: 300px;
height: 300px;
padding: 10px;
background: #ccc;
border:1px solid #000;
position: relative;
}
.child01,.child02,.child03{
width: 100px;
height: 50px;
line-height: 50px;
background: #ff0;
border:1px solid #000;
margin: 10px 0px;
text-align: center;
}
.child02{
position: absolute;
left:150px;
top: 100px;
</style>
</head>
<body>
<div class="father">
<div class="child01">01</div>
<div class="child02">02</div>
<div class="child03">03</div>
</div>
</body>
</html>
8-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overfiow属性</title>
<style type="text/css">
div{
width: 260px;
height: 176px;
background:#eee center center no-repeat;
overflow: visible;
/*overflow: hidden;*/
/*overflow: auto;*/
/*overflow: scroll;*/
}
</style>
</head>
<body>
<div>
作为最近建立独立国家联合体这一局面的结果，我宣布辞去我作为苏维埃社会主义共和国联盟总统的职务。我一直以来坚决支持国家的独立、自主和加盟共和国的主权，但同时我也支持维护政权联合，国家统一。事态发展背离了初衷。即使我不能赞同的解体这个国家，分裂这个政局的政策仍然占了上风。在阿拉木图会议决议之后，我在这个方面的态度仍然没有改变。此外，我确信这一程度的决定应该建立在大众的期待和意愿的基础之上。
</div>
</body>
</html>
8-9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单列布局</title>
<style type="text/css">
body{margin: 0;padding: 0;font-size:24px;text-align: center; }
div{
width: 980px;
margin: 5px auto;
background: #d2ebff;
}
#top{
height: 40px;
}
#nav{height: 60px;}
#banner{height: 200px;}
#content{height: 200px;}
#footer{height: 90px;}
</style>
</head>
<body>
<div id="top">头部</div>
<div id="nav">导航栏</div>
<div id="banner">焦点图</div>
<div id="content">内容</div>
<div id="footer">页面底部</div>
</body>
</html>
8-10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列布局</title>
<style type="text/css">
body{margin: 0;padding: 0;font-size:24px;text-align: center; }
div{
width: 980px;
margin: 5px auto;
background: #d2ebff;
}
#top{
height: 40px;
}
#nav{height: 60px;}
#banner{height: 200px;}
#content{height: 200px;}
.content_left{
width: 350px;
height: 200px;
background-color: #ccc;
float: left;
margin: 0;
}
.content_right{
width: 625px;
height: 200px;
background-color: #ccc;
float: right;
margin: 0;
}
#footer{height: 90px;}
</style>
</head>
<body>
<div id="top">头部</div>
<div id="nav">导航栏</div>
<div id="banner">焦点图</div>
<div id="content">
<div class="content_left">左</div>
<div class="content_right">右</div>
</div>
<div id="footer">页面底部</div>
</body>
</html>
8-11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style type="text/css">
body{margin: 0;padding: 0;font-size:24px;text-align: center; }
div{
width: 980px;
margin: 5px auto;
background: #d2ebff;
}
#top{
height: 40px;
}
#nav{height: 60px;}
#banner{height: 200px;}
#content{height: 200px;}
.content_left{
width: 200px;
height: 200px;
background-color: #ccc;
float: left;
margin: 0;
}
.conten_middle{
width: 570px;
height: 200px;
background-color: #ccc;
float: left;
margin:0 0 0 5px;
}
.content_right{
width: 200px;
height: 200px;
background-color: #ccc;
float: right;
margin: 0;
}
#footer{height: 90px;}
</style>
</head>
<body>
<div id="top">头部</div>
<div id="nav">导航栏</div>
<div id="banner">焦点图</div>
<div id="content">
<div class="content_left">左</div>
<div class="content_middle">中</div>
<div class="content_right">右</div>
</div>
<div id="footer">页面底部</div>
</body>
</html>
8-12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通栏布局</title>
<style type="text/css">
div{
width: 980px;
margin: 5px auto;
background: #d2ebff;
}
#top{
height: 40px;
}
#topbar{
width: 100%;
height: 60px;
background-color: #3cf;
}
.nav{height: 60px;}
#banner{height: 200px;}
#content{height: 200px;}
.inner{height: 90px;}
#footer{
width: 100%;
height: 90px;
background-color:#3cf;
}
</style>
</head>
<body>
<div id="top">头部</div>
<div id="topbar">
<div class="nav">导航栏</div>
</div>
<div id="banner">焦点图</div>
<div id="content">内容</div>
<div id="foot">
<div id="inner">页面底部</div>
</div>
</body>
</html>
