如何实现html5+css3中的布局与Header-创新互联

今天就跟大家聊聊有关如何实现html5+css3中的布局与Header，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

创新互联成立于2013年，是专业互联网技术服务公司，拥有项目成都网站建设、网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元黄梅做网站,已为上家服务,为黄梅各地企业和个人服务,联系电话:18980820575

我们在手机上布局一般是这个样子的：

如何实现html5+css3中的布局与Header

其中头部对整个mobile的设计至关重要，而且坑也很多：

① 一般来说整个header是以fixed布局，fixed这个产物在移动端来说本身坑就非常多

② 在Hybrid应用中，Header很多时候扮演了不一样的角色，首先要完成以webview(window)为容器的功能，又要调用native提供的接口

Hybrid中Header的实现往往是一个难点，主要原因是同一套接口，要保证H5站点与native处于不一样的环境调用相同的接口，完成不同的功能

③ 若是Hybrid中采用native提供的头会导致mask不能全屏遮盖，并且Header定制会变难；但是在Hybrid中采用H5提供的Header的话，万一js报错，便会导致毁灭性的假死，用户除了关闭进程，就出不来了

PS：这里以一个简单的a标签便可以解决js错误导致的假死问题，这里与我们今天的内容无关，不予扩展

显然，以上的内容与今天的文章没有一毛钱关系，我们今天的主要内容是：

用float于Flexbox两种方式实现我们的Header

小钗初学CSS有很多不足，理解也有错误，请您指正，并且感谢左盟主的指导

CSS3的布局

CSS的布局的演化

最初的布局主要依赖于表格，表格主要的问题是：

① 不灵活

② 效率低，要整个渲染结束才会显示

发展到CSS2.X系列，div+css的说法大行其道，很大程度上说，布局对重构来说，变得比较简单，但是由于块级元素的特性，多列布局仍旧让人很头疼

div不能多列，span什么的又不适合作为布局元素，于是多列布局一般采用float实现，使用float就要清楚浮动

偶尔多列布局会使用定位属性（事实上大范围的布局推荐定位元素），但是小范围的绝对定位会不太灵活

CSS3中引入了一些新的布局机制，显然在PC浏览器中不适合，但幸运的是我是移动前端，所以不存在！！！

CSS3盒模型-box-sizing

盒模型的概念我这里不再赘述，在浏览器中，元素都会被当做一个盒模型，CSS3中新增了一些概念对盒模型进行了补充

我们在实际工作中经常会出现这样的代码，从而引起元素溢出，并导致横向滚动条：

代码如下:

因为对容器元素来说，他的高度只有100px（事实上他这里还有2px的border，实际占据102px）

所以说，即设置width，又设置margin等属性，直接导致其真实width溢出了，但是块级元素本身就是100%铺开的，这里不用设置

但是很多时候，我们又会设置，往往导致什么横向滚动条什么的BUG，为了解决这个问题，CSS3提出了一个box-sizing特性

② border-box，此属性的设置后，会表现与IE7表现一次，如果设置了width、margin等值，width会被重置，margin仍然会产生影响

Blade Demo .fl { float: left; } .fr { float: right; } .tc { text-align: center; } span { display: inline-block; color: #099fde; } 后退更多首页我是标题

CodePen - A Pen by ericlva

Blade Demo * { box-sizing: border-box; font-size: 12px; } .flex { display: flex; } .flex > div { width: 50px; height: 40px; }

项目一

项目二项目三

项目四

Blade Demo body, button, input, select, textarea { font: 400 14px/1.5 Arial, "Lucida Grande" ,Verdana, "Microsoft YaHei" ,hei; } body, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h6, h7, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; } body { background: #f5f5f5; } ul, ol { list-style: none; } h2, h3, h4, h5, h6, h7 { font-size: 100%; font-weight: 500; } h2 { font: 600 1.286em/2 Tahoma; } h2 { font: 600 1.286em/2 Tahoma; } h3 { font: 600 1.143em/2 Tahoma; } h4 { font: 600 1em/1.5 Tahoma; } address, cite, dfn, em, var, i { font-style: normal; font-weight: 400; } body { padding: 10px; } h2 { font-size: 18px; } h2, h3, h4 { line-height: 2; font-weight: normal; } .fl { float: left; } .fr { float: right; } .tc { text-align: center; } .cui-header { height: 44px; line-height: 44px; background-color: #099fde; color: #fff; } .cui-header > span { width: 44px; height: 44px; display: inline-block; } .cui-header .cui-title { height: 44px; line-height: 44px; overflow: hidden; } .cui-icon-more { display: inline-block; width: 30px; height: 30px; line-height: 26px; vertical-align: middle; text-align: center; } .cui-icon-more::before { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background-color: #fff; box-shadow: 10px 0 #fff, -10px 0 #fff; }

home 标题

h3 { font: 600 1.143em/2 Tahoma; } h4 { font: 600 1em/1.5 Tahoma; } address, cite, dfn, em, var, i { font-style: normal; font-weight: 400; } body { padding: 10px; } h2 { font-size: 18px; } h2, h3, h4 { line-height: 2; font-weight: normal; } .fl { float: left; } .fr { float: right; } .tc { text-align: center; } .cui-header { height: 44px; line-height: 44px; background-color: #099fde; color: #fff; } .cui-header > span { width: 44px; height: 44px; display: inline-block; } .cui-header .cui-title { height: 44px; line-height: 44px; overflow: hidden; } .cui-icon-more { display: inline-block; width: 30px; height: 30px; line-height: 26px; vertical-align: middle; text-align: center; } .cui-icon-more::before { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background-color: #fff; box-shadow: 10px 0 #fff, -10px 0 #fff; }

home 标题

Blade Demo *:not(img), *:before, *:after { box-sizing: border-box; } body, button, input, select, textarea { font: 400 14px/1.5 Arial, "Lucida Grande" ,Verdana, "Microsoft YaHei" ,hei; } body, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h6, h7, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; } body { background: #f5f5f5; } ul, ol { list-style: none; } h2, h3, h4, h5, h6, h7 { font-size: 100%; font-weight: 500; } h2 { font: 600 1.286em/2 Tahoma; } h3 { font: 600 1.143em/2 Tahoma; } h4 { font: 600 1em/1.5 Tahoma; } address, cite, dfn, em, var, i { font-style: normal; font-weight: 400; } body { padding: 10px; } h2 { font-size: 18px; } h2, h3, h4 { line-height: 2; font-weight: normal; } .fl { float: left; } .fr { float: right; } .tc { text-align: center; } .cui-header { height: 44px; line-height: 44px; background-color: #099fde; color: #fff; display: flex; align-items: center; } .cui-header > span { width: 45px; height: 45px; } .cui-header .cui-title { height: 44px; line-height: 44px; overflow: hidden; width: 100%; } .cui-icon-more { display: inline-block; width: 30px; height: 30px; line-height: 26px; vertical-align: middle; text-align: center; } .cui-icon-more::before { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background-color: #fff; box-shadow: 10px 0 #fff, -10px 0 #fff; }

返回标题 home

大橙子网站建设，新征程启航

如何实现html5+css3中的布局与Header-创新互联

其他资讯