简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > pc端布局的页面
Blogger Information
Blog 18
fans 1
comment 0
visits 17327
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
pc端布局的页面
α清尘
Original
780 people have browsed it

简单的pc端布局页面

代码部分：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>pc端布局</title>
  7.     <style>
  8.         *{ margin: 0; padding: 0; box-sizing: border-box;}
  9.         a{ text-decoration: none; color: #333;}
  10.         body{ display: flex; min-width: 40em; flex-flow: column wrap;}
  11.         header,footer{ height: 60px; border:1px solid #333; display: flex; background: #333; color: #fff;}
  12.         header{ align-items: center;}
  13.         header a{  flex:0 1 8em; color: #fff; text-align: center;}
  14.         header a:first-of-type{ margin-right: 4em;}
  15.         header a:last-of-type{ margin-left: auto;}
  16.         header a:hover:not(:first-of-type){ color: skyblue;}
  17.         footer{ text-align: center; flex-flow: column nowrap; justify-content: space-evenly;}    
  18.         .container{ display: flex; min-height: 32em; justify-content: center;}    
  19.         .container aside,.container main{  background: #ededed; text-align: center;  }
  20.         .container aside{ flex: 0 0 10em;margin: 0.8em;}
  21.         .container main{ flex: 0 0 36em; margin: 0.8em;}
  22.     </style>
  23. </head>
  24. <body>
  25.     <header>
  26.         <a href="">Logo</a>
  27.         <a href="">首页</a>
  28.         <a href="">关于我们</a>
  29.         <a href="">产品中心</a>
  30.         <a href="">新闻资讯</a>
  31.         <a href="">联系我们</a>
  32.         <a href="">登录</a>
  34.     </header>
  36.     <div class="container">
  37.         <aside>左边栏</aside>
  38.         <main>主体内容</main>
  39.         <aside>右边栏</aside>
  40.     </div>
  42.     <footer>
  43.         <p>练习学员 版权所有@Copyright  &nbsp;| 备案号：鲁ICP备...号</p>
  44.         <p>山东省东营市东营区淄博路  联系电话：0546-000-0000</p>
  45.     </footer>
  46. </html>

效果图展示

本文运用flex布局进行网站布局

flex布局是什么？

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

flex的基本概念

采用 Flex 布局的元素，称为 Flex 容器，简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目，简称”项目”。

flex元素的常用属性

容器属性

序号 属性 描述
1 flex-flow 主轴方向与换行方式
2 justify-content 项目在主轴上的对齐方式
3 align-items 项目在交叉轴上的对齐方式
4 align-content 项目在多容器中的对齐方式

项目属性

序号 属性 描述
1 flex 项目的缩放比例与基准宽度
2 align-self 单个项目在交叉轴上的对齐方式
3 order 项目在主轴上的排列顺序
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！