- 浏览: 177551 次
- 性别:
- 来自: 西安
文章分类
- 全部博客 (163)
- POI (8)
- Collection容器 (1)
- java.util (2)
- java调用批处理 (1)
- xml (1)
- jfreechart (3)
- SVN (1)
- tomcat中文 (1)
- jquery (6)
- Log4j (1)
- ppt (1)
- js (48)
- ss (1)
- 综合 (1)
- Spring (2)
- 数据库 (6)
- tomcat (1)
- commons-lang包使用 (1)
- AJAX【Jquery】 (3)
- RMI (2)
- OpenLayers (25)
- html (20)
- css (25)
- Google地图 (2)
- java (1)
- Ibatis (1)
- GoogleMaps (1)
- J2EE (2)
- 软件设计 (1)
- 服务器 (1)
- html5 (4)
- cursor (1)
- AngularJs (5)
- 缓存 (1)
- 构建 (2)
- 域名、空间、服务器 (1)
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;}
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;}
发表评论
-
css属性选择器
2017-01-08 15:11 560<!DOCTYPE html> ... -
css实现div水平、垂直都能充满整个屏幕
2015-07-12 16:15 1139@charset "UTF-8"; ... -
CSS兼容IE的透明度设置
2015-06-30 07:40 709opacity:1; filter:alpha(opac ... -
clip:rect实现图片裁剪
2015-06-19 08:18 730<html> <head> &l ... -
css实现网页全屏显示
2015-05-07 07:35 658<html> <head> ... -
css sprite布局小图标
2015-04-10 01:08 653常用网页小图标加载方式: 1、 css sprite方式, ... -
js实现div拖动
2015-02-02 22:41 473写道 http://blog.csdn.net/not ... -
Js 载入时选中文字的实现代码,需要的朋友可以参考下
2014-11-26 00:09 652<script type="text/jav ... -
CSS禁止文字选择
2014-11-25 23:28 820CSS禁止文字选择 2013-01-15 1 ... -
display:inline
2014-10-28 23:53 694<!DOCTYPE html> <htm ... -
HTML5
2014-10-17 01:11 599http://www.w3schools.com/html/h ... -
CSS 平级和儿子级样式写法
2014-09-21 23:27 1750写道 input:checked+ol:这个是讲当inop ... -
html5制作loading图
2014-08-24 19:27 837<!DOCTYPE html> <htm ... -
设置网页在浏览器中的图标
2014-08-24 18:05 856<link rel="shortcut ic ... -
CSS初始化代码
2014-08-24 17:09 778为什么要初始化CSS? CSS初始化是指重设浏览器的样式。 ... -
html中meta标签实现页面自动刷新跳转
2014-08-24 17:08 967<!DOCTYPE HTML> <htm ... -
搜索框默认值处理
2014-05-20 00:44 1059<input name="keywords& ... -
自定义鼠标样式
2014-04-25 00:42 850IE版本处理 写道 http://blog.csdn.n ... -
网页代码常用小技巧
2014-04-25 00:03 16791. oncontextmenu="window. ... -
cursor style
2014-04-23 13:32 678cursor说明 写道 Cursor:url()的使用 ...
相关推荐
在Web开发领域,Div+CSS布局是构建高效、可维护、响应式网站的基础,它能够帮助开发者实现灵活多变的页面设计,提升用户体验,并优化网页的加载速度。 首先,Div(Division)元素是HTML中的一个块级元素,常用于对...
在这个个人网页设计中,CSS可以用来设置字体、颜色、背景、边距、布局等,以实现美观的效果。CSS3提供了许多新的选择器(如伪类、属性选择器)、过渡和动画效果、以及响应式设计的媒体查询等,使得设计更加灵活和...
网页设计中的CSS(Cascading Style Sheets)是用于控制网页元素样式和布局的重要技术,而一个优秀的CSS模板能够极大地提升网站的整体视觉效果和用户体验。"精品网页设计CSS模板-精品 展示 大气 设计 产品 Gallery 淡...
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
在网页设计领域,`div+css`是一种广泛采用的布局技术,它将内容与样式分离,使得网页结构清晰,易于维护。本主题聚焦于“div+css网页布局设计模板源代码”,我们将深入探讨这一主题,了解相关知识点。 1. **Div元素...
在互联网世界中,Web标准网页布局是构建高效...以上就是"Web标准网页布局"这一主题中的关键知识点,这些内容通常会出现在相关书籍的源代码中,帮助开发者学习并掌握构建高效、美观且具有良好用户体验的Web页面的技巧。
"html css javascript web网页设计案例大全"是一个集合了这三个核心技术的经典案例及教程资源,对于学习和提升Web前台技能具有极高的价值。 1. HTML(HyperText Markup Language):是网页内容的结构标准,用于定义...
《精通CSS——高级Web标准解决方案》是一本深入探讨CSS(层叠样式表)技术的专业书籍,旨在帮助读者提升在Web设计中的技能水平。该书的第二部分,即“1下”,可能涵盖了更高级和复杂的CSS概念,以实现更加精美的网页...
《CSS那些事儿:掌握网页样式与CSS布局核心技术》是一本深入探讨CSS技术的书籍,旨在帮助读者精通网页设计中的样式控制和布局构建。CSS(层叠样式表)是Web前端开发的重要组成部分,它使得网页内容呈现出丰富的视觉...
通过学习《精通CSS——高级Web标准解决方案1》,读者可以深化对CSS的理解,提升网页设计技巧,从而创建出美观、高效且易于维护的网页。无论你是初学者还是有经验的开发者,这本书都将成为你探索CSS世界的宝贵工具。
### CSS禅意花园—Web视觉设计的王者之书 #### 关键知识点概览: 1. **Web设计的历史与发展** - 早期Web设计的特点及挑战。 - 浏览器之战与私有扩展的影响。 - Web标准项目的成立及其意义。 2. **HTML与CSS的...
4. **CSS布局技术**:涵盖流体布局、网格系统、Flexbox和Grid布局等现代布局方法,帮助读者实现灵活多变的网页设计。 5. **响应式设计**:随着移动设备的普及,响应式设计成为必备技能。书中会介绍媒体查询、流体...
通过阅读本书,读者可以了解到CSS在现代网页设计中的重要作用,并学会如何运用各种技巧和工具来提高工作效率和设计质量。无论是对于希望掌握CSS核心技术的专业人士还是对于想要深入了解网页设计的学生来说,这本书都...
通过学习《精通CSS——高级Web标准解决方案4》,读者不仅可以深化对CSS的理解,还能掌握最新的技术趋势,提高自己的网页设计和开发能力。配合提供的图片资源,如精通css_160.jpg到精通css_180.jpg等,这些视觉辅助...
它不仅涵盖了基础的CSS概念,更深入到高级设计技巧,帮助设计师们提升网页布局的艺术性和功能性。下面,我们将详细探讨书中涉及的一些关键知识点。 1. **浮动(Floats)**:CSS中的浮动是网页布局中的基本概念,它...
),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国的Web应用技术团队,顶尖Web设计师和Web应用开发人员的完整...
在Web开发领域,CSS是实现网页设计与布局不可或缺的一部分,它使得HTML内容可以呈现出丰富的视觉效果和响应式布局。 在Part2部分,这本书可能涵盖了以下几个关键知识点: 1. **选择器的高级用法**:CSS的选择器远...
5. **圆角与阴影**:CSS3引入了圆角边框(border-radius)和阴影(box-shadow)特性,使得网页设计更具现代感。书中会详细阐述如何利用这些特性创建美观的UI元素。 6. **浏览器兼容性**:考虑到实际开发中需要考虑...
),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国的Web应用技术团队,顶尖Web设计师和Web应用开发人员的完整...