HTML5使用伸缩布局实现网页的自适应

最新推荐文章于 2025-10-27 15:00:00 发布

转载最新推荐文章于 2025-10-27 15:00:00 发布 · 714 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/liuhp/p/9704154.html

本文介绍了一个使用Flex布局的网页设计实例，详细展示了如何通过CSS的Flexbox特性来实现响应式设计，包括header、main和footer的布局技巧。

<!DOCTYPE html>

<head>

<title>flex弹性布局</title>

<style>

padding: 0;

margin: 0;

}

header{

width: 100%;

display: flex;

}

header > a{

flex: 1;

}

header > a >img{

width: 100%;

}

main{

width: 100%;

padding: 0 10px;

box-sizing: border-box;

}

main > .item{

width: 100%;

height: 100px;

background-color: #57c3ae;

border-radius: 10px;

margin-top: 10px;

display: flex;

}

main > .item:nth-last-of-type(2){

background-color: #3c7267;

}

main > .item:nth-last-of-type(3){

background-color: #332f38;

}

main > .item:nth-last-of-type(4){

background-color: #723c4c;

}

main > .item >.left{

flex: 1;

}

main > .item >.right{

flex: 2;

flex-wrap: wrap;

display: flex;

}

main > .item >.right >a{

display: block;

width: 50%;

border-left: 1px solid #fff;

border-bottom: 1px solid #fff;

box-sizing: border-box;

line-height: 50px;

color: #fff;

text-decoration: none;

text-align: center;

}

main > .item >.right >a :nth-last-of-type(-n+2){

border-bottom: none;

}

main >.extra{

width:100%;

display: flex;

}

main >.extra >a {

flex:1;

}

main >.extra >a >img {

width:100%;

}

footer{

width:100%;

font-size: 13px;

}

footer > nav{

width:100%;

display: flex;

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

}

footer > nav > a{

flex: 1;

line-height: 30px;

text-align: center;

color: #888;

text-decoration: none;

}

footer > .link{

text-align: center;

line-height: 25px;

}

footer > .copyRight{

text-align: center;

}

</style>

</head>

<body>

</a>

</header>

<main>

</div>

</section>

</div>

</section>

</div>

</section>

</div>

</section>

</a>

</a>

</section>

</main>

<nav>

<a href="">下载客户端</a>

</nav>

<a href="">ENGLISH</a>

</p>

</footer>

</div>

</body>

</html>

转载于:https://www.cnblogs.com/liuhp/p/9704154.html