这是一个关于网页布局的示例，展示了使用HTML和CSS创建包含header、article和footer的页面结构。页面采用了响应式设计，footer部分使用了flexbox布局，四个span元素分别设置了不同的背景颜色，代表不同的导航选项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
height: 600px;
/* border: 1px solid red; */
margin: 50px auto;
}
.wrap header{
height: 60px;
background-color: #cccccc;
text-align: center;
line-height: 60px;
}
.wrap article{
height: 465px;
background-color: #ffc0cb;
text-align: center;
padding-top: 15px;
}
.wrap footer{
display: flex;
height: 60px;
line-height: 60px;
text-align: center;
}
.wrap span:nth-child(1){
background-color: #ee82ee;
flex: 1;
}
.wrap span:nth-child(2){
background-color: #ffd700;
flex: 1;
}
.wrap span:nth-child(3){
background-color: #9acd32;
flex: 1;
}
.wrap span:nth-child(4){
background-color: #87ceeb;
flex: 1;
}
</style>
</head>
<body>
<div class="wrap">
<header>header</header>
<article>article</article>
<footer>
<span>首页</span>
<span>关于我们</span>
<span>联系我们</span>
<span>联系我们</span>
</footer>
</div>
</body>
</html>
693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
