`

网页布局CSS技巧-Web设计必知

阅读更多
1、两列布局

1.1、左列固定,右列自适应
#left{    width:190px; float:left; }
#right{    margin-left:205px; }

1.2、右列固定,左列自适应
#left{    float:left; width:100%; }
#right{    float:left; margin-left:-100px; width:100px; }

2、三列布局

2.1、左右宽度固定,中间自适应
#left{ float:left; width:200px; }
#middle{ margin:0 210px; }
#right{ float:right; width:200px; }



2.2、中间宽度固定,左右自适应

这个有点复杂,有必要先贴html

<div class="wrap">
  <div class="left">
  <div class="leftWrap">left左列</div>
  </div>
  <div class="right">
    <div class="rightWrap">right右列</div>
  </div>
  <div class="center">Center</div>
</div>

css样式:

.wrap{position:relative;overflow:hidden;width:100%}
.left{float:left;width:50%;margin-left:-400px;padding-left:200px; }
.leftWrap{margin-left:200px;background:#aaa;}
.right{float:right;width:50%;margin-right:-400px;padding-right:200px;}
.rightWrap{margin-right:200px;background:#aaa;}
.center{position:absolute;left:50%;margin-left:-200px;width:400px;background:#eee;}

3、上中下三行布局


html { height:100%; }
body { height:100%; }

/*如需满屏,则对html和body都设置height:100%*/

#top { position:absolute; left:10px;top:0px;right:10px;height:50px;}
#main { position:absolute; left:10px;top:60px;bottom:60px;right:10px;overflow:auto;}
#bottom { position:absolute; left:10px; bottom:0px; right:10px; height:50px;}xi

/*IE6下*/

#top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
#main { *height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
#bottom { *height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
分享到:
评论

相关推荐

    变幻之美DivCSS网页布局揭秘-案例实战篇源码

    在Web开发领域,Div+CSS布局是构建高效、可维护、响应式网站的基础,它能够帮助开发者实现灵活多变的页面设计,提升用户体验,并优化网页的加载速度。 首先,Div(Division)元素是HTML中的一个块级元素,常用于对...

    Web前端网页设计作业-个人网页(html+css+javascript)

    在这个个人网页设计中,CSS可以用来设置字体、颜色、背景、边距、布局等,以实现美观的效果。CSS3提供了许多新的选择器(如伪类、属性选择器)、过渡和动画效果、以及响应式设计的媒体查询等,使得设计更加灵活和...

    精品网页设计CSS模板-精品 展示 大气 设计 产品 Gallery 淡黄色 棕色 web20 整体色 漂亮.rar

    网页设计中的CSS(Cascading Style Sheets)是用于控制网页元素样式和布局的重要技术,而一个优秀的CSS模板能够极大地提升网站的整体视觉效果和用户体验。"精品网页设计CSS模板-精品 展示 大气 设计 产品 Gallery 淡...

    HTML+CSS网页设计与布局从入门到精通

    《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...

    div+css网页布局设计模板源代码

    在网页设计领域,`div+css`是一种广泛采用的布局技术,它将内容与样式分离,使得网页结构清晰,易于维护。本主题聚焦于“div+css网页布局设计模板源代码”,我们将深入探讨这一主题,了解相关知识点。 1. **Div元素...

    Web标准网页布局书中源代码

    在互联网世界中,Web标准网页布局是构建高效...以上就是"Web标准网页布局"这一主题中的关键知识点,这些内容通常会出现在相关书籍的源代码中,帮助开发者学习并掌握构建高效、美观且具有良好用户体验的Web页面的技巧。

    html css javascript web网页设计案例大全

    "html css javascript web网页设计案例大全"是一个集合了这三个核心技术的经典案例及教程资源,对于学习和提升Web前台技能具有极高的价值。 1. HTML(HyperText Markup Language):是网页内容的结构标准,用于定义...

    精通CSS--高级Web标准解决方案1下

    《精通CSS——高级Web标准解决方案》是一本深入探讨CSS(层叠样式表)技术的专业书籍,旨在帮助读者提升在Web设计中的技能水平。该书的第二部分,即“1下”,可能涵盖了更高级和复杂的CSS概念,以实现更加精美的网页...

    CSS那些事儿:掌握网页样式与CSS布局核心技术-书签扫描版

    《CSS那些事儿:掌握网页样式与CSS布局核心技术》是一本深入探讨CSS技术的书籍,旨在帮助读者精通网页设计中的样式控制和布局构建。CSS(层叠样式表)是Web前端开发的重要组成部分,它使得网页内容呈现出丰富的视觉...

    精通CSS--高级Web标准解决方案1(上)

    通过学习《精通CSS——高级Web标准解决方案1》,读者可以深化对CSS的理解,提升网页设计技巧,从而创建出美观、高效且易于维护的网页。无论你是初学者还是有经验的开发者,这本书都将成为你探索CSS世界的宝贵工具。

    CSS禅意花园-Web视觉设计的王者之书

    ### CSS禅意花园—Web视觉设计的王者之书 #### 关键知识点概览: 1. **Web设计的历史与发展** - 早期Web设计的特点及挑战。 - 浏览器之战与私有扩展的影响。 - Web标准项目的成立及其意义。 2. **HTML与CSS的...

    精通CSS--高级Web标准解决方案2

    4. **CSS布局技术**:涵盖流体布局、网格系统、Flexbox和Grid布局等现代布局方法,帮助读者实现灵活多变的网页设计。 5. **响应式设计**:随着移动设备的普及,响应式设计成为必备技能。书中会介绍媒体查询、流体...

    专业css-Cascading-Style-Sheets-for-Web-Design-Wrox-Professional-Guides(英文原版)

    通过阅读本书,读者可以了解到CSS在现代网页设计中的重要作用,并学会如何运用各种技巧和工具来提高工作效率和设计质量。无论是对于希望掌握CSS核心技术的专业人士还是对于想要深入了解网页设计的学生来说,这本书都...

    精通CSS--高级Web标准解决方案4

    通过学习《精通CSS——高级Web标准解决方案4》,读者不仅可以深化对CSS的理解,还能掌握最新的技术趋势,提高自己的网页设计和开发能力。配合提供的图片资源,如精通css_160.jpg到精通css_180.jpg等,这些视觉辅助...

    超越CSS:Web设计艺术精髓 transcending css the fine art of web design

    它不仅涵盖了基础的CSS概念,更深入到高级设计技巧,帮助设计师们提升网页布局的艺术性和功能性。下面,我们将详细探讨书中涉及的一些关键知识点。 1. **浮动(Floats)**:CSS中的浮动是网页布局中的基本概念,它...

    CSS网站布局实录 基于Web标准的网站设计指南(第二版)-part1

    ),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国的Web应用技术团队,顶尖Web设计师和Web应用开发人员的完整...

    精通CSS--高级Web标准解决方案(part2)

    在Web开发领域,CSS是实现网页设计与布局不可或缺的一部分,它使得HTML内容可以呈现出丰富的视觉效果和响应式布局。 在Part2部分,这本书可能涵盖了以下几个关键知识点: 1. **选择器的高级用法**:CSS的选择器远...

    css网站布局实录-2

    5. **圆角与阴影**:CSS3引入了圆角边框(border-radius)和阴影(box-shadow)特性,使得网页设计更具现代感。书中会详细阐述如何利用这些特性创建美观的UI元素。 6. **浏览器兼容性**:考虑到实际开发中需要考虑...

    CSS网站布局实录 基于Web标准的网站设计指南(第二版)-part2

    ),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国的Web应用技术团队,顶尖Web设计师和Web应用开发人员的完整...

Global site tag (gtag.js) - Google Analytics