CSS:display:flex完整网页练习
秦伯寅
上一个blog详细讲解了display:flex各种属性这一次让我们实战一下！
全局采用DIV+外联CSS
让我们看看display:flex的效果吧！
display:flex演示
不说了，展示！上代码
(图片资源：https://xuxian.fun/public/image.zip 自行获取导入)
大佬别打我小服务器，跪谢！
！！！！！！！！！！！！！！！！！！！！！！！！！！
CSS：
.logoPic, .logoText,.linePic,.right{
width: 100%;
/* body右部分占满空间 使pic平均分布 */
}
.products{
display: inline-block;
/* display: inline-block
将保留上下外边距/内边可进行修改
在元素之后不添加换行符，因此该元素可以位于其他元素旁边。*/
/* 消除上方间隙 */
}
.body{
display: flex;
flex-direction: row;
/* 设置body为flex box */
/* 它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间 */
flex-direction: row;
}
.left{
float: left;
}
.pt{
color: white;
background: url(./images/1.jpg);
text-align-last: justify;
/* 使用text-align:justify，让内容两端对齐*/
margin-bottom: 0;
}
.text{
margin: 0px;
padding: 0px;
}
.left,.right{
display:inline-block;
/* 将 left与right强制成一行 */
/* inline：指定对象为内联元素。
block：指定对象为块元素。 */
}
.right{
width: 100%;
}
.r1,.r2, .r3 ,.r4 {
float: left;
margin-left: 50px;
}
.r5 ,.r6 , .r7,.r8{
float: left;
margin-left: 50px;
}
.footer{
background-color: gray;
text-align: center;
}
.pictop,.bottom{
display: flex;
flex-direction: row;
/* flex容器规则以布局左端为起点 */
justify-content: space-evenly;
/* space-evenly：
每个项目两侧间隔相等，项目之间间隔比项目与边框的间隔相等 */
margin-bottom: 25px;
}
HTML代码：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<title>display:flex</title>
</head>
<body>
<!-- 整体 -->
<div class="myhtml">
<div class="logo" >
<img class="logoPic" src="./images/3.jpg" alt="">
</div>
<div class="head">
<div class="text">
<p class="pt">
首页
企业简介
新闻动态
产品中心
人才招聘
联系方式
</p>
<img class="logoText" src="./images/2.jpg" alt="">
</div>
</div>
<div class="body">
<div class="left">
<div class="products">
<br>
<img src="./images/13.gif" alt="">
</div>
<div class="name">
典型工程<br/>
工程设备<br/>
民用建筑<br/>
建设监理<br/>
海外工程<br>
</div>
<div class="leaveMessage">
<img src="./images/2.gif" alt="">
</div>
<div class="human">
<img src="./images/3.gif" alt="">
</div>
<div class="adv">
<img src="./images/4.gif" alt="">
</div>
</div>
<div class="right">
<div class="top">
<div class="local">
当前位置：产品中心
<div class="localPic">
<img class="linePic" src="./images/8.gif" alt="">
</div>
</div>
<br/>
<div class="pictop">
<img class="p1" src="./images/9.jpg" alt="">
<img class="p2" src="./images/16.jpg" alt="">
<img class="p3" src="./images/15.jpg" alt="">
<img class="p4" src="./images/14.jpg" alt="">
</div>
<div class="bottom">
<img class="p5" src="./images/13.jpg" alt="">
<img class="p6" src="./images/12.jpg" alt="">
<img class="p7" src="./images/11.jpg" alt="">
<img class="p8" src="./images/10.jpg" alt="">
</div>
</div>
<div class="footer">
<p>版权所有：徐州豪冉工程有限公司<br>地址：徐州市建国路233号恒都大厦2003室</p>
</div>
</div>
</div>
</body>
</html>
有错的地方还请大佬们下方留言
类似资料：