开始python之前~对移动端布局的一些理解

好吧,最近我写了很多移动端的页面!!!然后一个写的感觉还不错!一个不知道状态不对还是什么的写到最后~尽管写完了但是超级不满意

我总结了是我已经神游物外了~能让我这种心静似高山不动,美丽与智慧并存,英雄与侠义化身(省略100个字)程序猿~心绪不定的么~~~~也就一件事了

 

我估计网上对移动端的总结么,多了去了。。。然后我简单的写下我平时写代码时的风格。。。当然只是喜欢,可能有的人觉得不喜欢,当然不强求

这个是我写的比较标准的~~~

 

 

复制代码
.wapper {
    bottom: 0;
    height: 100%;
    left: 0;
    margin: 0 auto;
    max-width: 720px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
}
.header {
    height: 3em;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.content {
    bottom: 0;
    height: 100%;
    overflow-y: scroll;
    position: absolute;
    top: 0;
    width: 100%;
}

.footer {
    background-color: #fabd00;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 1;
}
复制代码

这个是我比较写的风格,当然有人觉得不好的话,那青菜萝卜各有所爱吧。。。不强求改变一个人喜欢

我这样布局,当然有属于我的理由,

1:这样可以在安卓4.0一下弥补对fixed的支持!!!有无数面试官或者人问我,你这样写的优势,或者其他,我总是会说以前写的时候遇到的一个小笑话。。。因为我写移动的页面特别早-_-//那个时候我记得我用的三星的安卓2。0的...那个时候fixed和absolute实际上没多大差别。。。最后我用了解决ie6 _absolute方法

top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));

解决了固定

 

2.怎么说呢,我感觉干净了吧,。。全屏100%控制起来看着确实挺累的,挺心塞!720px实际上差不多。。。当然pad么再放大吧

 

3么

 

 

这个底部为什么我总觉得有种哔了狗的冲动!!!!而且很难加拓展比如浮动的底部上面要加点什么时候

 

 

然后么圣杯布局,的一些控制

 

em的灵活使用   

body { font: 1em/1.25em Microsoft Yahei; }

 

 

去除浏览器的点击出现的框

a { -webkit-tap-highlight-color: rgba(240,240,240,0); }

span { -webkit-tap-highlight-color: rgba(240,240,240,0); }

input { -webkit-tap-highlight-color: rgba(240,240,240,0); }

img { -webkit-tap-highlight-color: rgba(240,240,240,0); display: inline-block; }

 

去除浏览器对button的默认样式,,,水果手机专属

input{-webkit-appearance:none;}

 

 

 

发基本PDF的书吧。。。都是别人发过来的。。。

 

angularJS的中文版

http://pan.baidu.com/s/1qXtPCkO

犀牛书第6版

http://pan.baidu.com/s/1o7hI7Aq

JavaScript面向对象编程指南

http://pan.baidu.com/s/1Ninng

 

好了~本白开始看python咯~~~

 

posted @   一点点白  阅读(692)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示