前端笔记-CSS布局使得网页分成3部（头，内容，脚）
生活随笔
收集整理的這篇文章主要介紹了
前端笔记-CSS布局使得网页分成3部（头，内容，脚）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
css代碼如下：
<style>* {margin: 0;padding: 0;}.top {width: 100%;height: 40px;background-color: #2fa8ec;font-size: 20px;line-height: 25px;}.middle {position: absolute;top: 0px;bottom: 40px;width: 100%;/*background-color: yellow;*/font-size: 35px;/*text-align: center;*/}.bottom {position: absolute;bottom: 0;width: 100%;height: 40px;line-height: 40px; /*行高與高度相等，內容垂直居中*//*background-color: chartreuse;*/text-align: center;} </style>應用代碼如下：
<template> <div><div class="middle"><div class="ui container"><div class="ui stackable grid"><div class="six wide column"><xxxxxxxx></xxxxxxxx></div><div class="six wide column"><xxxxxxxx></xxxxxxxx></div><div class="four wide column"><xxxxxxxx></xxxxxxxx></div></div></div></div><div class="bottom"><MainFunctionTool></MainFunctionTool></div> </div> </template>運行截圖如下：
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的前端笔记-CSS布局使得网页分成3部（头，内容，脚）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring Boot笔记-mysql5
- 下一篇： 前端笔记-label标签的for属性