61,112
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
潇湘忆梦 2019-06-14
- 打赏
- 举报
我这种布局只是为了快，你可以再加工的，或者把header, section, footer, aside, nav标签都换成div标签，在div上加class文件也是可以
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
布局
</title>
<style>
header, section, footer, aside, nav{
display: block;
}
header {
background-color: #808080;
color: #ffffff;
text-align: center;
padding: 5px;
}
nav {
line-height: 30px;
background-color: #eeeeee;
min-height: 500px;
width: 13%;
float: left;
padding: 1%;
}
section {
width: 68%;
float: left;
padding: 1%;
}
aside {
background-color: #eeeeee;
min-height: 500px;
width: 13%;
float: left;
padding: 1%;
}
footer {
background-color: #808080;
color: #ffffff;
clear: both;
text-align: center;
padding: 5px;
height: 60px;
line-height: 60px;
}
.head {
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<header>
<div class="head"><span>网站Logo+导航栏</span></div>
</header>
<nav>
导航1<br>
导航2<br>
</nav>
<section>
<span>
网站主要内容
</span>
</section>
<aside>
快速链接
</aside>
<footer>
Copyright
</footer>
</body>
</html>
葉幺 2019-06-14
- 打赏
- 举报
浮动和flex
葉幺 2019-06-14
- 打赏
- 举报
先分成上中下三个div,再在中间的分成左中右三个div。宽高自己定，是否用浮动还是file都可以实现
