码迷,mamicode.com
首页 > Web开发 > 详细

仿照Div.IO做的一个网页

时间:2015-05-30 10:45:38      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:

  1. 总结

  Div.IO是一个响应式的网页,对布局要求特别高,其中用到的是(1、左边固定右边自动随浏览器大小缩放,2、中间固定两边缩放,3、所有块随浏览器自动缩放),有些布局我平时很少用上,在这次做的过程中,布局是非常重要的,我总结了一下,一般常用的有一下布局

  • 左自动+右固定
  • 右自动+左固定
  • 中自动+两边固定

     这三种,关键词:{自动:block+margin,固定:float},这是我的方案。大家也可以写出自己的方案。

  • 两边自动+中固定

    关键词:block+margin

  • 所有都自动

   关键词:float+width+%

  • 包围固定高宽

    关键词:float:(固定高宽)+block

    通过这种做的过程,我用上了这几种布局,大家也可以写写。

 

    响应式分布,@media screen 这个东西少不了,使用起来挺简单的。

   

    最后附加这几天的成果的图

    技术分享

 

这是最大宽度的图

 

技术分享

 

这是浏览器缩放到800的图

 

技术分享

 

这是浏览器缩到最小的图

 

这几天我做了三个页面,不一一截图了,需要源代码,可以私聊我。

这里纯属个人观点,如有出错,望大家见解。

 

     

仿照Div.IO做的一个网页

标签:

原文地址:http://www.cnblogs.com/ScauZhang/p/4539877.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!