Web:移动商城首页的页眉和页脚的布局和flex项目三个属性

最新推荐文章于 2023-07-11 11:00:44 发布
最新推荐文章于 2023-07-11 11:00:44 发布
阅读量427 收藏 1
点赞数 1
分类专栏： Web前端 文章标签： css html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43356354/article/details/118024952
版权

移动商城首页的页眉和页脚的布局

先来演示一下flex项目三个属性
1.项目的缩放比例与基准宽度

元素属性含义
flex0 1 auto / initial默认的，禁止放大，允许收缩，宽度自动
flex1 1 auto / auto允许放大和收缩
flex0 0 auto / none禁止放大和收缩/pc布局

①flex 0 1 auto / initial 演示

flex项目flex 0 1 auto属性默认的就是可以禁止放大，允许收缩，宽度自动，动态图我们可以看出效果

②flex 1 1 auto / auto 演示

flex项目flex 1 1 auto属性,在动态图里我们可以看出，项目在里面允许被放大，项目会随着页面的宽度大小而变化。

③flex 0 0 auto / none 演示

flex项目flex 0 0 auto属性，禁止放大，禁止收缩，不会随着页面的变化而变化，只会固定自己的值

2.单个项目在交叉轴上的对齐方式

元素属性含义
align-selfflex-start起始线
align-selfflex-end终止线
align-selfstretch默认拉伸
align-selfcenter居中

①align-self flex-start演示

默认起始线就不说了，就是默认的样式，跳过到第二个对齐方式。

②align-self flex-end演示

align-self flex-end参数，可以调动选择好的单个项目移动到交叉轴终止线上。

③align-self stretch演示

这个原理也是一样。都是默认拉伸，跳过到第四个对齐方式

④align-self center演示

align-self center参数，可以把选择到的项目在垂直线上居中，效果非常的好。

3.项目在主轴上的排列顺序

元素属性含义
order0-100数值数值越大排列在越后，数值越小排列在越前

①order演示

这里我们可以看到，颜色区分了项目，然后再代码块中给每个项目都设置了值，项目数值越大排列在越后，数值越小排列在越前。

代码块

<!DOCTYPE html>
<html lang="en">
  <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" />
    <title>flex项目的三个属性</title>
    <style type="text/css">
      * {
        box-sizing: border-box;
      }
      box1 {
        border: 1px solid;
        background: lightgreen;
        /* width: 30em; */
        height: 30em;
      }
      box1 .box {
        border: 1px solid;
        background: lightblue;
        width: 10em;
        height: 10em;
      }
      box1 {
        display: flex;
      }
      /* .box {
              默认的，禁止放大，允许收缩，宽度自动
            flex: 0 1 auto;
          } */

      /* .box {
            允许放大，允许收缩，宽度自动
            flex: 1 1 auto;
          } */

      /* .box {
            禁止放大 禁止收缩 宽度自动
            flex: 0 0 auto;
          } */

      /* .box:nth-of-type(3) {
          单个项目垂直方向居中
        align-self: center;
      } */

      /* 项目在主轴上的排列顺序 order */
      /* order数值越大排在越后面， order数值越小排列在越前 */
      .box:nth-of-type(1) {
        order: 100;
      }

      .box:nth-of-type(2) {
        order: 2;
      }

      .box:nth-of-type(3) {
        order: 0;
      }
    </style>
  </head>
  <body>
    <div id="box1">
      <div class="box" style="background: red">项目1</div>
      <div class="box" style="background: lightpink">项目2</div>
      <div class="box">项目3</div>
      <!-- <div class="box">项目4</div>
      <div class="box">项目5</div>
      <div class="box">项目6</div> -->
    </div>
  </body>
</html>

移动商城首页的页眉和页脚的布局
1.先定位一个网页页面布局然后建立一个css文件给网页页面初始化并且用到媒体检查器设置好文字大小。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: 7b7b7b;
}
li {
  list-style: none;
}
html {
  font-size: 10px;
}

/* 设置媒体查询改变字体大小 */

@media screen and (min-width: 480px) {
  html {
    font-size: 12px;
  }
}

@media screen and (min-width: 640px) {
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 720px) {
  html {
    font-size: 16px;
  }
}

2.接下来用绝对定位和固定定位，定位好页眉，主体，页脚三个部分

/* 初始化样式表 */
@import url(lnitialize.css);

/* 网页页眉 */
.header {
  background: ce001f;
  color: fff;
  height: 4.4rem;

  /* 采用固定定位，把页眉定位到顶端 */
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  font-size: 1.4rem;
}

/* 网页主体 */
.main {
  background: fff;
  font-size: 1.4rem;

  /* 采用绝对定位定位到中间部位 */
  position: absolute;
  top: 4.4rem;
  right: 0;
  bottom: 4.4rem;
  left: 0;
}

/* 网页页脚 */
.footer {
  background: ccc;
  color: fff;
  height: 4.4rem;
  font-size: 1.4rem;

  /* 采用固定定位，定位到底部 */
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
}

3.页眉设置样式，采用字体图标和flex布局

这是设置html页眉的字体图标

<!DOCTYPE html>
<html lang="en">
  <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" />
    <title>页眉</title>
    <link
      rel="stylesheet"
      href="style/css/my-key tubiao/font123/iconfont.css"
    />
    <style type="text/css">
      @import url(style/css/index.css);
      @import url(style/css/header.css);
    </style>
  </head>
  <body>
    <!-- 网页页眉 -->
    <div class="header">
      <!-- 字体图标菜单 -->
      <div class="menu iconfont icon-category"></div>
      <!-- logo和放大镜和搜索框 -->
      <div class="search">
        <div class="logo">JD</div>
        <div class="glass iconfont icon-search"></div>
        <input type="text" class="words" value="立式空调柜" />
      </div>
      <!-- 登录按钮 -->
      <div class="login"><a href="" class="login">登录</a></div>
    </div>
    <!-- 网页主体 -->
    <div class="main">main</div>
    <!-- 网页页脚 -->
    <div class="footer">footer</div>
  </body>
</html>

这是页眉的css样式

/* 获取到页眉的类，可以模块化选择子元素 */
.header {
  display: flex;
  align-items: center;
}

/* 菜单和搜索框还有登录按钮分区域 */
/* 菜单一份 */
.header .menu {
  flex: 1;
  text-align: center;
  font-size: 3rem;
}

/* 设置菜单的触摸样式 */
.header .menu:hover {
  cursor: pointer;
}

/* 搜索框六份 */
.header .search {
  flex: 6;
  display: flex;
  /* 设置背景颜色为白色 */
  background: rgb(255, 255, 255);
  /* 定义背景圆角 */
  border-radius: 3rem;
  /* 设置内边距 */
  padding: 0.3rem;
}

/* 设置logo样式 */
.header .search .logo {
  color: e43130;
  font-size: 2rem;
  flex: 0 1 4rem;
  text-align: center;

  /* 设置字体型号 */
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

/* 设置放大镜样式 */
.header .search .glass {
  color: ccc;
  flex: 0 1 4rem;
  font-size: 2rem;
  /* 设置左边框 */
  border-left: 1px solid;
  text-align: center;
}

/* 搜索框样式 */
.header .search .words {
  border: none;
  outline: none;
  color: ccc;
  flex: 0 0 auto;
}

/* 登录1份 */
.header .login {
  flex: 1;
  /* 设置字体颜色 */
  color: rgb(255, 255, 255);
  /* 设置居中 */
  text-align: center;
  /* 设置文本加粗 */
  font-weight: 600;

设置页脚样式

这是设置html页脚的字体图标

<!DOCTYPE html>
<html lang="en">
  <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" />
    <title>页脚</title>
    <link
      rel="stylesheet"
      href="style/css/my-key tubiao/font123/iconfont.css"
    />
    <link rel="stylesheet" href="style/css/my-key tubiao/iconfont.css" />

    <style type="text/css">
      @import url(style/css/index.css);
      @import url(style/css/header.css);
      @import url(style/css/footer.css);
    </style>
  </head>
  <body>
    <!-- 网页页眉 -->
    <div class="header">
      <!-- 字体图标菜单 -->
      <div class="menu iconfont icon-category"></div>
      <!-- logo和放大镜和搜索框 -->
      <div class="search">
        <div class="logo">JD</div>
        <div class="glass iconfont icon-search"></div>
        <input type="text" class="words" value="立式空调柜" />
      </div>
      <!-- 登录按钮 -->
      <div class="login"><a href="" class="login">登录</a></div>
    </div>
    <!-- 网页主体 -->
    <div class="main">main</div>
    <!-- 网页页脚 -->
    <div class="footer">
      <div>
        <div class="iconfont icon-smile"></div>
        <span>首页</span>
      </div>
      <div>
        <div class="iconfont icon-all-fill"></div>
        <span>分类</span>
      </div>
      <div>
        <div class="iconfont icon-gift"></div>
        <span>惊喜</span>
      </div>
      <div>
        <div class="iconfont icon-cart-Empty"></div>
        <span>购物车</span>
      </div>
      <div>
        <div class="iconfont icon-account-fill"></div>
        <span>未登录</span>
      </div>
    </div>
  </body>
</html>

这是页脚的css样式

.footer {
  display: flex;
  background: rgb(250, 250, 250);
  color: 666;
  flex: 1 1 auto;
  /* 设置再主轴方向分散对齐 */
  justify-content: space-around;
  /* 设置交叉轴居中对齐 */
  align-items: center;
}
/* 设置div子元素 */
.footer > div {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

/* 设置首页图标样式 */
.footer .iconfont {
  font-size: 2.5rem;
}

/* 设置字体大小 */
.footer div span {
  font-size: 1rem;
}
ZzzWClock
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web打印页眉页脚_Web设计中页眉和页脚的20种创意组合
cune1359的博客
07-03 1107
到目前为止，我们已经看到了数十个（即使不是数百个）展示创意页眉和页脚的展示。 使用当今可用的工具，创建精美的标题并不困难。 但是要制作一个与页脚很好地结合在一起的花式页眉，需要无缝的过渡和视觉感知，这需要一些额外的工作和创造力。 例如，页眉可以描绘一棵树的顶部，上面有树叶和树枝–我们在页眉精美设计中已经多次看到这种情况。 但是，加倍努力并结合以该特定视觉元素为基础的页脚总是更有趣。 如果是...
web打印去掉页眉页脚
刘育文
01-24 3622
1.直接在IE中进行设置 点击菜单->文件->页面设置，在弹出的窗口中把页眉页脚清空 2.注册表设置 在注册表中，进入 HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup,把Header和footer两项的值清空 3.使用客户端JavaScript脚本实现 脚本代码如下：
商城系统页脚设计代码
墨鱼部落格
03-14 574
商城系统页脚设计代码 黑色的云商城系统页面底部设计样式，电商产品页脚布局代码。这是一款基于div css制作的网页通用页脚代码。带注册有礼手机订阅功能。 演示地址 下载地址
浮动页头页脚，内容自适应高度（手机端常见）
weixin_30344995的博客
07-25 133
第一次写博客，只展示自己的小发现，至于兼容性和泛用性以后再考虑吧。 对新技术本人的态度一向都是大胆接受，然后从中找些乐子，在暧昧不清之间终究会将其抛弃。 对 flex 等布局方式的喜爱也许也只是短暂的，不过技术发展，总有些可以一起好好玩耍的时光的。 基础的已经玩过了，来玩点实用的，比如这个： 手机版页面总有个页眉页脚，放些logo和按钮菜单什么的，一般我们会选用定位的方式，ok，it...
Web:flex模拟移动商城首页页面布局/grid布局的相关属性
ZzzWClock的博客
06-18 379
flex模拟移动商城首页页面布局 1.布局页面导航 大家可以看到图片上的红色边框，用了flex布局，布局了一个多行容器，采用的是无序列表ul。 css代码块 /* 设置导航样式，定义flex容器 */ .main { background: rgba(223, 223, 223, 0.524); } .main .dh { display: flex; flex-flow: row wrap; padding: 1rem; text-align: center; backgro
html-flex-template：具有页眉和页脚以及相关CSS的flex main模板
02-17
在"html-flex-template"这个项目中，我们看到一个预构建的HTML/CSS模板，它利用了Flexbox来构建一个带有页眉（header）、侧边栏（sidebar）和页脚（footer）的页面结构。这个模板还具有基本的响应式设计，意味着它...
mobileui-basic-screen-layout2:具有固定的页眉和页脚的基本屏幕布局
05-16
mobileui基本屏幕布局2 具有固定的页眉和页脚的基本屏幕布局包含的文件basicheaderfooter.css-简单的页眉和页脚CSS布局规则js / fastclick.js-消除了Android中的300毫秒点击延迟-请参阅： ： js / zepto.js-类似于...
html-pdf:使用wkhtmltopdf从具有自定义页眉和页脚HTML生成PDF
05-07
:page_with_curl: 使用wkhtmltopdf v2021.4.115从具有自定义页眉和页脚HTML生成PDF 错误很明显:trade_mark:-... :folded_hands: 这是一个开源项目。 如果愿意，可以为该存储库加注星标，甚至捐献以维护服务器和开发。
SectionedRecyclerView可以添加页眉和页脚RecyclerView.rar
07-30
《使用SectionedRecyclerView实现添加页眉和页脚的 RecyclerView》 在Android开发中，RecyclerView作为一个高效、可重用的视图组件，广泛用于显示大量数据列表。然而，原生的RecyclerView仅提供基本的列表展示功能...
Print-Preview:具有自定义页眉和页脚的html页面打印示例POC
05-15
此示例使用将页面分为多页，并在每个打印页面上使用自定义页眉和页脚。 演示 查看演示。 请注意，您需要手动按Ctrl-p来检查页面的打印预览。 在职的。 Columizer api在多列中中断页面，在这种情况下，此处保持列...
html 布局 页眉
10-31
html 布局 页眉 jQuery javascript
web打印去掉页眉页脚，以及不想打印出的页面元素
03-05
web打印去掉页眉页脚，以及不想打印出的页面元素 博文链接：https://llying.iteye.com/blog/128212
Web移动端商城 移动端商城手机网站html整套模板，web移动商城仿app手机模板下载
08-31
移动端商城手机网站html整套模板，web移动商城仿app手机模板下载。原生的js和jquery-1.6.2.min.js，页面才有html5自适应。包括首页(轮播，导航)、兼职（视频，图文话题，申请）、优惠（商家，优惠卷）、美食(购物车，结算,地址）我的(登录,订单,收藏,地址,优惠卷,职位,切换,设置)等共有26手机页面。
Flex Scale Box缩放盒子
05-04
Flex缩放盒子:可对框进行拖拽与任意缩放,也可禁止.
移动web开发----高效移动web布局
陈开心的博客
09-07 603
flexbox弹性盒子布局 混个划分：父元素用display:webkit-flex;说明使用弹性布局，它的子元素有一个元素是固定宽度width:100px的，剩下的元素就按照剩余宽度等比划分。 小技巧： 不定宽高的水平垂直居中 //第一种方法：绝对定位配合translate(-50%,50%)方法 .myoff-wrapper{ position:absolu...
网页中页眉页脚的设置参数
searchkey的专栏
08-07 2308
符号      含义&w       网页标题&u        网页地址 (URL)&d        短日期格式（由“控制面板”中的“区域设置”指定）&D        长日期格式（由“控制面板”中的“区域设置”指定）&t         由“控制面板”中的“区域设置”指定的时间格式&T         24 小时时间格式&p         当前页码&P         总页数&b   
经典布局（flex和传统两种实现）—左右页眉页脚
jiaojsun的博客
06-20 370
1.浮动法 上中下：都是块元素。定宽，定高 中：定宽高： 左右：浮动且定宽高 这种方式其实并不好，写了好多代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <s...
简单的聊一聊如何用CSS制作一个专业的头部页眉（Headers）
最新发布
前端达人
07-11 1714
一个吸引人的网页页眉对于给访问者留下良好的第一印象至关重要。一个设计精良的页眉不仅能够吸引注意力，还能为整个网站设定基调。借助CSS，创建现代化和视觉吸引力的网页页眉比以往任何时候都更加容易。在本文中，我们将探索一些基本的技巧和提示，以帮助您使用CSS创建令人惊艳的页眉布局。我们并不过多关注设计，而是专注于创建布局，并了解创建布局时可能遇到的困难。Space-Between在一个三列的页眉中无法居...
Word高级应用：排版技巧揭秘-页眉页脚差异化设计
4. 首页特殊处理 - 创建首页与其他页面不同的页眉和页脚时，同样使用“页眉和页脚”工具，但可能需要额外设置，比如使用“不同的第一页”选项。 5. 最佳作业模式 - 推荐使用文档结构图配合页面视图、大纲视图或Web...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值