简单的pc端布局页面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>pc端布局</title><style>*{ margin: 0; padding: 0; box-sizing: border-box;}a{ text-decoration: none; color: #333;}body{ display: flex; min-width: 40em; flex-flow: column wrap;}header,footer{ height: 60px; border:1px solid #333; display: flex; background: #333; color: #fff;}header{ align-items: center;}header a{ flex:0 1 8em; color: #fff; text-align: center;}header a:first-of-type{ margin-right: 4em;}header a:last-of-type{ margin-left: auto;}header a:hover:not(:first-of-type){ color: skyblue;}footer{ text-align: center; flex-flow: column nowrap; justify-content: space-evenly;}.container{ display: flex; min-height: 32em; justify-content: center;}.container aside,.container main{ background: #ededed; text-align: center; }.container aside{ flex: 0 0 10em;margin: 0.8em;}.container main{ flex: 0 0 36em; margin: 0.8em;}</style></head><body><header><a href="">Logo</a><a href="">首页</a><a href="">关于我们</a><a href="">产品中心</a><a href="">新闻资讯</a><a href="">联系我们</a><a href="">登录</a></header><div class="container"><aside>左边栏</aside><main>主体内容</main><aside>右边栏</aside></div><footer><p>练习学员 版权所有@Copyright | 备案号：鲁ICP备...号</p><p>山东省东营市东营区淄博路 联系电话：0546-000-0000</p></footer></html>
本文运用flex布局进行网站布局
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
采用 Flex 布局的元素，称为 Flex 容器，简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目，简称”项目”。
容器属性
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | flex-flow |
主轴方向与换行方式 |
| 2 | justify-content |
项目在主轴上的对齐方式 |
| 3 | align-items |
项目在交叉轴上的对齐方式 |
| 4 | align-content |
项目在多容器中的对齐方式 |
项目属性
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | flex |
项目的缩放比例与基准宽度 |
| 2 | align-self |
单个项目在交叉轴上的对齐方式 |
| 3 | order |
项目在主轴上的排列顺序 |
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
