<html>
<link rel="stylesheet" href="学习布局.css" type="text/css" />
<body>
<div class="头部">
<h1>LOGO</h1>
<div class="右上角导航">
<a href="http://www.w3school.com.cn">W3Sschool</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a></div>
</div>
<div class="中间的Banner"></div>
<div class="右下角轮显">
<div class="轮显1">1</div>
<div class="轮显2">2</div>
<div class="轮显3">3</div>
<div class="轮显4">4</div>
</div>
<div class="主导航">
<div class="导航菜单">
<div class="nav-home">HOME</div>
<div class="nav-profile">PROFILE</div>
<div class="nav-about">ABOUT</div>
</div>
</div>
<div class="内容区域"></div>
<div class="文本框">
<div class="Content">This is Content1</div>
<div class="Content">Maybe Content2</div>
<div class="Content">Content3</div>
</div>
<div class="文本框">
<div class="Content">Content4</div>
<div class="Content">Content5</div>
<div class="Content">Content6</div>
<div class="Content">Content7</div>
</div>
<div class="文本框">
<div class="Content">Content8</div>
<div class="Content">Content9</div>
<div class="Content">Content10</div>
</div>
</div>
<div class="底部">
<p>© 2018 ife.baidu.com<p>
</div>
</body>
</html>
css:
.头部{
background:#444444;
height:70px;
text-indent:180px;
color:white;
}
.中间的Banner{
height:500px;
background:#66CC33;
}
h1{
font-size:20px;
line-height:70px;
}
.主导航{
width: 100%;
height: 60px;
border-bottom: 1px solid #CCC;
}.内容区域{
margin: 10px auto;
width: 960px;
}
.文本框{
display: flex;
}
.Content {
flex: 1 1 auto;
box-sizing: border-box;
margin: 5px;
min-width: 200px;
height: 160px;
line-height: 160px;
text-align: center;
border: 1px solid #DDD;
box-shadow: 0 0 5px #DDD;
}
.底部{
box-sizing: border-box;
padding-top: 20px;
width: 100%;
height: 120px;
color: #fff;
text-align: center;
background-color: #888888;
}
.右上角导航{
position:absolute;
right:180px;
top:20px;
font-size:10px;
}
.右上角导航 a{ color:white;font-size:10px;}
.右上角导航 a:hover{ color:red;}
.轮显1,.轮显2,.轮显3,.轮显4{
position: absolute;
bottom: -210px;
width: 20px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #999999;
background-color: #EEEEEE;
opacity: 0.8;
}.轮显4{
right: 200px;
}
.轮显3{
right: 230px;
}
.轮显2{
right: 260px;
}
.轮显1{
right: 290px;
}
.导航菜单 {
margin: 0 auto;
width: 960px;
height: 60px;
}.nav-home,
.nav-profile,
.nav-about {
float: left;
box-sizing: border-box;
margin-top: 16px;
width: 100px;
height: 45px;
text-align: center;
line-height: 45px;
border: 1px solid #CCC;
border-bottom: none;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-color: #fff;
}
.nav-profile,
.nav-about {
background-color: #DDD;
}
