Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 弹性容器的具体实例—PHP九期
Blogger Information
Blog 34
fans 0
comment 0
visits 22384
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
弹性容器的具体实例—PHP九期
曾龙宇
Original
450 people have browsed it

一、使用弹性布局实现手机端界面：

①、设计界面时通常第一步是把标签的原有样式全部清空，最简单粗暴的就是使用* {  margin: 0;  padding: 0;}

②、vh：view-height的缩写，视口高度

③、元素水平垂直居中，justify-content: center;  align-items: center;

④、flex：1，把剩余空间全部分配

* {  margin: 0;  padding: 0;}
a {  text-decoration: none;  color: black;}
body {  height: 100vh;  display: flex;  flex-flow: column nowrap;}
header,footer {  box-sizing: border-box;  height: 50px;  background-color: lightgreen;  display: flex;  justify-content: center;  align-items: center;}
main {  box-sizing: border-box;  flex: 1;}
footer > a {  border-right: 1px solid white;  flex: 1;  display: flex;  justify-content: center;  align-items: center;  font-weight: bold;}
footer > a:last-of-type {  border-right: none;}

blob.png

blob.png


二、使用弹性布局实现圣杯布局：

①、使用order属性可以改变弹性元素在主轴上的排列顺序

* {  margin:0;  padding:0;}
body {  height: 100vh;  display: flex;  flex-flow: column nowrap;}
header,footer {  box-sizing: border-box;  height: 50px;  background-color: lightblue;}
main {  box-sizing: border-box;  flex: 1;  display: flex;}
main > aside {  box-sizing: border-box;  width: 150px;  background-color: lightseagreen;}
main > article {  box-sizing: border-box;  flex: 1;  background-color: skyblue;}
main > aside:first-of-type {  order: -1;}

blob.png

blob.png


三、弹性布局实现登录界面：

* {  margin:0;  padding:0;  /* outline: 1px solid lightgray; */}
body {  box-sizing: border-box; height: 100vh; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; font-weight: lighter;  
color: #444;  background: linear-gradient(to top,lightcyan,white);}
.container {  box-sizing: border-box;  width: 300px;  padding: 20px;  position: relative;  top: -60px;}
.container > h3 {  text-align: center;  margin-bottom: 15px;  font-weight: lighter;}
.container > form {  box-sizing: border-box;  display: flex;  flex-flow: column nowrap;  padding: 10px;  border: 1px solid gray;  border-radius: 10px;  
background: linear-gradient(to right bottom,lightblue,white);}
.container > form:hover {  background: linear-gradient(to left top,lightcyan,white);  box-shadow: 0 0 5px #888;}
.container > form > div {  margin: 10px 0;  display: flex;}
.container > form > div > input {  box-sizing: border-box;  flex: 1;  margin-left: 8px;  padding-left: 5px;  border-radius: 8px;}
.container > form > div > button{flex:1;border-radius: 8px; background-color: lightgreen; color: white; border: none; height: 24px; letter-spacing: 15px;}
.container > form > div > button:hover {  background-color: lightcoral;  box-shadow: 0 0 5px #888;}

blob.png

blob.png


四、flex布局实现网站后台界面：

<!DOCTYPE html>
<html>
<head>  
  <meta charset="UTF-8">  
  <title>网站后台布局</title>  
  <link rel="stylesheet" href="style4.css">
</head>
<body>
  <header>    
    <h1>图书馆后台管理系统</h1>    
    <div class="head">  
      <a href="">系统管理员</a>      
      <a href="">修改密码</a>      
      <a href="">退出系统</a>    
    </div>  
  </header>  
  <main>    
    <nav>      
      <a href="">首页</a>      
      <a href="">图书信息</a>      
      <a href="">借阅管理</a>      
      <a href="">读者管理</a>      
      <a href="">类别管理</a>      
      <a href="">系统管理</a>    
    </nav>    
    <div class="container">      
      <aside>        
        <a href="">新增图书信息</a>        
        <a href="">图书信息管理</a>      
      </aside>      
      <article>        
        <img src="library.png" alt="图书馆" height="690">      
      </article>    
    </div>  
  </main>  
  <footer>Copyright &copy; 图书馆管理系统  </footer>
</body>
</html>
* {  margin: 0;  padding: 0;}
a {  text-decoration: none;  color: black;}
body {  height: 100%;  display: flex;  flex-flow: column nowrap;}
header,footer {  height: 60px;  background-color: lightgray;  display: flex;}
header > h1 {  margin: 10px 0 10px 50px;}
header > .head {  flex: 1;  display: flex;  justify-content: flex-end;  align-items: center;  margin-right: 30px;}
header > .head > a {  box-sizing: border-box;  width: 100px;}
main {  flex: 1;  display: flex;  flex-flow: column nowrap;}
main > nav {  box-sizing: border-box;  height: 60px;  display: flex;  border-bottom: 1px solid red;  justify-content: center;}
main > nav > a {  text-align: center;  font-weight: bold;  width: 100px;  background-color: lightgreen;  padding: 10px 5px;  margin: 10px 10px;  border-radius: 10px;}
main > .content {  flex: 1;  display: flex;}
main > .content > aside {  display: flex;  flex-flow: column nowrap;  background-color: lightblue;  width: 200px;}
main > .content > aside > a {  box-sizing: border-box;  display: flex;  justify-content: center;  margin-top: 20px;
}
main > .content > article {  flex: 1;  display: flex;  justify-content: center;}
footer {  justify-content: center;  align-items: center;}

blob.png


Correction status：qualified

Teacher's comments：后台首页写得好
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