html三段式布局,移动端 三段式布局 (flex方式)

分享一种平时用的三段式布局(flex)

主要思路是  上中下    header&footer 给高度  main 占其余部分

html 部分

css 部分

.wrap{

display: flex;  //弹性盒子

flex-direction: column;  //垂直排列

height: 100%;    //容器盒子要有高度

.header{

height: .48rem;

}

.main{

flex: 1;    //占剩余的部分

}

.footer{

height: .48rem;

}

}

CSS实现三栏布局(5种)

常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...

假设高度已知,请写出三栏布局,其中左栏、右栏各为300px,中间自适应的五种方法

假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应的五种方法 HTML CSS 页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应

【FPGA篇章四】FPGA状态机:三段式以及书写方法

欢迎大家关注我的微信公众账号,支持程序媛写出更多优秀的文章 状态机是fpga设计中极其重要的一种技巧,状态机通过不同的状态迁移来完成特定的逻辑操作,掌握状态机的写法可以使fpga的开发事半功倍. 状态 ...

css-前端实现左中右三栏布局的常用方法&

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【优质项目推荐】 1、项目代码均经过严格本地测试,运行OK,确保功能稳定后才上传平台。可放心下载并立即投入使用,若遇到任何使用问题,随时欢迎私信反馈与沟通,博主会第一时间回复。 2、项目适用于计算机相关专业(如计科、信息安全、数据科学、人工智能、通信、物联网、自动化、电子信息等)的在校学生、专业教师,或企业员工,小白入门等都适用。 3、该项目不仅具有很高的学习借鉴价值,对于初学者来说,也是入门进阶的绝佳选择;当然也可以直接用于 毕设、课设、期末大作业或项目初期立项演示等。 3、开放创新:如果您有一定基础,且热爱探索钻研,可以在此代码基础上二次开发,进行修改、扩展,创造出属于自己的独特应用。 欢迎下载使用优质资源!欢迎借鉴使用,并欢迎学习交流,共同探索编程的无穷魅力! 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip
下面是一个简单的微信小程序三段式布局代码示例: ```xml <view class="container"> <view class="header"> <text class="title">这是页眉</text> <navigator class="nav" url="">首页</navigator> <navigator class="nav" url="">关于我们</navigator> <navigator class="nav" url="">联系我们</navigator> </view> <view class="main"> <text class="subtitle">这是主体</text> <text class="content">在这里添加网站的主要内容。</text> </view> <view class="footer"> <text class="copyright"> 版权 © 2021 我的网站 </text> </view> </view> <style> /* 设置容器样式 */ .container { display: flex; flex-direction: column; height: 100vh; background-color: #f0f0f0; } /* 设置页眉样式 */ .header { background-color: #333; color: white; padding: 20rpx; text-align: center; } /* 设置导航链接样式 */ .nav { color: white; margin-left: 20rpx; font-size: 28rpx; text-decoration: none; } /* 设置主体样式 */ .main { flex: 1; padding: 20rpx; text-align: center; } /* 设置页脚样式 */ .footer { background-color: #333; color: white; padding: 20rpx; text-align: center; } /* 设置标题样式 */ .title { font-size: 36rpx; font-weight: bold; } /* 设置副标题样式 */ .subtitle { font-size: 32rpx; font-weight: bold; } /* 设置内容样式 */ .content { font-size: 28rpx; line-height: 40rpx; } /* 设置版权信息样式 */ .copyright { font-size: 24rpx; } </style> ``` 在这个示例中,我们使用了`<view>`标签来定义微信小程序中的三段式布局。然后使用CSS设置它们的样式,包括背景色、字体颜色、内边距、边距和文本对齐方式等。同时,我们还使用了Flex布局来确保布局在不同的设备上都能正常显示。我们使用`flex-direction`属性将容器的主轴方向设置为垂直方向,同时使用`flex: 1`将主体部分的高度设置为剩余空间的100%。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值