div+css div+css divcss布局入门教程 迅雷下载

你正在学习 CSS 布局吗?是不是还不能完全掌握纯 CSS 布局?通常有两种情况阻碍你的学习: 
   第 CSS 处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,
然后再针对语义、结构添加 CSS。这篇文章将告诉你应该怎样把 HTML 结构化。 
   另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、hspace、align="left"等等)束手无策,不知道该
转换成对应的什么 CSS语句。当你解决了第 HTML,我再给出一个列表,详细列出原来的表
现属性用什么 CSS来代替。 
   结构化 HTML 
   我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。然后我们用 Photoshop
或者 Fireworks 画出来、切割成小图。最后再通过编辑 HTML 将所有设计还原表现在页面上。 
   如果你希望你的 HTML 页面用 CSS布局(是CSS-friendly 的),你需要回头重来,先不考虑“外观”,要先思考你的页面
内容的语义和结构。 
   外观并不是最重要的。一个结构良好的 HTML 页面可以以任何外观表现出来,CSS Zen Garden 是一个典型的例子。CSS Zen 
Garden 帮助我们最终认识到 CSS的强大力量。 
   HTML 不仅仅只在电脑屏幕上阅读。你用 photoshop 精心设计的画面可能不能显示在 PDA、移动电话和屏幕阅读机上。但
是一个结构良好的 HTML 页面可以通过 CSS的不同定义,显示在任何地方,任何网络设备上。 
   开始思考 
   首先要学习什么是"结构",一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块,以及每块内容服务的
目的,然后再根据这些内容目的建立起相应的 HTML 结构。 
   如果你坐下来仔细分析和规划你的页面结构,你可能得到类似这样的几块: 
标志和站点名称  
主页面内容  
站点导航(主菜单)  
子菜单  
搜索框  
功能区(例如购物车、收银台)  
页脚(版权和有关法律声明)  
我们通常采用 DIV元素来将这些结构定义出来,类似这样: 
<div id="header"></div> 
<div id="content"></div> 
<div id="globalnav"></div> 
<div id="subnav"></div> 
<div id="search"></div> 
<div id="shop"></div> 
<div id="footer"></div>  
   这不是布局,是结构。这是一个对内容块的语义说明。当你理解了你的结构,就可以加对应的 ID在 DIV 上。DIV容器中
可以包含任何内容块,也可以嵌套另一个 DIV。内容块可以包含任意的 HTML 元素---标题、段落、图片、表格、列表等等。 
   根据上面讲述的,你已经知道如何结构化 HTML,现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任
何地方,再指定这个块的颜色、字体、边框、背景以及对齐属性等等。 
   使用选择器是件美妙的事 
   id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一
个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等。例如你为#header 写一个 CSS 规则,就可以完全不同于
#content 里的图片规则。 
第4 页

《Div + CSS  布局大全》  博客园 Jesse Zhao  整理     http://jessezhao.cnblogs.com    MSN/Mail:prolibertine@gmail.com 
   另外一个例子是:你可以通过不同规则来定义不同内容块里的链接样式。类似这样:#globalnav a:link 或者 #subnav 
a:link 或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如,通过#content p 和#footer p 分
别定义#content 和#footer 中 p的样式。从结构上讲,你的页面是由图片、链接、列表、段落等组成的,这些元素本
会对显示在什么网络设备中(PDA 还是手机或者网络电视)有影响,它们可以被定义为任何的表现外观。 
   一个仔细结构化的 HTML 页面非常简单,每一个元素都被用于结构目的。当你想缩进一个段落,不需要使用 blockquote
标签,只要使用 p标签,并对 p加一个 CSS的 margin 规则就可以实现缩进目的。p是结构化标签,margin 是表现属性,前者
属于 HTML,后者属于 CSS。(这就是结构于表现的相分离.) 
   良好结构的 HTML 页面内几乎没有表现属性的标签。代码非常干净简洁。例如,原先的代码<table width="80%" 
cellpadding="3" border="2" align="left">,现在可以只在 HTML 中写<table>,所有控制表现的东西都写到 CSS 中去,在
结构化的 HTML 中,table 就是表格,而不是其他什么(比如被用来布局和定位)。 
   亲自实践一下结构化 
   上面说的只是最基本的结构,实际应用中,你可以根据需要来调整内容块。常常会出现 DIV 嵌套的情况,你会看到
"container"层中又有其它层,结构类似这样: 
<div id="navcontainer"> 
<div id="globalnav"> 
<ul>a list</ul> 
</div> 
<div id="subnav"> 
<ul>another list</ul> 
</div> 
</div>  
   嵌套的 div 元素允许你定义更多的 CSS 规则来控制表现,例如:你可以给#navcontainer 一个规则让列表居右,再给
#globalnav 一个规则让列表居左,而给#subnav 的 list 另一个完全不同的表现。 
   用CSS 替换传统方法 
   下面的列表将帮助你用 CSS 替换传统方法: 
HTML 属性以及相对应的 CSS方法 
HTML 属性 CSS 方法 说明  
align="left" 
align="right" float: left;  
   float: right; 使用 CSS 可以浮动 任何元素:图片、段落、div、标题、表格、列表等等  
   当你使用 float 属性,必须给这个浮动元素定义一个宽度。 
   marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用 CSS, margin 可以设置在任何元
素上, 不仅仅是 body 元素.更重要的,你可以分别指定元素的 top, right, bottom 和left 的 margin 值。 
vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff; 
a:visited: #339; 
a:hover: #999; 
a:active: #00f;  
   在HTML 中,链接的颜色作为 body 的一个属性值定义。整个页面的链接风格都一样。使用 CSS 的选择器,页面不同部分
的链接样式可以不一样。 
   bgcolor="#FFFFFF" background-color: #fff; 在 CSS 中,任何元素都可以定义背景颜色,不仅仅局限于 body 和 table
元素。 
   bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder),你可以分别定义 top, right, bottom
和left 
border="3" 
第5 页

《Div + CSS  布局大全》  博客园 Jesse Zhao  整理     http://jessezhao.cnblogs.com    MSN/Mail:prolibertine@gmail.com 
   cellspacing="3" border-width: 3px; 用CSS,你可以定义table的边框为统一样式,也可以分别定义top, right, bottom 
and left 边框的颜色、尺寸和样式。  
    你可以使用 table, td or th 这些选择器.  
   如果你需要设置无边框效果,可以使用 CSS定义: border-collapse: collapse; 
<br clear="left"> 
<br clear="right"> 
<br clear="all">  
clear: left; 
clear: right; 
clear: both;  
   许多 2列或者 3列布局都使用 float 属性来定位。如果你在浮动层中定义了背景颜色或者背景图片,你可以使用 clear
属性. 
cellpadding="3" 
vspace="3" 
   hspace="3" padding: 3px; 用 CSS,任何元素都可以设定 padding 属性,同样,padding 可以分别设置 top, right, bottom 
and left。padding 是透明的。 
align="center" text-align: center; 
margin-right: auto; margin-left: auto;  
Text-align 只适用于文本.  
   象div,p 这样的块级怨毒可以通过 margin-right: auto; 和margin-left: auto;来水平居中 
   一些令人遗憾的技巧和工作环境 
   由于浏览器对 CSS支持的不完善,我们有时候不得不采取一些技巧(hacks)或建立一种环境(Workarounds)来让CSS 实现
传统方法同样的效果。例如块级元素有时侯需要使用水平居中的技巧,盒模型 bug 的技巧等等。所有这些技巧都在 Molly 
Holzschlag 的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有详细说明。 
    另外一个关于 CSS技巧的资源站点是 Big John 和 Holly Bergevin 的“ 。 
本地下载

(0)

相关推荐

  • div+css div+css divcss布局入门教程 迅雷下载

    你正在学习 CSS 布局吗?是不是还不能完全掌握纯 CSS 布局?通常有两种情况阻碍你的学习:     第 CSS 处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构, 然后再针对语义.结构添加 CSS.这篇文章将告诉你应该怎样把 HTML 结构化.     另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该 转换成对应的什么 CSS语句.当你解决了第 HTML,我再给出一个

  • CSS网页布局入门教程6:左列固定,右列宽度自适应

    在实际应用中,有时候需要左栏固定宽度,右栏根据浏览器窗口大小自动适应,在CSS中实现这样的布局方式是简单可行的,只需在设置左栏的宽度即可,如上例中左右栏都采用了百分比实现了宽度自适应,而我们只需要将左栏宽度设定为固定值,右栏不设置任何宽度值,并且右栏不浮动,代码如下: 复制代码 代码如下: #left {      background-color: #E8F5FE;      border: 1px solid #A9C9E2;      float: left;      height: 3

  • CSS网页布局入门教程4:二列固定宽度

    有了一列固定宽度作为基础,二列固定宽度就非常简单,我们知道div用于对某一个区域的标识,而二列的布局,自然需要用到两个div,XHTML代码如下: 复制代码 代码如下: <div id="left">左列</div>  <div id="right">右列</div> 新的代码结构中使用了两个id,分别为left和right,表示两个div的名称,我们所需要做的是,首先为它们制定宽度,然后让两个div在水平行中并排显示

  • CSS网页布局入门教程5:二列宽度自适应

    从二列固定宽度入手,开始尝试二列布局的情况下,左右栏宽度能够做到自适应,从一列自适应布局中我们知道,设定自适应主要通过宽度的百分比值设置,因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计,继续上面的CSS代码,我们得新定义二列的宽度值: 复制代码 代码如下: #left {      background-color: #E8F5FE;      border: 1px solid #A9C9E2;      float: left;      height: 300px;      w

  • 非常漂亮的Div+CSS布局入门教程第1/5页

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图. 下面,我们需要根据构思图来规划一下页面的布局

  • CSS网页布局入门教程8:三列浮动中间列宽度自适应

    使用浮动定位方式,从一列到多列的固定宽度及自适应,基本上可以简单完成,包括三列的固定宽度.而在这里给我们提出了一个新的要求,希望有一个三列式布局,基中左栏要求固定宽度,并居左显示,右栏要求固定宽度并居右显示,而中间栏需要在左栏和右栏的中间,根据左右栏的间距变化自动适应.这给布局提出了一个新的要求,而且单纯使用float属性与百分比属性并不能够实现,CSS目前还不支持百分比的计算精确到考虑左栏和右栏的占位,如果对中间栏使用100%宽度的话,它将使用浏览器窗口的宽度,而非左栏与右栏的中间间距,因此我

  • CSS网页布局入门教程12:纵向导航菜单

    纵向导航菜单也是网站应用中的一种重要形式,所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式.先看一下效果吧! 如图所示的效果,我们先看一下代码结构: <div id="nav">    <h1>CSS</h1>        <h2><a href="#">css入门</a></h2>        <h2><a href="#&quo

  • CSS网页布局入门教程1:一列固定宽度

    本系列教程为入门级教程,适合初学者学习,由最简单的知识一点一点进阶.主要以实例为主,很少部分理论,这样更适应初学者快速掌握.因本人也正在学习,难免有一些错误或疏漏地方,望各位给予指正.本教程参考<CSS网站布局实录>一书,在此向作者表示感谢. 要想学好DIV+CSS,首先要有一定的HTML和CSS知识,如果这些你还不了解,建议你先去补习这一课,再来学习本教程.另外还要抛弃传统表格布局的思维模式,至于为什么,在你学习本教程中慢慢就会体会到.如果这些你都准备好了,那么开始吧! 一列固定宽度 一列固

  • CSS网页布局入门教程9:用CSS设计网站导航——横向导航

    网站导航是网站中最重要的元素,是网站提供给用户的最直接最方便的访问网站内容的工具.网站导航从形式上主要由横向导航.纵向导航.下拉及多级菜单导航第三种形式. 横向导航 作为门户网站的设计而言,主导航一般采用横向导航.由于门户网站下方文字较多,且每个频道均有一同的样式区分,因此在顶部固定一个区域设计统一风格且不占用过多空间的导航是最理想的选择,国内大部分门户均采用这种形式. 纵向导航 目前在门户网站的设计中已经不再流行,纵向导航更倾向于表达产品分类. 下拉导航 主要用于功能复杂的网站.在有些网站上也

  • CSS网页布局入门教程13:下拉及多级弹出式菜单

    下拉及弹出式菜单是网站设计中常用导航形式,这种菜单形式能够充分利用页面现在空间隐藏与显示更多内容,并能对内容进行合理的分类显示,是一种非常优秀的导航形式.  早期的下拉或弹出式菜单通过隐藏的layer或div来实现内容的隐藏,通过JavaScript脚本来响应用户的操作,目前也采用JavaScript+div或其它元素的形式来制作此类导航,不同的是整个导航都将使用符合标准的css布局来打造,不再使用表格来制作菜单,下拉式菜单是上面提到的横向导航与纵向导航的结合,而且通过css对于属性的众多支持,

随机推荐