HTML5
发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5使用伸缩布局实现网页的自适应，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE html>
<html lang="en">
<head>
<
Meta name="viewport" content="width=device-width,initial-scale=1.0">
<
Meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
padding: 0;
margin: 0;
}
width: 100%;
display: flex;
}
flex: 1;
}
width: 100%;
}
width: 100%;
padding: 0 10px;
}
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: #723c4
c;
}
flex: 1;
}
flex: 2;
flex-wrap: wrap;
display: flex;
}
display: block;
width: 50%;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
line-height: 50px;
color: #fff;
text-decoration: none;
text-align: center;
}
main > .item >.right >a :nth-last-of-type(-n+2)
{
border-bottom: none;
}
display: flex;
}
}
}
font-size: 13px;
}
display: flex;
border-top: 1px solid #cc
c;
border-bottom: 1px solid #cc
c;
}
flex: 1;
line-height: 30px;
text-align: center;
color: #888;
text-decoration: none;
}
text-align: center;
line-height: 25px;
}
text-align: center;
}
</style>
</head>
<body>
<div class="contai">
<header>
<a href="">
<img src="./images/test1.jpg" >
</a>
</header>
<main>
<section class="item">
<div class="left"></div>
<div class="right">
<a href="">海外酒店</a>
<a href="">团购</a>
<a href="">特惠酒店</a>
<a href="">客栈公寓</a>
</div>
</section>
<section class="item">
<div class="left"></div>
<div class="right">
<a href="">海外酒店</a>
<a href="">团购</a>
<a href="">特惠酒店</a>
<a href="">客栈公寓</a>
</div>
</section>
<section class="item">
<div class="left"></div>
<div class="right">
<a href="">海外酒店</a>
<a href="">团购</a>
<a href="">特惠酒店</a>
<a href="">客栈公寓</a>
</div>
</section>
<section class="item">
<div class="left"></div>
<div class="right">
<a href="">海外酒店</a>
<a href="">团购</a>
<a href="">特惠酒店</a>
<a href="">客栈公寓</a>
</div>
</section>
<section class="extra">
<a href="">
<img src="./images/she.jpg" >
</a>
<a href="">
<img src="./images/telangpu.jpg" >
</a>
</section>
</main>
<footer>
<nav>
<a href="">电话预定</a>
<a href="">下载客户端</a>
<a href="">我的</a>
</nav>
<p class="link">
<a href="">ENGLISH</a>
<a href="">电话地址</a>
</p>
<p class="copyRight">©2015 携程旅行</p>
</footer>
</div>
</body>
</html>
大佬总结
以上是大佬教程为你收集整理的HTML5使用伸缩布局实现网页的自适应全部内容，希望文章能够帮你解决HTML5使用伸缩布局实现网页的自适应所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
