【Flex布局案例】使用Flex布局搭建静态页面
最近整理自己零散的知识点，把以前刚学写的小demo放上来，这个页面是自己刚学flex布局写的页面。
html部分：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>华为-关于我们title>
<link rel="stylesheet" href="css/about.css" type="text/css"/>
head>
<body>
<div id="header">
<div class="top">
<div class="top_login">
<a>Welcome to HuaWei shopcitya>
<a href="#">登录/注册a>
div>
div>
<div class="nav">
<div class="logo"><img src="img/logo.jpg">div>
<div class="nav_content">
<div class="list"><a href="#">首页a>div>
<div class="list"><a href="#">新闻中心a>div>
<div class="list"><a href="#">品牌故事a>div>
<div class="list"><a href="#">销售中心a>div>
<div class="list"><a href="#">科技研发a>div>
<div class="list"><a href="#">关于我们a>div>
div>
div>
div>
<div class="banner"><img src="img/banner1.jpg"/>div>
<div id="main">
<div class="company">
<div class="about_title">关于我们div>
<div class="local">
<div class="com_local2"><a>ABOUT USa>div>
<div class="com_local"><a>您的当前位置:首页 > 关于我们a>div>
div>
<hr>
<div class="local">
<div class="com_local3">div>
<div class="com_local3"><a>Location:collections><span class="mou">about usspan>a>div>
div>
<div class="com_linian">
<div><H3>"以客户为中心,H3>div>
<div class="bottom"><H3>以畚斗者为本"H3>div>
div>
<div class="com_jianjie">
<div class="com_img"><img src="img/company.jpg"/>div>
<div class="produce">
<h3>集团介绍 / GROUP TO INTPRODECEh3>
<P> 华为技术有限公司是一家生产销售通信设备的民营通信科技公司，于1987年正式注册成立，总部位于中国广东省深圳市龙岗区坂田华为基地。
华为是全球领先的信息与通信技术（ICT）解决方案供应商，专注于ICT领域，坚持稳健经营、持续创新、开放合作，在电信运营商、企业、
终端和云计算等领域构筑了端到端的解决方案优势，为运营商客户、企业客户和消费者提供有竞争力的ICT解决方案、产品和服务，并致力
于实现未来信息社会、构建更美好的全联接世界
P>
div>
div>
div>
<div class="com_about">
<div><h3>华为科技--"构造万物互联的智能世界"h3>div>
<div class="more"><a href="#">更多资讯>>a>div>
div>
<hr>
<div class="com_news">
<div class="news_content">
<div><a href="#"> 我们为世界带来了什么?a>div>
<div><a href="#"> 为客户创造价值a>div>
<div><a href="#"> 我们的企业核心a>div>
<div><a href="#"> 我们的社会责任a>div>
<div><a href="#">大企业大梦想a>div>
<div><a href="#"> 为奋斗者提供舞台a>div>
div>
<div class="news_img"><img src="img/new.jpg"/>div>
<div class="news_content">
<div><a href="#"> 我们为在坚持什么?a>div>
<div><a href="#"> 无处不在的通讯"宽带"a>div>
<div><a href="#"> 我们的经营理念a>div>
<div><a href="#"> 为客户创造价值a>div>
<div><a href="#"> 我们的科技创新a>div>
<div><a href="#"> 我们的5G技术a>div>
div>
<div class="news_img"><img src="img/new1.jpg"/>div>
div>
<div class="youshi">
<div class="text_img1">
<div><img src="img/ppai.jpg"/>div>
<div><img src="img/server.jpg"/>div>
<div><img src="img/tech.jpg"/>div>
div>
<div class="text">
<div class="text1">
<h4>品牌优势h4>
<p>公司实力雄厚，技术领先，手机用料讲究质量上国产首选。做工精细:手机品质管控到位，
做工精细,华为有着通讯设备界最为全面的产品线，能提供业界最完整的端到端的解决方案...p>
div>
<div class="text1">
<h4>服务优势h4>
<p>拥有强大的产品线，具备提供完善的解决方案能力,多年的发展，已经形成完善的售后网络，
销售渠道多样化:线上和线下都有齐全的销售网络，用户购买方便快捷.p>
div>
<div class="text1">
<h4>技术优势h4>
<p>从电信设备到企业产品，拥有多年技术积累和丰富经验拥有强大的产品研发团队和高效的产
品研发效率。有自主的软硬件平台，支撑华为产品设备持续领先.p>
div>
div>
<div class="text_img"><img src="img/adva.jpg"/>div>
div>
div>
<div class="relative">
<div class="relative1">
<div class="toptitle"><h3>相关资讯LITERATUREh3>div>
<div class="cons">
<div rel_con>
<div><a href="#"><h5>华为新品P30发布会h5>a>div>
<div><a href="#"><h5>2019-中国芯开始h5>a>div>
<div><a href="#"><h5>什么是华为云?h5>a>div>
div>
<div rel_con>
<div><a href="#"><h5>5G时代在华为h5>a>div>
<div><a href="#"><h5>#华为燃了h5>a>div>
<div><a href="#"><h5>#MATE系列h5>a>div>
div>
<div rel_con>
<div><a href="#"><h5>5G智慧物流园区建设战略协议h5>a>div>
<div><a href="#"><h5>人工智能校国创新挑战大赛h5>a>div>
<div><a href="#"><h5>NOVA系列h5>a>div>
div>
<div rel_con>
<div><a href="#"><h5>华为数字时代h5>a>div>
<div><a href="#"><h5>5G在中国h5>a>div>
<div><a href="#"><h5>5G智慧助力中国h5>a>div>
div>
<div rel_con>
<div><a href="#"><h5>华为之AI智能时代h5>a>div>
<div><a href="#"><h5>华为智能计算始h5>a>div>
<div><a href="#"><h5>昂首挺胸走向世界h5>a>div>
div>
div>
div>
div>
div>
<div id="footer">
<div class="foot_con">
<div><a href="#"> 新闻资讯 a>div>
<div><a href="#"> | a>div>
<div><a href="#"> 新品发布 a>div>
<div><a href="#"> | a>div>
<div><a href="#"> 联系我们a>div>
<div><a href="#"> | a>div>
<div><a href="#"> 相关法律 a>div>
<div><a href="#">| a>div>
<div><a href="#"> 售后服务a>div>
<div><a href="#"> HUAWEALL RIGHTS RESERVED.(停ICP备1000000 a>div>
div>
div>
body>
html>
css部分：
*{
margin: 0px;
padding: 0px;
}
body{
display: flex;
width:100%;
flex-direction: column;
align-items: center;
}
#header{
display:flex;
flex-direction: column;
width: 100%;
}
.top{
height: 30px;
width:100%;
display: flex;
justify-content: center;
background-color: black;
}
.top_login{
width: 1040px;
height: 30px;
display: flex;
justify-content:space-between;
}
.top_login a{
color: white;
line-height: 30px;
text-decoration: none;
}
.nav{
display: flex;
width: 100%;
justify-content: center;
}
.nav .nav_content {
display: flex;
height: 60px;
width:960px;
align-items: center;
justify-content:space-between;
}
.nav .nav_content .list{
justify-content: space-around;
margin-left: 40px;
}
.nav .nav_content .list a{
color: black;
font-family: "思源黑体";
font-size: 18px;
font-weight: bold;
text-decoration: none;
}
.nav .logo{
align-items: center;
display: flex;
margin-right: 40px;
}
.nav .nav_content .list a:hover{
display: block;
text-align: center;
color:red;
}
.banner{
width: 100%;
height: 500px;
background-color: red;
}
.banner img{
width: 100%;
height: 100%;
}
#main .company{
width: 1040px;
height: 420px;
display:flex;
margin: 20px auto;
flex-direction: column;
}
#main .company .about_title {
color: black;
font-family: "思源黑体";
font-size: 18px;
font-weight: bold;
text-decoration: none;
}
#main .company .local{
display:flex;
justify-content:space-between;
}
#main .company .com_local2{
margin-left: 40px;
color: red;
font-family: "思源黑体";
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
#main .company .com_local3{
justify-content:space-between;
align-items:flex-end;
}
#main .company .com_linian{
font-family: "思源黑体";
font-size: 16px;
flex-direction: column;
text-decoration: none;
}
#main .company .com_linian .bottom{
margin-left:40px;
}
#main .company .com_jianjie{
flex-direction: row;
display: flex;
margin: auto 10px;
align-content: space-between;
}
#main .company .com_jianjie .produce{
display: flex;
justify-content:space-around;
flex-direction: column;
align-content: flex-end;
}
.com_img{
margin: 20px 40px 0px 0px
}
.company .mou{
color: red;
}
#main .com_about{
display:flex;
margin-top: 40px;
width: 1040px;
justify-content:space-between;
flex-direction:row;
}
#main .com_about .more{
color: red;
}
#main .com_news{
display: flex;
flex-direction: row;
margin: 30px auto;
justify-content:space-between;
}
#main .news_content{
display:flex;
flex-direction: column;
justify-content: space-between;
}
#main .news_content a:hover{
background-color: red;
color: white;
}
#main .news_content a{
text-decoration: none;
color: black;
font-weight: bold;
}
.news_content > div{
background-image:url(../img/list.jpg) center no-repeat;
}
.youshi{
display: flex;
border: 1px solid black;
width: 1040px;
justify-content: space-between;
}
.youshi .text_img1{
flex-direction: column;
height: 400px;
display: flex;
margin-left: 20px;
justify-content: space-around;
}
.youshi .text_img1 div{
justify-content: space-around;
}
.youshi .text{
flex-direction: column;
display: flex;
width: 600px;
justify-content: space-around;
}
.youshi .text .text1{
flex-direction:row;
}
.relative{
display: flex;
height: 200px;
width: 100%;
align-items: center;
flex-direction: column;
background-color: #1e1e1e;
}
.relative1{
display: flex;
height: 200px;
width:1040px;
flex-direction: column;
}
.relative .toptitle {
display: flex;
width: 1040px;
justify-content: center;
}
.relative .toptitle h3{
width: 200px;
height: 60px;
color: white;
margin-top: 50px;
justify-content: center;
}
.relative .cons{
display: flex;
flex-direction: row;
justify-content: space-between;
}
h5{
color: white;
}
.relative .cons .rel_con{
flex-direction: column;
height: 140px;
display: flex;
justify-content: space-between;
}
a{
text-decoration: none;
}
#footer{
width: 100%;
display: flex;
background-color: black;
justify-content: center;
}
#footer div{
height: 30px;
align-items: center;
flex-direction:row;
}
#footer .foot_con{
width: 1040px;
display: flex;
align-content: center;
justify-content: space-between;
}
#footer div a{
text-decoration: none;
color: white;
}
源码已上传到github