html&CSS-----弹性布局案例展示

这篇具有很好参考价值的文章主要介绍了html&CSS-----弹性布局案例展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

前言

效果展示

​编辑 代码

思路分析


前言

        上一期我们学习了弹性布局,那么这一期我们用弹性布局来写一个小案例,下面看代码(上一期链接html&CSS-----弹性布局_灰勒塔德的博客-CSDN博客)

效果展示

 代码

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="title">我最喜欢的动漫</div>
    <div class="box">
        <div class="first">
            <img src="https://p1.ssl.qhimg.com/t0115ce3cbc4015ec6a.jpg" alt="" width="380px" height="580px">
        </div>
        <div class="second">
            <img src="https://pic2.zhimg.com/v2-12739c6fd519e482491c474c5d4c555d_r.jpg?source=172ae18b" alt="" width="380px" height="280px">
        </div>
        <div class="third">
            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.5bb547e5904c73e0fd6797f9d84fd385?rik=ZArey%2blfkd7qZg&riu=http%3a%2f%2fimg1.gtimg.com%2fent%2fpics%2fhv1%2f220%2f19%2f1897%2f123357490.jpg&ehk=p%2bq0rmM2VU56Zk8J9UED%2fkOsy06RWh5fYYO%2fuqkvj8o%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt="error" width="380px" height="280px">
        </div>
        <div class="forth">
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.6VInImvpRRAbGNLyA-O-7wHaEK?pid=ImgDet&rs=1" alt="000" width="380px" height="280px">
        </div>
        <div class="fifth">
            <img src="https://pic1.zhimg.com/v2-eba5063f7938e90321291c220ab672b7_b.jpg" alt="" width="380px" height="280px">
        </div>
    </div>
</body>
</html>

CSS代码:

.box{
    margin: 0 auto;
    display: flex;
    height: 600px;
    width: 1200px;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: column;
    border: 2px solid yellow;

}
.title{
    font-size: 40px;
    color: blueviolet;
    margin-left: 40%;
}
.first{
    height: 580px;
    width: 380px;
    background-color: red;
    background-image: url();
}
.second{
    background-color: blue;
    height: 280px;
    width: 380px;
}
.third{
    background-color: rgb(0, 255, 208);
    height: 280px;
    width: 380px;
}
.forth{
    background-color: rgb(0, 255, 208);
    height: 280px;
    width: 380px;
}
.fifth{
    background-color: rgb(0, 255, 208);
    height: 280px;
    width: 380px;
}

思路分析

首先我们去创建一个大盒子box,作为容器,里面放入5个项目(小盒子)。其中容器的主轴设置为y轴,然后设置为换行,还有对齐方式设置为所有间隔分均分配,即所有子元素拥有相同的左右(上下)间隔space-around,以上就可以实现每一个项目纵向排列不会出现超出边框的问题,然后就是依次放入小盒子在里面,最后就是放入图片了(图片均是网上资源可查阅)。

 好了,以上就是今天的作品展示了,你们会了吗?我们下一期再见!

每日分享一张壁纸:

html&CSS-----弹性布局案例展示,html和css框架,html,css,前端文章来源地址https://www.toymoban.com/news/detail-650154.html

到了这里,关于html&CSS-----弹性布局案例展示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML+CSS+ElementUI搭建个人博客静态页面展示(纯前端)

    登录页面 门户页面 博客页面 技术选取: HTML/CSS + VUE2 + ElementUI(Version - 2.15.14) 编程软件: VSCode 环境配置与搭建 安装指令 ELement 在 node 下载后,会发现 node_modules/element-ui 文件夹,直接复制到本地,之后按照文件路径引用并配置 [1]ElementUI - 2.15.14官网 [2] 获取图片网址 [3] 登录页面获

    2024年02月05日
    浏览(87)
  • CSS3弹性布局

    2009年,W3C提出一种崭新的布局方案—弹性盒(Flexbox)布局,使用该模型可以轻松地创建自适应窗口的流动布局,或者自适应字体大小的弹性布局。W3C的弹性盒布局分为旧版本、新版本及混合过渡版本3种不同的设计方案,其中混合过渡版本主要针对IE10进行兼容。目前,CSS3弹性布

    2024年02月06日
    浏览(46)
  • CSS 弹性布局

    提示:这篇比较重要,做复杂页面时经常会用到!会不断更新❗ 提示:这里可以添加本文要记录的大概内容: 弹性布局的总体思想是把布局不写在标记上,而是把布局的样式代码写在最大的父标记上 让布局实现自适应和自动调整,可以在不同屏幕大小和设备上保持一定的布

    2024年02月11日
    浏览(82)
  • CSS弹性布局

    ​ 弹性盒子是 CSS3 的一种新的布局模式。 ​ CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 ​ 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐

    2024年02月21日
    浏览(34)
  • css弹性布局的方式

    任何一个容器都可以定义为弹性布局容器,使用display:flex(display:inline-flex)开启弹性布局。 2个方向轴: 水平主轴 和 垂直交叉轴 6个容器属性 1.flex-direction :主轴的方向 2. justify-content :子元素在主轴的对齐方式 3.flex-wrap::一条轴线排不下是否换行 4.flex-flow: flex-direction和flex

    2024年02月11日
    浏览(47)
  • CSS弹性布局常用设置

    目录 一、单位元素 二、弹性容器 三、常用属性 三、项目实战效果 vm 1vm 为视口的1% vh 视口高的1% vmin 参照长边 vmax 参照长边 rem 等比缩放 需要设置最外层盒子html设置vw 根字号html的--- font-- 1vm 去适配 初始化 设置一个容器元素为弹性块状元素(内部允许有弹性元素flex撑开)   

    2024年02月11日
    浏览(51)
  • css 弹性布局的详细说明

    CSS弹性布局(Flexible Box Layout,简称Flexbox)是一种用于创建自适应和可伸缩布局的CSS模块。它提供了一种简单而强大的方式来对容器中的子元素进行布局,使它们能够自动调整大小、排列和对齐。 Flexbox通过在容器和子元素上应用一些特定的CSS属性来实现布局。下面是一些常用

    2024年02月16日
    浏览(44)
  • 30个HTML+CSS前端开发案例(完结篇)

    相关代码及其图片素材,持续更新中。。。

    2024年02月09日
    浏览(52)
  • CSS3弹性盒布局详解

    弹性盒( Flexible Box 或 Flexbox) 布局是CSS3提供的一种新的布局模式,是一种当页面需要适应不同的屏幕大小及设备类型时,确保元素拥有恰当行为的一种布局方式。 弹性盒的结构: 从图中所知,弹性盒由 弹性容器 , 弹性子元素 和 轴 构成,在默认情况下,弹性子元素的排布

    2024年01月18日
    浏览(43)
  • css3 flex弹性布局详解

    2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex 是 Flexible Box 的缩写,意为\\\"弹性布局\\\",用来为盒状模型提供最大的灵活性。 开启flex布局:

    2024年02月05日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包