【Flex布局案例】使用Flex布局搭建静态页面

最新推荐文章于 2024-06-17 08:45:14 发布
最新推荐文章于 2024-06-17 08:45:14 发布
阅读量1.5k 收藏 18
点赞数 4
分类专栏： 前端 文章标签： flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43853746/article/details/112134175
版权

最近整理自己零散的知识点，把以前刚学写的小demo放上来，这个页面是自己刚学flex布局写的页面。

在这里插入图片描述
html部分：

<!DOCTYPE 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 shopcity</a>
            <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 US</a></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 us</span></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 INTPRODECE</h3>
                <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>相关资讯LITERATURE</h3></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

Ly_cat
关注
  • 4
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用flex布局的前端静态网页.zip
10-21
使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip使用flex布局的前端静态网页.zip
移动web开发实例flex布局案例源码
02-16
本实例聚焦于使用Flex布局进行移动Web开发，通过具体的源码分析，我们可以深入理解并掌握这一强大的CSS布局模式。 1. Flex布局基础： Flex布局允许开发者轻松地调整元素的大小和位置，以适应不同屏幕尺寸和设备...
小程序之首页搭建——Flex布局
m0_62019369的博客
12-26 1214
布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性1) Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。2) 任何一个容器都可以指定为Flex布局。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
Flex 布局：从零到一的实战指南
最新发布
妍思码匠的博客
06-17 810
通过这些小例子，我们可以看到 CSS Flex 布局在实际应用中的强大功能。无论是布局控制、方向控制还是对齐与分布，Flex 都能提供简洁而有效的解决方案。同时，结合媒体查询，我们可以轻松地创建出适应不同屏幕尺寸的响应式网站。随着你对 Flex 布局的深入了解，你将能够更加灵活地运用它，创造出既美观又实用的网页设计。
4.（css3布局）使用flex布局携程网首页案例
xiao廸要飞
01-12 1828
文章目录1. 携程网首页案例制作1.1 技术选型1.2 搭建相关文件夹1.3 设置视口标签以及引入初始化样式1.4 初始化样式1.5 模块名字划分1.6 常见flex布局思路1.7 背景线性渐变2. 代码实现2.1 search-index2.2 focus2.3 local-nav2.4 nav2.5 subnav-entry2.6 sales 1. 携程网首页案例制作 1.1 技术选型 方案：我们采取单独制作移动页面方案 技术：布局采取flex布局为主 1.2 搭建相关文件夹 参考：https
前端布局面典型案例
wgchen
05-28 911
这里写目录标题搭建web静态页面基础知识前端布局典型案例一、题目要求及页面效果示意图二、考点分析三、解答代码1）定位写法2）伸缩布局写法四、页面展示 搭建web静态页面基础知识 前端布局典型案例 一、题目要求及页面效果示意图 1）如下图布局，分为上下两栏，下面一栏又分左右两栏。上栏宽度为100%、高度为200px，下栏左侧栏宽度为100px，下栏右侧栏根据页面宽度自适应。请写出具体的HTML和css代码。 2）当浏览器宽度减少到700px后，顶部栏高度变为50px，下栏左侧栏消失，下栏右侧栏宽度为100%
【03】 移动端web布局-pink老师-2022/03
qq_44722174的博客
03-19 1842
主要概念有: 视口, 物理像素比, 多倍图, 栅格系统, 容器; 主要的移动端布局方案有: 流式布局 \ less + rem + 媒体查询布局 \ 混合布局 \ 响应式布局(一套方案,手机和web都可以用)
Vue3+Vite+Ts 项目实战 04 搭建 Layout 布局
皮蛋很白的博客
04-20 7478
Layout 布局容器 <!-- src\layout\AppLayout.vue --> <template> <el-container> <el-aside width="200px"> Aside </el-aside> <el-container> <el-header>Header</el-header> <el-main>
页面静态化技术---Freemarker介绍
LXYDSF的博客
12-06 1474
页面静态化 1. 页面静态化介绍 本章课程中我们已经实现了移动端套餐列表页面和套餐详情页面的动态展示。但是我们需要思考一个问题，就是对于这两个页面来说每次用户访问这两个页面都需要查询数据库获取动态数据进行展示，而且这两个页面的访问量是比较大的，这就对数据库造成了很大的访问压力，并且数据库中的数据变化频率并不高。那我们需要通过什么方法为数据库减压并提高系统运行性能呢？答案就是 页面静态化。 页面静态化其实就是 将原来的动态网页(例如通过ajax请求动态获取数据库中的数据并展示的网页)改为通过静态化技术生成的静
HarmonyOS开发ArkUI案例：【常用布局容器对齐方式】
m0_70748845的博客
04-28 422
基于ArkTS扩展的声明式开发范式，实现Flex、Column、Row和Stack四种常用布局容器对齐方式。
标梵微博解说CSS布局
标梵互动
01-13 184
CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面布局技术的细节： 正常布局流 display属性 弹性盒子 网格 浮动 定位 CSS 表格布局 多列布局 每种技术都有它们的用途，各有优缺点，相互辅助。通过理解各个布局方法的设计理念，你能够找到构建你想要的网页需要的布局方案。 正常布局流(Normal flow) 正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。让我
AI聊天-界面自定义布局 第1集
weixin_40951507的博客
01-01 538
1、在布局左右侧布局的过程中，注意使用 flex布局，justify-content: flex-start;2、设置左侧面板的高度为 height: calc(100vh);这样控制了高度，保证右侧会话界面在聊天的过程中整体界面不重叠3、注意设置聊天内容为 overflow-y: auto;
使用flex布局轻松实现页面布局的示例代码
01-18
1、上中下布局： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>Document<...
【移动端网页布局】Flex 弹性布局案例 ③
03-06
本案例将深入探讨Flex布局的使用，通过实际的代码示例来阐述其核心概念和应用场景。 一、Flex布局基础 1. 容器（Container）：Flex布局中的容器是指设置了`display: flex`或`display: inline-flex`的元素，它是...
flex布局实战搭建网页页面
01-03
这样，你就可以利用Flex布局搭建出一个具有响应式和动态调整能力的网页页面了。这个方法对于初学者来说是非常实用的，因为Flex布局大大简化了复杂的布局设计。 在提供的压缩包文件中，你将找到一个名为“flex布局...
【1+X Web前端等级考证 】| 最新Web前端开发中级实操
热门推荐
go
11-23 4万+
# 前言 2020 12月 1+X Web 前端开发中级 模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是，说说1+X Web前端开发等级考证这个证书,总有人跑到网上问：这个证书有没有用？ 这个证书含金量高不高？ # 关于考不考 因为这个是工信部从2019年才开始实施试点的，目前还在各大院校试点中，就目前情况来看，知名度并不是很高，有没有用现在无法一锤定音，看它以后办的怎么样把，软考以前也是慢慢地才知名起来。能考就考吧，据所知，大部分学校报考，基本不用交什么报考费(小部分学校，个别除.
【1+X Web前端等级考证 】 | Web前端开发中级理论 (附答案)
go
11-23 3万+
# 前言 2020 12月 1+X Web 前端开发中级 模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是，说说1+X Web前端开发等级考证这个证书,总有人跑到网上问：这个证书有没有用？ 这个证书含金量高不高？ # 关于考不考 因为这个是工信部从2019年才开始实施试点的，目前还在各大院校试点中，就目前情况来看，知名度并不是很高，有没有用现在无法一锤定音，看它以后办的怎么样把，软考以前也是慢慢地才知名起来。能考就考吧，据所知，大部分学校报考，基本不用交什么报考费(小部分学校，个别除.
1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第一套) 附答案
go
11-18 1万+
目录试题一（30分）试题二（45分）试题三（15分）试题四（20分）实操考试答案评分细则 2020年下半年 Web前端开发中级 理论考试 考生姓名：——————————— 准考证号：—————————— 试题一（30分） 阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（10）代码。 【说明】 这是一个响应式完成，用bootstrap4完成响应式轮播效果。 项目采用Bootstrap框架，包含首页index.html、css文件夹、js文件夹、img文件夹，其中
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值