- 浏览: 507070 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (329)
- [发布至博客园首页] (12)
- [随笔分类][01] .Net X (59)
- [随笔分类][20] Architecture (16)
- [随笔分类][21] Developer Logs (13)
- [网站分类]Windows 7 (1)
- [随笔分类][13] Oracle & .Net (7)
- [随笔分类][16] Love in China (14)
- [随笔分类][15] Development Tools (20)
- [随笔分类][18] Windows Phone (12)
- [随笔分类][12] Design & Pattern (17)
- [网站分类].NET新手区 (22)
- [网站分类]首页候选区 (2)
- [随笔分类][08] Windows (Server) (13)
- [随笔分类][02] CSLA.Net (3)
- [随笔分类][10] jQuery & javaScript (10)
- [随笔分类][11] SQL Server (4)
- [随笔分类][22] Enterprise Logs (3)
- [随笔分类][03] News (9)
- [随笔分类][19] Quality Assurance (2)
- [随笔分类][05] Silverlight (20)
- [随笔分类][14] Google Earth & .Net (6)
- [网站分类]非技术区 (9)
- [随笔分类][07] WWF (2)
- [随笔分类][04] SharePoint (1)
- [随笔分类][20] Analysis & Design (36)
- [随笔分类][06] WCF (5)
- [随笔分类][12] Architecture (1)
- [随笔分类][09] WPF (0)
- [随笔分类][17] VStudio & Expression (5)
最新评论
-
zhangyy130:
你好,我关于第二段的那个表视图、模型与图这三者的关系我没有看明 ...
UML模型的组成 -
guji528:
谢谢分享!
Enterprise Architect 基础应用 -
studentsky:
好文章,图文并茂!
WCF 第一个用 Visual Studio 2010 创建的WCF服务 -
chen975311486:
用哪个工具画的????
UML中对关系的描述 (二) -
frankies:
继续学习中。。
UML 交互概述图
如今web2.0炒的很厉害,先不去管它web2.0究竟是什么东西,反正div+css好像是火的不行了.各大知名站点都赶时髦似的把原来的表格布局翻新成了div+css,并美其名曰"本站符合w3c标准",以便让别人觉得他们的网站用的是最先进的技术.div布局真有那么先进么?这个问题仍在争论之中.在这里咱们不参与这种无聊的争论,学会它自己感觉一下不就清楚了么?
实际上div布局并不是什么高深的东西,如果你知道一点css就变得更简单了.首先我要说明几点:
1.这里的div并不是我们所说的层,虽然他们的标签都是<div>,在这里你可以把div理
解成一个容器,它可以放文字,图片,表格等等.
2.用div布局必须对页面的结构进行准确的分析,当然用table也要分析页面结构.用div要分清上下,左右,实际上div布局也只有上下,左右.分析结构要先整体再部分,先分析整体的页面布局,例如我们一般的页面是上(banner和导航),中(页面主体内容,新闻等等),下(版权信息块)结构.
+------------------------------------+
| |
| header |
| |
|------------------------------------|
| |
| |
| midbody |
| |
| |
| |
| |
| |
|------------------------------------|
| |
| foot |
| |
+------------------------------------+
于是我们可以把整个页面放在一个大div内,于是我们可以这样来写<div>结构:
<div id="container">/*大容器放全部内容*/
<div id="header">/*上*/
</div>
<div id="midbody">/*中*/
</div>
<div id="foot">/*下*/
</div>
</div>
解释下上面的id是什么东西,id后面的内容是当前div以及div内部的东西用的css,这个css可
以规定div的宽度,大小,位置以及内部文字的大小、样式、颜色等等。
下面看下这几个css的代码:
/*页面主容器样式*/
#container{
width:90%;/*宽度*/
margin: 0 auto;/*边界auto为自动,这里用到了缩写形式意思为上下为0,
左右自动*/
}
/*页面头*/
#header{
width:780px;
height: 130px;
margin: 0 auto;
overflow:hidden;/*防止div被撑开,超过div大小就隐藏*/
background:#999999;/*背景色*/
}
/*页面中间*/
#midbody{
width:780px;
height: auto;
height:auto;
margin:0 auto;
overflow:hidden;
background: #990000;
}
/*页面底部*/
#foot{
width:780px;
height:100px;
margin:0 auto;
background: #99FFCC;
}
看完整体就要研究部分了,对于部分来说无非就是上下或左右结构了,例如下面的中间又分
为左右。
+------------------------------------+
| |
| header |
| |
|------------------------------------|
| | |
| | midbody |
| | |
|leftside| rightside |
| | |
| | |
| | |
| | |
|------------------------------------|
| |
| foot |
| |
+------------------------------------+
于是div结构可写成:
<div id="container">
<div id="header">
</div>
<div id="midbody">
<div id="leftside">
</div>
<div id="rightside">
</div>
</div>
<div id="foot">
</div>
</div>
midbody中的leftside和rightside的css为:
#leftside{
width:220px;
float:left;/*该层位于外层的左边*/
height:500px;
background:#167692;
}
#rightside{
width:558px;
height:500px;
float:right;/*该层位于外层的右边*/
background: #CCCC00;
}
如果是这样的结构:
+------------------------------------+
| |
| header |
| |
|------------------------------------|
| | rightside |
| | rtop |
| | |
|leftside|---------------------------|
| | |rbottom |
| | left | right |
| | | |
| | | |
|------------------------------------|
| |
| foot |
| |
+------------------------------------+
则div结构为:
<div id="container">
<div id="header">
</div>
<div id="midbody">
<div id="leftside">
</div>
<div id="rightside">
<div id="rtop">
</div>
<div id="rbottom">
<div id="left">
</div>
<div id="right">
</div>
</div>
</div>
</div>
<div id="foot">
</div>
</div>
css为:
#rtop{
width:558px;
height:200px
margin:0 auto;
background: #CCCC00;
}
#rbottom{
width:558px;
height:300px;
margin:0 auto;
background: #CCee00;
}
#left{
width:258px;
float:left;
height:300px;
background: #CCCCed;
}
#rightside{
width:300px;
height:300px;
float:right;
background: #Cdfd00;
}
应该很清楚了吧?只要看懂了最外层的到里面都是一样的道理。
源文件在附件里(index1.html为以上上所说样式,index.html为用div画边框线的样式)
下载附件:div.rar
发表评论
-
LINQ to SQL语句之Insert/Update/Delete操作
2009-12-30 14:54 1152Insert/Update/Delete操作 插入(Ins ... -
RabbitMQ 安装配置和简单实例
2010-01-21 16:52 1885安装ErLang运行环境 配置运行环境变量 启动服务 ... -
MSMQ(Microsoft Message Queue,微软消息队列) Asp.Net 简单示例
2010-01-22 14:59 3295系统: Windows XP 1.安装MSMQ 控制面板—&g ... -
IromPython .Net 的简介和第一个例子
2010-01-23 18:53 1371.Net 4 都已经到来 ... -
Microsoft Asp.Net MVC 从入门到精通
2010-01-27 17:53 870ASP.NET MVC Framework是微软官方提供的MV ... -
C# Socket 同步通信与异步通信 示例
2010-01-30 17:50 4767同步 1.建立链接发送和获取信息 异步 1.服务器端建立一 ... -
解决 Visual Stuido 工具栏中的工具重置后,恢复回来。
2009-12-18 17:06 1309拿DevExpress 控件为例,如果重置工具栏后,以前的工具 ... -
LINQ to SQL 用O/R设计器手工建表对象
2009-10-11 22:04 1072除了自己建立定制对象外,还可以使用O/R设计器以可视化的方式创 ... -
LINQ to XML .Net 3.5 中的新XML对象
2009-10-15 14:11 916System.Xml.Linq 命名空间中,有一系列新的LIN ... -
LINQ to XML 用 LINQ 查询 XML
2009-10-15 15:57 696将一个已知的XML放到XDocument 对象当中使用LINQ ... -
LINQ to XML 操作XML文档
2009-10-15 17:18 1020使用 XDocument 对象的 Element 方法,获取制 ... -
C# 编码规范
2009-10-15 19:20 752陈年的文档,不过很不错整理出来发到博客上,还有更多的朋友需要。 ... -
Visual Studio 项目模板、文件模板、代码段和环境设置
2009-10-15 19:31 971很久前使用过,那个时候还没有开始写博客,好久不用就都忘记了,这 ... -
ADO.NET Entity Framework 概述
2009-10-16 11:50 597ADO.NET Entity Framework 与 LINQ ... -
LinqPad 1.31 下载
2009-01-14 15:42 1003LinqPad 1.31 也许你已经非常熟悉他了,为即将使用L ... -
jQuery 的第一个例子
2009-01-18 10:34 846通过这个例子可以对jQuery的使用有个基本的认识,jQ ... -
jQuery 选择器的使用
2009-01-18 10:39 875jQuery 能如此的流行,很重要的一点也许就是他有非常强大且 ... -
一次从GridView 获得多个指定行中多个指定控件的值
2009-01-20 07:33 902一次从GridView 获得多个指定行中多个指定控件的值,非常 ... -
jQuery 的Ajax应用(1)--学习篇,内附实例
2009-01-28 21:48 1358下面以前台jQuery,后天C# 的方式,演示了,如何通过 ... -
Enterprise Library 4.1 一步一步从入门到精通(未完成)
2009-02-05 23:04 915Enterprise Library 4.1 一步一步从入门到 ...
相关推荐
在IT行业中,网页设计是至关重要的一个领域,而DIV+CSS布局则是现代网页设计的核心技术之一。本资源包“DIV+CSS布局大全-.zip”包含了深入学习CSS的基础知识和实践技巧,对于想要提升网页设计技能的初学者或者专业...
9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等,以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**:尽管现代浏览器对CSS的支持...
5. **增强可访问性**:对于无障碍浏览(Accessibility)来说,Div+CSS布局往往优于Table布局,因为它能更好地遵循WCAG(Web Content Accessibility Guidelines)指南。 在实际操作中,使用Table2CSS3.0.0工具时,...
在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过HTML的`<div>`元素和CSS(层叠样式表)来控制网页的结构和样式。标题"DIV+CSS 1-1-(1+2+1)-1布局"指的是一个特定的布局模式,这种模式通常用于创建复杂的...
在HTML和CSS的配合下,`div`元素常常被用作布局工具,通过设置`div`的CSS属性如`display`, `width`, `height`, `margin`, `padding`, `float`, `position`等,可以实现各种布局模式,例如网格布局、瀑布流布局、弹性...
在网页设计领域,`div+css`是一种常用的技术,用于实现页面布局和样式控制。`div`元素作为容器,能够包裹其他HTML元素,而CSS(层叠样式表)则负责定义这些元素的外观和位置。在本教程中,我们将深入探讨如何使用`...
在实践中,学习div+css布局,你需要理解以下几个关键知识点: 1. **CSS选择器**:用于选取HTML元素,如类选择器(`.class`)、ID选择器(`#id`)、元素选择器(`element`)等。 2. **盒模型**:每个HTML元素都被视...
总的来说,"164精美网页模板(div+css)131-040"是一份宝贵的网页设计资源,它集合了多种设计风格和功能,可以帮助设计师快速构建高质量的网站,同时也是一个学习Div+CSS布局和网页设计的实用案例库。
在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的CSS样式来控制HTML中的`<div>`元素,实现页面的结构化和美化。本案例集包含从21到30的十个实际应用示例,覆盖了各种类型的网站设计,如健康...
在进行Div+CSS布局时,通常会先进行页面的规划。比如在本教程中,作者将页面分为顶部、内容部分(包含侧边栏和主体内容)和底部三个主要部分。每个部分会被封装在一个Div标签中,通过CSS设置它们的宽高、位置和其他...
通过使用Div,设计师可以更好地控制页面布局,实现模块化的页面设计。Div通过CSS(Cascading Style Sheets)来定义样式,如颜色、字体、大小、位置等,从而实现了内容与样式的分离,提高了网页的可维护性和可重用性...
在网页设计中,`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`<div>`元素作为容器来组织内容,并利用CSS(层叠样式表)来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...
一小时搞定DIV+CSS布局-固定页面开度布局
* 制作阶段包括设计草图、设计制作 PSD 模板和利用 DIV+CSS 制作网站页面等 知识点五:公司网站设计 * 公司网站设计包括确定公司创建网站的目的和意义、需求分析、设计工作流程和栏目设计等 * 公司网站设计需要...
新手通过这门教材可以在两天内掌握基本的div+css布局技巧。以下是对标题和描述中涉及知识点的详细说明: 1. **规划网站**:在开始布局前,首先要规划网站的结构,明确各个部分的功能和尺寸。例如,导航条(Main ...
在网页设计领域,Div+CSS布局是现代网页开发的基础,它极大地提升了网页的可维护性和易用性。这个“Div+CSS布局入门+实例教程”是为初学者设计的,旨在帮助他们掌握这一核心技术。 Div(Division)是HTML中的一个...
通过对淘宝网首页的具体分析,我们可以看到div+css布局不仅能够让页面变得更加整洁美观,还能够有效提升网站的性能和用户体验。在实际开发过程中,开发者应该充分利用div+css的强大功能,结合具体的业务需求进行合理...
在现代网站设计中,DIV+CSS布局方式非常流行,因为它提供了灵活的页面布局能力。通过使用`<div>`标签和CSS中的`float`属性,可以轻松地创建复杂的布局,例如侧边栏、主要内容区域和页脚等。 #### 四、网页主要框架...
`div`元素作为容器,通过CSS定义样式和布局,使得网页内容能够按照预期呈现,同时确保在不同设备和屏幕尺寸上的良好显示效果。 **网页模板的重要性** 网页模板简化了网页设计过程,特别是对于初学者和忙碌的开发者...