可能可能项目中的布局还是比较的简单,以前写过一篇调研性质的layout相关的文章:探究页面布局之960的概念是否还存在
作为新的布局研究专题的第一篇还是看看这样一种布局:
左右各占25%,中间(主体内容)占50%,宽度自适应(外容器铺满)
先看看效果图:
直接上代码吧:
<div id="container">
<div id="wrapper">
<!-- 中间content start -->
<div id="content">
content
</div>
<!-- 中间content end -->
</div>
<!-- 左侧navigation start -->
<div id="navigation">
navigation
</div>
<!-- 左侧navigation end -->
<!-- 右侧extra start -->
<div id="extra">
extra
</div>
<!-- 右侧extra end -->
</div>
css部分: (没有包含reset的部分)
#wrapper{float:left;width:100%;}
#content{margin:0 25%;}
#navigation{float:left;width:25%;margin-left:-100%;}
#extra{float:left;width:25%;margin-left:-25%;}
- 大小: 7.1 KB
分享到:
相关推荐
假设高度已知,请写出三栏布局,其中左右宽度均为300px,中间自适应。 看了上面的题目,有经验的人也许会觉得很简单,仔细想想,如果我们来写,能写出几种方案呢?一般都会想到两种吧,float和position定位,其实...
高度基于标准CSS API的自适应React Flexbox(CSS灵活框布局模块)网格系统。 特征 简单API基于 ,无需学习新语法。 使用自定义生成的组件样式 根据响应断点轻松更改网格设置 安装 yarn add react - flexa 用法 ...
自适应布局站点示例 我的自适应布局网站“ Willberries”示例。 技术栈 html + bootstrap; css; js + swipper。 该项目只是没有困难功能的示例。
响应式设计目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念。在这先说明下这两者的异同:自从移动终端飞速发展以来,各种各样的机型突飞猛进,...
左右两端固定,中间自适应 双飞翼布局 双飞翼布局,属于主标签在前面的自适应三栏布局,解决了圣杯布局的主宽度必须大于aside的问题。 圣杯布局 瀑布流布局 其他UI效果 商品列表 图片商品列表(可以加载) 初步轮播 ...
在页面布局(layout)时经常是上左右的框架布局并且需要宽、高度的自适应,div+css是无法实现(*hegz: div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要js来辅助。 主要通过 jQuery....
在jQuery EasyUI中,如果直接在form上布局时当窗口大小调整布局不会改变,将布局应用于body时中间隔着一个form,横竖不好弄。 网上有多个解决方案,一般都是写代码,在窗口大小改变时设置布局。 经实验,新版本的...
我们不妨假定这样一个布局:高度已知,其中左栏、右栏宽度各为300px,中间自适应,可以通过几种方法来实现?以及各自的优缺点是什么? 本文源代码请猛戳三栏布局源码,欢迎star和fork 一、浮动布局 <!DOCTYPE ...
自适应布局导航 FlexLayout.html FlexLayout.html 自适应相册 FlexAlbum.html FlexAlbum.html 自适应 UI 设计 FlexCard.html FlexCard.html 荧光边框 GradientBorderEffects.html GradientBorderEffects.html 登录页...
Justify 是一个实现元素两端自适应对齐、均分宽度布局的javascript控件。控件对最后一行对齐做了处理,使最后一行的元素能居左依次与上一行的元素垂直对齐,并支持去除部分DOCTYPE下最后一行产生的空隙。控件为移动...
+2009-08-25 v2.0.7 -为按钮增加DisableControlBeforePostBack属性 - 回发之前是否禁用按钮,防止重复提交 - 默认为true。 -Grid的Values属性访问限制由internal改为public,这就意味这可以自由改变Grid中每个...
+2009-08-25 v2.0.7 -为按钮增加DisableControlBeforePostBack属性 - 回发之前是否禁用按钮,防止重复提交 - 默认为true。 -Grid的Values属性访问限制由internal改为public,这就意味这可以自由改变Grid中每个...
(3)针对页面自适应问题,本文结合渐进增强以及拥抱流式布局的思想,同时研究利用了移动设备的视口特性,实现跨分辨率、跨设备的页面自适应。 (4)针对系统的功能实现问题,通过结合利用原生态框架与HTML5的跨平台...
CSS 布局演示 CSS Layout by Forestgan 2006-11-1 发表 三列自适应宽度液态布局│Three Column Liquid Layouts Internet Explorer 7 对CSS的兼容–Box Model Changes 未知大小的图片在一个已知大小容器中的...
11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout ...
9.4.13 自适应布局:ext.layout.container.abstractfit与ext.layout.container.fit / 456 9.4.14 卡片布局:ext.layout.container.abstractcard与ext.layout.container.card / 456 9.5 标签面板 / 458 9.5.1 ...
11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 列布局——ColoumnLayout 11.1.5 锚点布局——AnchorLayout 11.1.6 自适应布局——FitLayout ...
为不同的分辨率实现了自适应布局。 首先,我们的目标是使每个人都对美丽感到震惊。 页面设计基于界面的平滑性和响应性原理,着陆页的所有交互元素均采用动画处理。 当您在播放器中切换音轨时,页面的背景会改变,这...