CSS基本布局16例（原网页引自Owen Briggs）

以下布局资料原作者：Owen Briggs

单行单列

单行单列1：采用float浮在左上角，固定宽度。
单行单列2：固定在左上角，固定宽度，采用的是绝对(absolute)定位。
单行单列3：固定在左上角，不固定宽度，采用百分比(%)定义宽度来自适应页面。
单行单列4(推荐)：固定宽度，采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。

单行两列

单行两列1：两列都固定宽度。第一列浮在左上角，第二列浮在第一列右边。
单行两列2：两列都百分比宽度，但不满屏。第一列固定在左上角，第二列浮在第一列右边。
单行两列3：两列都百分比宽度，满屏。两列都采用绝对定位。
单行两列4：两列都百分比宽度，满屏。第一列浮在左上角，第二列浮在右上角。
单行两列5：两列都百分比宽度，满屏。第一列浮在左上角，第二列浮在第一列右边。

单行三列

单行三列1：左右列都绝对定位(右列定位在右上)。左列和右列固定宽度，中间列自适应页面。
单行三列2：左列定位在左上，右列定位在右上，中间列浮在左列右面。左列和右列固定宽度，中间列自适应页面。
单行三列3：三列都绝对定位。左列和右列固定宽度，中间列根据内容自适应。
单行三列4(推荐)：类似样式2，只是将margin: 20px属性增加在body样式中，解决了中间列在Netscape6.0中置顶的问题。
单行三列5：左右列绝对定位，中间列自适应。宽度满屏。

顶行三列

顶行三列1(推荐)：顶行自适应页面宽度。左右列绝对定位，中间列自适应页面。
顶行三列2：宽度满屏

转载于:https://www.cnblogs.com/likaixuan/p/4388258.html

CSS基本布局16例（原网页引自Owen Briggs）相关推荐

css弹性布局自动换行怎么实现,网页设计常用布局之CSS弹性布局
#网页设计#在网页设计中内容的排版和布局往往是整个设计工作的重点和难点,如果能熟练掌握CSS弹性布局的话,无论是页面的整体设计还是局部内容的布局,都能起到事半功倍的效果.尤其是对非专业的或刚开始从事前 ...
css什么是自适应布局,css 自适应布局阮一峰
转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...
Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局语音编辑锁定讨论上传视频上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
dreamweaver cs5 css教程,网页设计与制作——Dreamweaver CS5标准教程第12章 CSS+Div布局.pptx...
第12章 CSS+Div布局;1. 盒子模型2. 布局技术3. "上中下"布局4. "左中右"布局;12.1.1盒子结构网页中元素都占据一定的空间,除了元素内容 ...
CSS：CSS+DIV布局网页
现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...
DIV布局旅游出行网站设计——武汉旅游(11页) HTML+CSS+JavaScript dreamweaver作业静态HTML网页设计模板
HTML5期末大作业:旅游出行网站设计--武汉旅游(11页) HTML+CSS+JavaScript dreamweaver作业静态HTML网页设计模板常见网页设计作业题材有个人. 美食. 公司. ...
DIV布局——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业静态网页
HTML5期末大作业:化妆品商城网站设计--化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业静态网页文章目录 HTML5期末大作业:化妆品商城网站设计--化妆品 ...
CSS 主流布局进阶
CSS 主流布局进阶前言一.CSS 还原 UI 设计 1.Photoshop 还原 UI 设计 (1)PhotoShop 下载安装 (2)添加辅助线 (3)尺寸.文字.颜色等信息的获取 (4)切图 ...

CSS基本布局16例（原网页引自Owen Briggs）

单行单列

单行两列

单行三列

顶行三列

CSS基本布局16例（原网页引自Owen Briggs）相关推荐

最新文章

热门文章