移动页面 最基本的布局

移动页面 :流动布局(各个区块的位置都是浮动的,不是固定不变的。)

栗子:HTML代码

.main {

    float: right;

    width:70%;

}

.leftBar {

     float: left;

     width:25%;

}

float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。另外,绝对定位(position: absolute)的使用,也要非常小心。还有图片的宽度和高度要按百分比来设定,千万不可以设定成固定大小。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,863评论 1 92
  • display:设置元素的显示方式 display:block(块级元素) 默认为父元素宽高,可设置宽高相对前序换...
    bluishwhiteC阅读 674评论 0 0
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,275评论 0 1
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,766评论 0 8
  • 1 昆仑雪山,有兽白泽,浑身雪白,能言人语,通万物之情,极少出没,待圣人治天下,方奉书而至。 极北寒地,有神烛龙,...
    大钱小胖阅读 1,195评论 0 8