CSS:display:flex完整网页练习

最新推荐文章于 2024-07-16 17:16:30 发布

Tree_Root.

最新推荐文章于 2024-07-16 17:16:30 发布

阅读量717

点赞数 2

本文链接：https://blog.csdn.net/xugenyin/article/details/121866987

版权

display:flex 响应式设计 CSS布局网页设计 HTML

关键词由CSDN通过智能技术生成

上一个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">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    首页 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    企业简介&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    新闻动态&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    产品中心&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                    人才招聘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    联系方式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </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>

有错的地方还请大佬们下方留言