在你的页脚中,当屏幕宽度小于700px时,你可以通过以下步骤将社交图标拆分为两行:
以下是一个示例代码片段,演示如何使用媒体查询和flexbox布局将社交图标拆分为两行:
<!DOCTYPE html>
<html>
<head>
<style>
.social-icons {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.social-icons .icon {
width: 50px;
height: 50px;
margin: 10px;
background-color: #ccc;
}
@media (max-width: 700px) {
.social-icons {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<div class="social-icons">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
</body>
</html>
在这个示例中,社交图标被包含在一个class为"social-icons"的div容器中。每个图标都被包含在一个class为"icon"的div容器中。通过媒体查询,当屏幕宽度小于700px时,社交图标会以垂直方向排列。
请注意,这只是一个示例,你可以根据你的具体需求和设计来调整样式和布局。另外,腾讯云相关产品和产品介绍链接地址请参考腾讯云官方网站。
领取专属 10元无门槛券
手把手带您无忧上云