CSS基本布局16例

简介:
< DOCTYPE html PUBLIC -WCDTD XHTML TransitionalEN httpwwwworgTRxhtmlDTDxhtml-transitionaldtd>
单行单列
  • 单行单列 单行单列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:宽度满屏 
  • 本文转自 netcorner 博客园博客,原文链接:http://www.cnblogs.com/netcorner/archive/2007/01/03/2912446.html  ,如需转载请自行联系原作者
相关文章
|
17天前
|
前端开发 开发者 UED
解锁网页布局的秘密武器:探索 CSS Grid 布局的神奇魔力
解锁网页布局的秘密武器:探索 CSS Grid 布局的神奇魔力
21 3
|
24天前
|
前端开发 容器
《CSS 简易速速上手小册》第2章:CSS 布局与定位(2024 最新版)
《CSS 简易速速上手小册》第2章:CSS 布局与定位(2024 最新版)
21 2
|
1月前
|
前端开发 开发者 容器
彻底学会CSS grid网格布局
【4月更文挑战第1天】 彻底学会CSS grid网格布局
17 0
|
16天前
|
UED 开发者 容器
【专栏】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计
【4月更文挑战第27天】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计。其特点包括灵活性、响应式和易理解,通过主轴和交叉轴控制元素排列对齐。核心概念有容器和项目,常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向,justify-content和align-items控制对齐,flex属性调整项目伸缩,order改变排序。在实践中,要关注响应式、代码维护和浏览器兼容性,以优化布局和用户体验。
|
1月前
|
前端开发 开发者 容器
彻底学会CSS 弹性布局flex
【4月更文挑战第1天】 彻底学会CSS 弹性布局flex
18 0
|
13天前
|
前端开发 UED
【专栏:HTML与CSS实战项目篇】创建一个具有复杂布局的电商详情页
【4月更文挑战第30天】构建复杂布局的电商详情页涉及页面结构规划、样式设计和交互效果实现。首先规划顶部导航栏、商品图片展示区、商品信息区、用户评价区和相关商品推荐区。在样式设计上,注重色彩搭配、字体选择、布局与间距及图片处理。交互效果包括图片放大、添加到购物车按钮、滚动监听和评论互动,以提升用户体验。实际开发中需考虑跨设备兼容性和用户体验优化。
|
13天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
13天前
|
前端开发 UED 容器
【专栏:CSS进阶篇】CSS Grid布局:构建复杂的二维布局
【4月更文挑战第30天】CSS Grid布局是二维布局系统,适用于复杂页面结构,如页眉、主体和侧边栏。通过定义网格线和单元格,能轻松创建行和列。基本语法包括设置容器为grid容器,定义`grid-template-rows`和`grid-template-columns`。高级特性包括命名网格线、网格区域、网格间隙、重复网格线和自动填充。在实际应用中,CSS Grid能有效提升开发效率和用户体验,尤其在响应式设计和复杂布局场景下。
|
13天前
|
前端开发 开发者 容器
【专栏:CSS进阶篇】CSS Flexbox布局:实现灵活的响应式设计
【4月更文挑战第30天】CSS Flexbox是现代网页设计中创建响应式布局的关键工具,它提供了一种一维布局模型,使元素能灵活适应各种屏幕尺寸。通过设置容器的`display`属性为`flex`,开发者可以利用主轴和交叉轴调整元素排列和对齐方式。核心概念包括弹性项、伸缩性、空间分配和对齐。通过实例,如导航栏、卡片布局、图片画廊和响应式表单,展示了Flexbox在实现响应式设计中的应用。尽管需要注意浏览器兼容性,但掌握Flexbox能帮助开发者构建出功能强大且适应性强的界面。
|
13天前
|
前端开发 开发者 容器
【专栏:CSS基础篇】CSS定位与布局:从静态到浮动、定位
【4月更文挑战第30天】本文介绍了CSS定位与布局的基础,包括静态、相对、绝对、固定定位以及浮动。静态定位遵循HTML顺序,相对定位可在正常位置基础上偏移,不占用额外空间。绝对定位基于最近已定位祖先元素定位,脱离文档流。固定定位相对于浏览器窗口定位,无视页面滚动。浮动用于文字环绕图片等,可能导致父元素高度塌陷。Flexbox布局提供更灵活的元素排列和对齐方式,适配各种复杂布局需求。理解并掌握这些布局技术能提升网页设计的灵活性和响应性。