转自:http://www.css3china.com/?p=256
文章中还有几个链接介绍负margin
记得曾经做过这样的一个面试题,面试题要求如下:
- 相册空间\硬盘空间的进度条,考虑百分比的控制;
- 左中右三栏等高,整个页面的宽度不固定,左右宽度固定,中栏自宽度适应,论坛的文章标题也自适应宽;
- 加“…”的地方,考虑过长溢出省略处理;
- 假如这是一个访问PV达2000W/日,因成本限制,网络带宽可能满足不了此访问量,会出现滞连情况,样式文件可能加载不了,且中栏内容是最重要且要呈现在用户眼前的。(也就是说,在无样式不完全加载情况下,中栏内容要优先左右两栏前);
- 关注标签语义化;
- 关注提交的页面原型便于团队合作,开发实现;
- 关注HTTP请求和带宽消耗所带来的体验和成本。
这几点要求中,除了考察一个网页的标签语义化、页面性能、开发技巧以外,页面三栏等高布局、中间列优先加载应该算是开发过程当中的整个核心思路和决定整个页面成败的关键点。
关于三栏等高布局,网上已经有了举不胜举的实现方法和思路,且不说这些思路的好与坏,大家可以百度百度、谷歌谷歌,自作评价。
个人觉得各大互联网公司做的比较好的三栏或者是两栏布局有以下几个站点:
当然两栏或三栏布局,目前在各互联网网站应用的实例非常之多,就不在此一一列举。
在所有的这些案例当中,应用最多的一个css属性非margin莫属了,margin的值为“负值”。
有关margin负值,这里有篇经典文章:
想必看完这篇文章,大家已经对负边距有了更深一层次的认识。
于是得到了以下计算公式:
Margin负边距 + 三栏等高布局 + 中间列优先加载 = 圣杯布局(业内盛传的布局概念)的一部分。
在三列等高中间列优先加载的实现过程当中,尝试再尝试,最终沉淀出了以下“非公认的优秀代码”:
html:
<!–头部 start–>
<header>header</header>
<!–头部 end–>
<!–主体内容 start–>
<div class="main_1">
<div class="main_2">
<div class="main_3 cf">
<!–中间列 start–>
<section class="content">
<ul>
<li class="">
<a href="#">测试内容www.css3china.com</a>
</li>
<li class="">
<a href="#">测试内容www.css3china.com</a>
</li>
<li class="">
<a href="#">测试内容www.css3china.com</a>
</li>
</ul>
</section>
<!–中间列 end–>
<!–左侧边栏 start–>
<aside class="aside_l">
aside_l
</aside>
<!–左侧边栏 end–>
<!–右侧边栏 start–>
<aside class="aside_r">
aside_r
</aside>
<!–右侧边栏 end–>
</div>
</div>
</div>
<!–主体内容 end–>
<!–底部导航版权 start–>
<footer>footer</footer>
<!–底部导航版权 end–>
</div>
css:
html, body{height:100%;line-height:22px;color:#333;-webkit-text-size-adjust:none;}
body{height:100%;background:#fff;min-width:600px;font:16px '微软雅黑',Arial,Helvetica,sans-serif;}
img, a img, input{vertical-align:middle;}
img, a img, button {border:0;cursor:pointer;}
input, textarea{outline:none;-moz-outline:none;}
table, td ,th, tr{border-collapse:collapse;border:0;}
ul, ol, li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px;}
a{color:#333333;text-decoration:underline;}
/*****清除浮动*****/
.cf:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;}
.cf{display: inline-table;}
* html .cf{height:1%;}
.cf{display: block;}
/*****头脚****/
header, footer{height:44px;background:#555555;line-height:44px;text-align:center;color:#FFFFFF;}
/*****三栏布局*****/
.main_1{background:#666666;padding-right:170px;}
.main_1 .main_2{background:#666666;padding-left:180px;}
.main_1 .main_3{background:#999;position:relative;}
.content, .aside_l, .aside_r{height:100%;float:left;position:relative;text-align:center;}
.aside_l, .aside_r{line-height:50px;}
/*****中间列*****/
.content{width:100%;}
.content ul{padding:10px;font-size:14px;line-height:22px;}
/*****左栏*****/
.aside_l{width:180px;left:-100%;margin-left:-180px;}
/*****右栏*****/
.aside_r{width:170px;margin-right:-170px;}
同理在开发移动端webapp时,我们同样需要面对各种布局以适应不同的产品需求,例如:上中下布局,曾经就是让重构头疼的一个问题。
关于webapp上中下布局,白树给我们整理一篇非常有料的文章:
怎么样,是不是像打了鸡血一样兴奋,再也不用发愁移动端布局的事了!
接下来我为大家介绍一种新的实现移动端“上中下布局”的简单思路,同理于圣杯布局(margin负边距的巧妙应用)。
html:
<header class="header">header</header>
<section class="main">
<div class="wrapper" id="wrapper"><!– iscroll 容器 –>
<div class="con"><!– iscroll 滚动层 –>
<ul class="list">
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
<li><a class="" href="#">测试内容www.css3china.com</a></li>
</ul>
</div>
</div>
</section>
<footer class="footer">footer</footer>
</div>
css:
html, body{height:100%;line-height:22px;color:#333;-webkit-text-size-adjust:none;}
body{height:100%;background:#fff;min-width:600px;font:16px '微软雅黑',Arial,Helvetica,sans-serif;overflow:hidden;}
img, a img, input{vertical-align:middle;}
img, a img, button {border:0;cursor:pointer;}
input, textarea{outline:none;-moz-outline:none;}
table, td ,th, tr{border-collapse:collapse;border:0;}
ul, ol, li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px;}
a{color:#333333;text-decoration:underline;}
.container{height:100%;}
.header{background:#555555;height:44px;position:relative;z-index:100;line-height:44px;text-align:center;color:#FFFFFF;}
.main{background:#999999;height:100%;margin:-44px 0;padding:44px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.wrapper{height:100%;overflow-y:auto\9;position:relative;}
.wrapper .con{padding:10px;}
.footer{background:#555555;height:44px;margin-top:-44px;position:relative;z-index:100;line-height:44px;text-align:center;color:#FFFFFF;}
代码中标红代码为针对IE做的兼容,webkit内核使用iscroll插件实现滚动,IE使用浏览器默认滚动!
注意点:main的高度必须为整个网页的高度,即为height:100%,所以需要继承容器container{height:100%}的高度,container继承body{height:100%;}的高度,以此类推。
最终使用margin负值和relative、z-index设置元素的位置和层级关系。从而使用纯css实现了不用css3、不专门针对IE做特殊兼容处理的移动端“上中下布局”。
相关推荐
一个移动端 H5 Video 标签播放视频的实现
移动端H5上下滑屏翻页demo,本人已做优化,直接在分页内添加内容,就可以看到每页翻页的内容,自适应屏幕大小,直接可上项目
移动端H5前端设计项目源码
手摸手,带你实现移动端H5瀑布流布局.doc
自定义一个h5页面,实现可以横屏手写电子签名的功能,且支持回显(图片可以转化为签字版的canvas,且支持在此基础上继续进行手写签名)由于uniapp微信小程序支持横竖屏切换配置,但是移动端h5不支持。自定义一个h5...
移动端H5页面设计实战.docx移动端H5页面设计实战.docx移动端H5页面设计实战.docx移动端H5页面设计实战.docx移动端H5页面设计实战.docx移动端H5页面设计实战.docx移动端H5页面设计实战.docx移动端H5页面设计实战.docx...
12套 HTML5移动端网页app模板h5前端设计代码手机自适应(商城、订餐、招聘等) 整套 : 移动端模板: html+css+js 下载浏览器打开即可运行浏览,完整的业务流程界面,完整的图片资源。 微信公众号、小程序webview 都...
比较好的移动端h5框架
干货,下载不后悔。 一个移动端H5的UI框架,我花钱买的。
基于原生HTML+JS开发的商城类移动端H5应用模板,内含主页、分类页、购物车、个人中心四大导航,还有支付相关功能,共包含30余个界面。
我的博客《移动端H5实现搜索框样式》源码,欢迎批评指教 博客地址:https://blog.csdn.net/chengbao315/article/details/105549541
主要介绍了JS移动端/H5同时选择多张图片上传并使用canvas压缩图片,需要的朋友可以参考下
基于vue3和ts的移动端H5项目模板,开箱即用.zip
移动端在浏览H5网页时,经过一段时候后系统会黑屏,手机进入休眠模式。NoSleep插件旨在让任何Android ,iOS浏览器进入休眠状态,保持屏幕常亮。
基于HBuilder X移动端h5毕业设计作品集源码。 熟悉了利用hx h5+的开发转uniapp基本不用再考虑开发工具了,相同血脉几乎相同的套路,曾经的h5+也可以直接混入使用当然仅限APP端。 HBuilderX 版本 编译模式:自定义...
基于Javascript的移动端rem布局的解决方案,小巧灵活的代码,简洁流畅
移动端h5 商品列表点击,飞入页面固定位置。数据结构采用jquery,vue。
移动端H5滑屏网页,上滑屏,动态翻页,有背景音乐,点击可开关。
移动端h5打开pdf项目源码。基于pdf.js和jQuery,可手势捏合缩放,分段加载,支持canvas和svg两种渲染pdf模式,不支持本地绝对路径,支持相对路径和网络路径,支持ajax和fetch两者请求方式。在Android和IOS的webview...
h5移动端树列表