运用flex布局写下的东西

最新推荐文章于 2024-11-04 23:25:00 发布
最新推荐文章于 2024-11-04 23:25:00 发布
阅读量93 收藏
点赞数
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Evalyd/article/details/127711827
版权

                   

<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>携程网</title>
    <!-- <link rel="stylesheet" href="css/normalize.css"> -->
    <link rel="stylesheet" href="rest.css">
    <style>
      a {
        color: black;
        text-decoration: none;
      }

      html,
      body {
        height: 100%;
      }

      div {
        box-sizing: border-box;
      }

      .flex {
        display: flex;
      }

      .flex-center {
        justify-content: center;
        align-items: center;
      }

      .flex-column {
        flex-direction: column;
      }

      .container {
        min-width: 540px;
        max-width: 1200px;
        width: 80%;
        border: 1px solid #ccc;
      }

      .header img {
        width: 100%;
        height: auto;
      }
      /* container部分 */
      /* 大类 */
      .main-content {
        padding: 4px; 
      }

      .con-row {
        border-radius: 4px;
        overflow: hidden;
      }

      .con-row .con-classify,
      .con-row .con-items {
        height: 120px;
        background-color: #FF6A7B;
        flex: 1;
      }
      
      .con-row .con-list a {
        line-height: 60px;
        text-align: center;
      }

      .spacing-left {
        border-left: 1px solid #fff;
      }

      .spacing-right {
        border-right: 1px solid #fff;
      }

      .spacing-bottom {
        border-bottom: 1px solid #fff;
      }

      .spacing-top {
        border-top: 1px solid #fff;
      }

      .spacing-b2 {
        border-bottom: 2px solid #fff;
      }

      .icon {
        background: url(img/ctrip.png) no-repeat;
        background-size: 104px;
      }

      .icon-hotel {
        width: 44px;
        height: 44px;
        background-position: 0 -127px;
      }
    </style>
  </head>
  <body class="flex flex-center">
    <div class="container flex-column flex">
      <div class="header">
        <img src="img/banner.jpg" width="1536" height="307" alt="!">
      </div>
      <!-- 下面的表格背景 main-content-->
      <div class="main-content flex flex-column">
        <!-- 一行  con-row-->
        <div class="con-row flex">
          <!-- 最左边的类 con-classify-->
          <div class="con-classify flex flex-center spacing-b2">
            <a class="flex flex-center flex-column" href="#">
              <span>酒店</span>
              <span class="icon icon-hotel"></span>
            </a>
          </div>
          <!-- 上下结构，设置direction为column | con-items | con-list-->
          <div class="con-items flex flex-column con-list spacing-left spacing-b2">
            <a href="#" class="spacing-bottom">海外酒店</a>
            <a href="#" class="spacing-bottom">特价酒店</a>
          </div>
          <div class="con-items flex flex-column con-list spacing-left spacing-b2">
            <a href="#" class="spacing-bottom">团购</a>
            <a href="#" class="spacing-bottom">同福客栈</a>
          </div>
        </div>
        <div class="con-row flex">
          <!-- 最左边的类 con-classify-->
          <div class="con-classify flex flex-center spacing-b2 ">
            <a class="flex flex-center flex-column" href="#">
              <span>酒店</span>
              <span class="icon icon-hotel"></span>
            </a>
          </div>
          <!-- 上下结构，设置direction为column | con-items | con-list-->
          <div class="con-items flex flex-column con-list spacing-left spacing-b2">
            <a href="#" class="spacing-bottom">海外酒店</a>
            <a href="#" class="spacing-bottom">特价酒店</a>
          </div>
          <div class="con-items flex flex-column con-list spacing-left spacing-b2">
            <a href="#" class="spacing-bottom">团购</a>
            <a href="#" class="spacing-bottom">同福客栈</a>
          </div>
        </div>
        <div class="con-row flex">
          <!-- 最左边的类 con-classify-->
          <div class="con-classify flex flex-center spacing-b2">
            <a class="flex flex-center flex-column" href="#">
              <span>酒店</span>
              <span class="icon icon-hotel"></span>
            </a>
          </div>
          <!-- 上下结构，设置direction为column | con-items | con-list-->
          <div class="con-items flex flex-column con-list spacing-left spacing-b2">
            <a href="#" class="spacing-bottom">海外酒店</a>
            <a href="#" class="spacing-bottom">特价酒店</a>
          </div>
          <div class="con-items flex flex-column con-list spacing-left spacing-b2">
            <a href="#" class="spacing-bottom">团购</a>
            <a href="#">同福客栈</a>
          </div>
        </div>
        <div class="con-row flex">
          <!-- 最左边的类 con-classify-->
          <div class="con-classify flex flex-center spacing-b2">
            <a class="flex flex-center flex-column" href="#">
              <span>酒店</span>
              <span class="icon icon-hotel"></span>
            </a>
          </div>
          <!-- 上下结构，设置direction为column | con-items | con-list-->
          <div class="con-items flex flex-column con-list spacing-left spacing-b2">
            <a href="#" class="spacing-bottom">海外酒店</a>
            <a href="#" class="spacing-bottom">特价酒店</a>
          </div>
          <div class="con-items flex flex-column con-list spacing-left spacing-b2">
            <a href="#" class="spacing-bottom">团购</a>
            <a href="#" class="spacing-bottom">同福客栈</a>
          </div>
        </div>
    </div>
  </body>
</html>

     

<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>淘宝</title>
    <link rel="stylesheet" href="rest.css">
    <style>
      
      @font-face {
      font-family: 'iconfont';
      src: url('font/iconfont.eot');
      src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
           url('font/iconfont.woff2') format('woff2'),
           url('font/iconfont.woff') format('woff'),
           url('font/iconfont.ttf') format('truetype'),
           url('font/iconfont.svg#iconfont') format('svg');
      }

      .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
      }

      html,
      body {
        height: 100%;
      }

      .flex {
        display: flex;
      }

      .flex-center {
        justify-content: center;
        align-items: center;
      }

      .flex-column {
        flex-direction: column;
      }

      .just-between {
        justify-content: space-between;
      }

      .container ul {
        list-style: none;
        justify-content: space-between;
        border: 1px solid #ccc;
        padding: 8px 8px 0;
      }

      .flex-wrap {
        flex-wrap: wrap;
      }

      .container {
        box-sizing: border-box;
        min-width: 680px;
        max-width: 1200px;
        width: 80%; 
      }

      .container ul li {
        position: relative;
        box-sizing: border-box;
        width: 22%;
        margin-bottom: 8px;
      }

      .container li img {
        width: 100%;
        height: auto;
      }

      .container .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        transform: scale(0);
        transition: .5s;
        background-color: rgba(0,0,0,.5);
        /* display: none; */
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        justify-content: space-around;
      }

      .mask p:nth-child(1) span.iconfont{
        color: red;
        vertical-align: center;
      }

      .container li:hover .mask {
        transform: scale(1);
      }
    </style>
  </head>
  <body class="flex flex-center">
    <div class="container">
      <ul class="flex flex-wrap">
        <li>
          <img src="img/taobao/food1.webp" width="230" height="230" alt="!">
          <div class="mask flex flex-column">
            <p class="flex">
              <span class="iconfont">&#xe619;</span>
              【N上新口味】稻香村绿豆糕桂花阿斯顿哈啥事
            </p>
            <p class="flex just-between">
              <span>天猫超市</span>
              <span>北京</span>
            </p>
            <p class="flex just-between">
              <span>¥39.90</span>
              <span>15人付款</span>
            </p>
          </div>
        </li>
        <li>
          <img src="img/taobao/food1.webp" width="230" height="230" alt="!">
          <div class="mask flex flex-column">
            <p class="flex">
              <span class="iconfont">&#xe619;</span>
              【N上新口味】稻香村绿豆糕桂花阿斯顿哈啥事
            </p>
            <p class="flex just-between">
              <span>天猫超市</span>
              <span>北京</span>
            </p>
            <p class="flex just-between">
              <span>¥39.90</span>
              <span>15人付款</span>
            </p>
          </div>
        </li>
        <li>
          <img src="img/taobao/food1.webp" width="230" height="230" alt="!">
          <div class="mask flex flex-column">
            <p class="flex">
              <span class="iconfont">&#xe619;</span>
              【N上新口味】稻香村绿豆糕桂花阿斯顿哈啥事
            </p>
            <p class="flex just-between">
              <span>天猫超市</span>
              <span>北京</span>
            </p>
            <p class="flex just-between">
              <span>¥39.90</span>
              <span>15人付款</span>
            </p>
          </div>
        </li>
        <li>
          <img src="img/taobao/food1.webp" width="230" height="230" alt="!">
          <div class="mask flex flex-column">
            <p class="flex">
              <span class="iconfont">&#xe619;</span>
              【N上新口味】稻香村绿豆糕桂花阿斯顿哈啥事
            </p>
            <p class="flex just-between">
              <span>天猫超市</span>
              <span>北京</span>
            </p>
            <p class="flex just-between">
              <span>¥39.90</span>
              <span>15人付款</span>
            </p>
          </div>
        </li>
        <li>
          <img src="img/taobao/food1.webp" width="230" height="230" alt="!">
          <div class="mask flex flex-column">
            <p class="flex">
              <span class="iconfont">&#xe619;</span>
              【N上新口味】稻香村绿豆糕桂花阿斯顿哈啥事
            </p>
            <p class="flex just-between">
              <span>天猫超市</span>
              <span>北京</span>
            </p>
            <p class="flex just-between">
              <span>¥39.90</span>
              <span>15人付款</span>
            </p>
          </div>
        </li>
        <li>
          <img src="img/taobao/food1.webp" width="230" height="230" alt="!">
          <div class="mask flex flex-column">
            <p class="flex">
              <span class="iconfont">&#xe619;</span>
              【N上新口味】稻香村绿豆糕桂花阿斯顿哈啥事
            </p>
            <p class="flex just-between">
              <span>天猫超市</span>
              <span>北京</span>
            </p>
            <p class="flex just-between">
              <span>¥39.90</span>
              <span>15人付款</span>
            </p>
          </div>
        </li>
        <li>
          <img src="img/taobao/food1.webp" width="230" height="230" alt="!">
          <div class="mask flex flex-column">
            <p class="flex">
              <span class="iconfont">&#xe619;</span>
              【N上新口味】稻香村绿豆糕桂花阿斯顿哈啥事
            </p>
            <p class="flex just-between">
              <span>天猫超市</span>
              <span>北京</span>
            </p>
            <p class="flex just-between">
              <span>¥39.90</span>
              <span>15人付款</span>
            </p>
          </div>
        </li>
        <li>
          <img src="img/taobao/food1.webp" width="230" height="230" alt="!">
          <div class="mask flex flex-column">
            <p class="flex">
              <span class="iconfont">&#xe619;</span>
              【N上新口味】稻香村绿豆糕桂花阿斯顿哈啥事
            </p>
            <p class="flex just-between">
              <span>天猫超市</span>
              <span>北京</span>
            </p>
            <p class="flex just-between">
              <span>¥39.90</span>
              <span>15人付款</span>
            </p>
          </div>
        </li>
        <li>
          <img src="img/taobao/food1.webp" width="230" height="230" alt="!">
          <div class="mask flex flex-column">
            <p class="flex">
              <span class="iconfont">&#xe619;</span>
              【N上新口味】稻香村绿豆糕桂花阿斯顿哈啥事
            </p>
            <p class="flex just-between">
              <span>天猫超市</span>
              <span>北京</span>
            </p>
            <p class="flex just-between">
              <span>¥39.90</span>
              <span>15人付款</span>
            </p>
          </div>
        </li>
        <li>
          <img src="img/taobao/food1.webp" width="230" height="230" alt="!">
          <div class="mask flex flex-column">
            <p class="flex">
              <span class="iconfont">&#xe619;</span>
              【N上新口味】稻香村绿豆糕桂花阿斯顿哈啥事
            </p>
            <p class="flex just-between">
              <span>天猫超市</span>
              <span>北京</span>
            </p>
            <p class="flex just-between">
              <span>¥39.90</span>
              <span>15人付款</span>
            </p>
          </div>
        </li>
        <li>
          <img src="img/taobao/food1.webp" width="230" height="230" alt="!">
          <div class="mask flex flex-column">
            <p class="flex">
              <span class="iconfont">&#xe619;</span>
              【N上新口味】稻香村绿豆糕桂花阿斯顿哈啥事
            </p>
            <p class="flex just-between">
              <span>天猫超市</span>
              <span>北京</span>
            </p>
            <p class="flex just-between">
              <span>¥39.90</span>
              <span>15人付款</span>
            </p>
          </div>
        </li>
        <li>
          <img src="img/taobao/food1.webp" width="230" height="230" alt="!">
          <div class="mask flex flex-column">
            <p class="flex">
              <span class="iconfont">&#xe619;</span>
              【N上新口味】稻香村绿豆糕桂花阿斯顿哈啥事
            </p>
            <p class="flex just-between">
              <span>天猫超市</span>
              <span>北京</span>
            </p>
            <p class="flex just-between">
              <span>¥39.90</span>
              <span>15人付款</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>

这是第二个的效果图

 这是第一个的效果图

 

 

Evalyd
关注
微信小程序-FlexLayout布局
06-01
- 在微信小程序中，开发者可以使用样式表（wxss）来设置Flex布局，语法与标准CSS相似但有些许差异，如`flex-direction`需写成`display: flex-direction`。 - 微信小程序的开发者工具提供了实时预览功能，方便调试...
Flex入门基础——Flex布局、容器container的属性
zxy9602的博客
11-11 4848
1、作用： 利用Flex可实现完美居中效果； 例（1）——display:flex; （注意：无论父元素以何种比例递增，元素依旧保持水平居中） .container{ width:200px; height:200px; background: cadetblue; border: 1px solid #ccc; display: flex;
flex布局 just-content:space-between，列表上下两排数量不一致的时候处理方法
Buddha_ITXiong的博客
08-08 1万+
我们在做项目的时候，经常会遇到列表数据展示的需求，如下图： 看到这种需求就想到用flex布局方法会很方便： 然而··········这样写的话并不会像第一张图片那样展示，第二排的三个数据会平分整个宽度，   思路：所有我采用的方法就是改变原始数据，添加占位容器即添加多余的li元素   我用的是vue，其他框架可以借鉴思维，这是处理原始数据的方法 这是html数据的绑定 ...
CSS3弹性布局内容对齐（justify-content）属性使用详解
热门推荐
陈小峰（iefreer）的专栏
03-01 15万+
内容调整（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配，也会在发生内容溢出时影响项目的对齐。
flex布局采用justify-content:space-between时,当为两个内容时中间被空出的解决方案
d623141153的博客
01-21 1万+
flex布局采用justify-content:space-between时,当为两个内容时中间被空出 给外层容器加一个伪类::after,设置样式content:&amp;quot;&amp;quot;; width:“内容宽”
flex 布局 justify-between 最后一行左对齐
潜心
03-30 2481
网络方法层出不穷（佩服），有的追加伪类，但是追加伪类就设计到了item个数问题，就是当最后一行元素是一个的时候，不对左对齐，所以借助dom思想来实现 我要实现的是三列 利用数组长度，在末尾渲染i个伪元素，来适应justify-between的特性 ...
css正确的语法css正确的布局
12-07
6. **响应式设计**：使用媒体查询（`@media`）来根据设备特性调整布局，确保在不同屏幕尺寸下都能良好显示。 正确运用这些布局技术可以创建出适应各种屏幕尺寸和用户需求的网站。 最后，要注意CSS预处理器，如Sass...
三种方式实现元素水平居中显示与固定布局和流式布局概念理解
09-22
在CSS布局设计中，元素的水平居中是一个常见的需求，主要目的是为了使页面内容在不同屏幕尺寸下都能保持良好的视觉效果。本文将详细介绍三种方法来实现元素的水平居中显示，并探讨固定布局和流式布局的基本概念。 ...
Flex更换主题 更换皮肤控件
03-19
Flex是Adobe公司开发的一种基于ActionScript 3.0的开源框架，主要用于构建富互联网应用程序（RIA）。...通过灵活运用主题和皮肤，不仅可以提高应用的视觉吸引力，还能提升用户体验，使得Flex应用程序更加专业和出色。
Flexy是使用Flex实现的最小CSS框架
08-10
Flexy是一个基于Flex布局模式构建的轻量级CSS框架，专为快速开发响应式和灵活的网页设计而设计。在本文中，我们将深入探讨Flexbox布局、Flexy框架的特性、如何使用它以及与JavaScript开发的关联。 Flexbox，全称...
flex布局 justify-content：space-between； 解决最后一排数量不够自动向两端排列问题，附录grid栅格布局完美解决
lucky___star的博客
02-22 4万+
flex 布局两端对齐当最后一排数量不够时，会出现以下布局情况 这时，我们可以下面after伪类，解决最后一排数量不够两端分布的情况 .tem-flex{ display: flex; flex-wrap: wrap; justify-content:space-between; text-align: justify; } &amp;lt;!--加上after伪...
黑马官网最新2024前端就业课V8.5笔记---CSS篇（2）
最新发布
m0_63763668的博客
11-04 812
浮动属性 float,left 表示左浮动,right 表示右浮动浮动后的盒子顶对齐浮动后的盒子具备行内块特点父级宽度不够,浮动的子级会换行浮动后的盒子脱标子级浮动,父级没有高度,子级无法撑开父级高度,影响布局效果双伪元素法浮动本质作用是实现图文混排效果。
CSS中综合练习（基础学校完整静态网页教程）！！
CH040708的博客
11-03 315
集合三行、多行多列、百分比布局做的基础学校完整静态网页#
第八章 利用CSS制作导航菜单课后习题
2302_80786141的博客
11-01 678
【代码】第八章 利用CSS制作导航菜单课后习题。
CSS--两列网页布局，三列布局和多行多列布局
2301_82005922的博客
10-30 576
上一期我们已经学会两列布局了，那么三列布局和多行多列布局怎么写呢？
​CSS之三
qq_75073393的博客
10-31 591
CSS 有三个非常重要的三个特性:层圣性、继承性、优先级。
黑马官网最新2024前端就业课V8.5笔记---CSS篇（1）
m0_63763668的博客
11-04 582
层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 文档的呈现(美化内容)
CSS浮雕效果
p_s_p的博客
10-30 365
【代码】CSS浮雕效果。
【CSS】CSS 样式重置 (normalize.css 和 reset.css) 和通用样式配置
小秀的博客
11-01 896
一般来说，每一个项目初始化阶段都需要样式重置和样式定制化。样式重置最常用的就是 normalize.css 和 reset.css 这两个文件。所以我再项目中一般会安装 normalize.css。
CSS3伸缩布局盒模型Flex布局详解
详解CSS3伸缩布局盒模型Flex布局 Flex布局是CSS3引入的一种新的布局模式，即伸缩盒模型布局（FlexibleBox）模型。用来提供一个更加有效的方式确定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值