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

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

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

元素	属性	含义
flex	0 1 auto / initial	默认的，禁止放大，允许收缩，宽度自动
flex	1 1 auto / auto	允许放大和收缩
flex	0 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-self	flex-start	起始线
align-self	flex-end	终止线
align-self	stretch	默认拉伸
align-self	center	居中

①align-self flex-start演示

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

②align-self flex-end演示

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

③align-self stretch演示

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

④align-self center演示

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

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

元素	属性	含义
order	0-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><linkrel="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><linkrel="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;
}

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

打印web页或文本文件时如何去掉讨厌的页眉，页脚？－－暨开篇
经常会有朋友抱怨打印web页面或者文本文件时会有讨厌的页眉和页脚,其实这些只要经过简单的设置就可以去掉. 一般都是在页面设置(pagesetup)上进行修改.只要将页眉.页脚文本框中的 ...
Word | 在给毕业论文添加页眉和页脚的时候，如何略过首页和第二页
简介首先,明确一下目的:要给毕业论文添加页眉和页脚,由于首页为封面,第二页为封面的空白页,因此首面和第二面都不能添加页眉和页脚. 步骤如下. 总步骤打开"布局"(在2010版本 ...
Word控件Spire.Doc 【页眉页脚】教程(7)：添加不同的首页页眉和页脚
Spire.DOC是一款专门对 Word 文档进行操作的 .NET 类库.在于帮助开发人员无需安装 Microsoft Word情况下,轻松快捷高效地创建.编辑.转换和打印 Microsoft Wor ...
web打印页眉页脚_Web设计中页眉和页脚的20种创意组合
到目前为止,我们已经看到了数十个(如果不是数百个)展示创意页眉和页脚的展示. 使用当今可用的工具,创建精美的标题并不困难. 但是,要制作一个与页脚很好地结合在一起的花式页眉,需要无缝的过渡和视觉感知, ...
取消web浏览器打印页眉和页脚
近期碰到了一个关于打印插件 jquery.print.js 页眉.页脚的设置问题在网上搜索了很多资料发现这个插件的配置方法很少基本上都是用的js 的方法来取消,照着上面说的试了很久还是没有效果, ...
论文页眉奇偶页不同怎么设置_怎样设置Word页眉页脚奇偶页不同？
来自Excel之家,侵联系删有伙伴问,怎么设置满足下列要求的页眉页脚: 页眉要求正文部分偶数页居中对齐为"XXXX毕业设计(论文)",奇数页居中对齐是各章章名:字体采用宋体5号. ...
多份word合并保留不同页眉_如何给Word设置不同页眉和页脚？
我们在编辑Word文档时,有时需要设置不同的页眉,或每一页的页眉和页脚都各不相同,分别要用哪些功能键实现呢?用极速写作又是如何操作的呢?一起来学习下吧. 一.如何添加和删除页眉页脚 1.用极速写作打开 ...
wps纸张大小设置成A4_word2010页面设置：手把手教你添加页眉、页脚、页码、边框和底纹...
word 2010是目前office应用里最常用的了,那么基础的入门知识你都会了吗? 今天就来手把手教大家进行简单的页面设置. 1．添加页眉.页脚页眉位于页面的顶端,页脚位于页面的底端,它们不占用正 ...
Word学习笔记：P6-文档封面、页眉、页脚设置
文章目录一.文档封面设计二.页眉.页脚设置一.文档封面设计今天我们需要插入一张图片作为封面,此时我们需要将第一页空出来.有的人会将鼠标移动到第一页标题的开头,然后一直按Enter键,直到第一页 ...

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

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

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

最新文章

热门文章