DIV+CSS网页布局技巧实例

合集下载

CSS+DIV布局案例

第一个例子只是告诉大家如何让页面居中，这个代码的用处一般用来做背景图，示例：http://www.smarter.co.jp/，外围是灰色的，当中页面的正文底是白色的，非常大气。

这个例子主要讲上下两列，这是最常见的，也是最简单的页面表现形式，头部放logo和banner，下面是主体内容。

CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { height:300px; background:#cff;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><p>这是身体</p></div></div></body>效果下图显示：点击看大图其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container决定。

第二个例子是告诉大家如何让页面居中，如何加上头部。

这个例子加上了尾部，这也是一种常见的页面表现形式，头部放logo和banner，中间是主体内容，尾部放copyright 等内容。

CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { height:300px; background:#cff; margin-bottom:5px;}#footer { height:60px; background:#6cf;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><p>这是主体</p></div><div id="footer">这是尾部</div></div></body>效果下图显示：点击看大图其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container决定。

典型的DIV＋CSS布局——左中右版式

典型的DIV＋CSS布局——左中右版式中，运⽤的是浮动属性；这个实例，则运⽤了绝对定位属性。

1、在#container中设置“position:relative;”，其作⽤是使得后⾯的绝对定位的基准为#container⽽不是以浏览器为其准。

2、左侧列#left_side和右侧#right_side列采⽤绝对定位，并且固定这两个div的宽度，⽽中间列#content由于需要根据浏览器⾃动调整，因此不设置类似属性。

但由于另外两个块的position属性设置为absolute，此时必须将它的margin-left和margin-right属性都设置为190px[html]1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" StylesheetTheme="Default" %>2.3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">4.5. <html xmlns="/1999/xhtml" >6. <head runat="server">7. <title>左中右版式</title>8. </head>9. <body>10. <form id="form1" runat="server">11. <div id="wrap">12. <div id="header">header</div>13. <div id="container">14. <div id="left_side">left_side</div>15. <div id="content">content</div>16. <div id="right_side">right-side</div>17. </div>18. <div id="footer">footer</div>19. </div>20. </form>21. </body>22. </html>[css]01. #wrap{02. width:700px;03. margin:0 auto;04. }05. #header{06. margin:20px;07. height:80px;08. border:solid 1px #0000FF;09. }10. #container{11. position:relative;12. margin:20px;13. height:400px;14. }15. #left_side{16. position:absolute;17. top:0px;18. left:0px;19. border:solid 1px #0000FF;20. width:170px;21. height:100%;22. }23. #content{24. margin:0px 190px 0px 190px;25. border:solid 1px #0000FF;26. height:100%;27. }28. #right_side{29. position:absolute;30. top:0px;31. right:0px;32. border:solid 1px #0000FF;33. width:170px;34. height:100%;35. }36. #footer{37. margin:20px;38. height:80px;39. border:solid 1px #0000FF;40.41. }。

div+css网页标准布局实

div+css网页标准布局实例
前边两节学完后，前台工作基本上完成了，下边的任务该程序员添加程序了。

为什么说是基本完成呢？因为要做的工作还很多，不但要把首页做出来，其它的列表页详细页等页面
也得做。

还要配合程序员把整个网站完成，这样才能呈现给用户。

应部分同学的要求，讲解
一下程序怎么添加的，这样和程序员配合起来也更默契，还有怎么连接FTP上传下载，后
期出现问题怎么调试等等。

添加程序部分只需要了解就行了，连接ftp上传下载，页面调试
查找问题这部分一定要掌握哟。

▪创建服务器环境
▪建立数据库
▪本地和远程服务器连接
▪php读取数据
▪页面调试及浏览器兼容
一、创建服务器环境
程序语言有多种，常用的有asp、php、jsp等，之前做的html页面，可以直接在浏览器上运行，因为html是客户端语言，而这些是服务器端语言，也就说你所看到的页面是
经过服务器加工之后传输过来的，不管使用哪种语言环境，最终目的就是把数据库的数据读
取出来展示到网页上。

不同的语言有不同的运行环境，要想运行这些语言，首先要创建一个
适应他们的环境，下边以php为例，讲解一下php环境的搭建。

点击下载：WampServer5集成环境
下载wamp安装完成后，php运行所需的Apache、MySQL、PHP5等都具备了，安装完成后需要启动WampSeaver，启动后会在托盘区显示一图标（如上图），当它正常。

第19章 DIV+CSS页面布局实例：制作

19.7
制作个人博客分页
个人博客的分页包括article.html、archives.html、、个人博客的分页包括、 guestbook.html和about.html。这四个网页的结构和首和。是一致的。页index.html是一致的。所以在制作完成是一致的所以在制作完成index.html后后制作其他分页就变得非常简易。这也是DIV+CSS布局，制作其他分页就变得非常简易。这也是布局的一大优点。的一大优点。有的网站在构架时候为每个分页都设置一文件。个CSS文件。但这样做会使网站的文件量增大，也会为文件但这样做会使网站的文件量增大，后期维护修改带来一定的麻烦。后期维护修改带来一定的麻烦。本章实例只使用一个 CSS文件，就是文件，文件就是index.css。在这个文件中包含整个网站。样式。的CSS样式。样式
19.4.2 制作左边栏中网文的样式
如图19.7所示，网文没有添加任何样式，但其结构和位置都所示，网文没有添加任何样式，如图所示是正确的。接着对网文进行样式美化。是正确的。接着对网文进行样式美化。首先对文章标题添加样式。文章标题使用article_marker.gif图片来作为添加样式。文章标题使用图片来作为背景图，设置其padding-left属性后，图片就会与文字分属性后，背景图，设置其属性后在标题中有超链接“阅读全文” 离。在标题中有超链接“阅读全文”，选择该链接后会跳转到article.html页面。页面。跳页头部（header）制作个人博客的首页头部（header）
在完成首页的整体基本布局后，在完成首页的整体基本布局后，就可以对页面进行分块制作首先制作网页头部header。，首先制作网页头部。 header分为左右两个部分，左边是网站的分为左右两个部分，分为左右两个部分左边是网站的logo，右边是网，站的导航。这两个部分分别用logo和nav的容器嵌入页面站的导航。这两个部分分别用和的容器嵌入页面。在nav容器中使用一个无序列表嵌入网站的导航。容器中使用一个无序列表嵌入网站的导航。容器中使用一个无序列表嵌入网站的导航

DIV CSS网页布局实例：十步学会用CSS建站

Update:本篇已得到原作者Steve Dennis的翻译准予，在此Jorux表示感谢！本教程主要参考Creating a CSS Layout from scratch，由Jorux翻译，以意译为主，其间加入了不少Jorux的个人观点，省略了一些多余的说明，请读者明鉴。

目录：∙第一步：规划网站，本教程将以图示为例构建网站；∙第二步：创建html模板及文件目录等；∙第三步：将网站分为五个div，网页基本布局的基础；∙第四步：网页布局与div浮动等；∙第五步：网页主要框架之外的附加结构的布局与表现；∙第六步：页面内的基本文本的样式(css)设置；∙第七步：网站头部图标与logo部分的设计；∙第八步：页脚信息(版权等)的表现设置；∙第九步：导航条的制作(较难)；∙第十步：解决ie浏览器的显示bug；第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。

其基本布局见下图：主要由五个部分构成：1.Main Navigation 导航条，具有按钮特效。

Width: 760px Height: 50px2.Header 网站头部图标，包含网站的logo和站名。

Width: 760px Height: 150px3.Content 网站的主要内容。

Width: 480px Height: Changes depending on content4.Sidebar 边框，一些附加信息。

Width: 280px Height: Changes depending on5.Footer 网站底栏，包含版权信息等。

Width: 760px Height: 66px第二步：创建html模板及文件目录等 1.创建html模板。

代码如下：将其保存为index.html,并创建文件夹css，images，网站结构如下：2.创建网站的大框，即建立一个宽760px的盒子，它将包含网站的所有元素。

超级牛最详细的div+css布局案例

DIV固定宽度居中显示－超级牛最详细的Div+C SS布局案例这个例子的主要内容是居中显示，现在的显示器的宽度都比较大，并且规格不统一，所以判断一个网页是不是专业，第一眼就是这个网站是不是居中，如果不居中，一般不是一个很老的没有人维护的网站就是一个技术很差的人写的。

CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:900px; height:500px;background:#CD5C5C;}页面代码如下：<div id="container"><p>1列固定宽度居中</p></div>效果下图显示：（点击看大图）其中居中的关键是“margin:0 auto;”代码例子由“标准之路”提供，感谢！序－经验之谈－超级牛最详细的Div+CSS布局案例最近有很多晚辈问我关于网站制作方面的问题，随着SEO的普及，DIV+CSS的网站制作理念成为了流行，但在实际操作中，DIV其实是很不好控制的。

大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。

在写大家最关心的Div+CSS布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。

我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。

在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。

CSS样式+DIV页面布局（水平三列）

CSS样式+DIV页面布局（水平三列）进入了WEB2.0时代后,网页设计师们,为了让页面外观与结构分离,就要用CSS样式来规范布局.用CSS样式规范布局使代码更简洁,更结构化,便站点访问和维护更加容易.在这里我们来看一下,怎么用CSS来布局的.现今网络上比较流行的页面布局是内容区水平三列的样式,下面的html代码简单的表现了这种样式:<html><head><title>CSS样式页</title><style type="text/css"></style></head><body><div id="top">这里是页首</div><div id="content"> <div id="left"> <h2 class="title">CSS</h2></div><div id="mid"></div> <div id="right"></div> </div><div id="bottom">这里是页尾</div></body></html>这里一篇关于学习DIV+CSS的学习笔记,请高人指点。

经典div+css网页标准布局实例教程

第一章XHTML CSS基础知识学习本系列教程需有一定html和css基础，也就是指您之前做过网页，会用表格布局。

如果您刚开始学习网页制作，不知道什么是表格布局及html和css，建议您先去充电，否则学习本教程会非常吃力或者根本就听不懂。

由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到web标准（div+css）布局，会使用web标准制作出常见的页面，这也达到了本教程的目的。

本教程多以实例形式循序渐进讲解，实例涉及到哪些关键点或难点就讲解什么，较少讲解概念。

因为概念这些东西很难说明白，或者说明白你也不一定能听懂，听懂了也不一定能理解。

所以把概念留给大家以后再深入研究。

由于章节关系，没有把css和css hack单独分出，只是在用到的时候穿插入讲解了。

html 基础和css基础只在第一节中介绍了几点重要的。

下面我们开始第一章的学习一、xhtml css基础知识首先说一下我们这节课的知识点文档类型语言编码html标签css样式css优先级css盒模型组成1）文档类型当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML 的语法。

许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。

2）语言编码接下来我们还会发现这样一句话：<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />它标示文档的语言编码。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

DIV+CSS网页布局技巧实例1：设置网页整体居中的代码以前用表格布局时设置网页居中非常方便，把表格对齐方式设置为居中就行了，就这么简单，现在呢，用DIV+CSS样式表控制，好像不是那么容易了，其实也很简单，只不过方式不line-height:500px;<!D O CTY PE ht m l PU B LI C "-//W3C//D<ht m l xm l ns="ht t p://w w w.w3.or g/199<head><m et a ht t p-equi v="Cont ent-Type"co提示：可以先修改部分代码后再运行这是一种方法，另外和种方法就是设置的它内边距padding了，自己可以试试哟～～DIV+CSS网页布局技巧实例3：设置层的透明度有时候我们需要用到层的透明度，把下边的背景透出来，如下图：这种半透明的形式在blog上应用比较广泛，那么这种效果是怎么做出来的呢？用JS，NO, NO，既然我们是CSS布局教程，那么就尽量用CSS来解决问题！filter: alpha(opacity=70);opacity: 0.7;把这两句代码加入到要实现半透明层的CSS样式表里即可，简单吧！！注：70和0.7的值可改为你需要的<!D O CTY PE ht m l PU B LI C "-//W3C//D<ht m l xm l ns="ht t p://w w w.w3.or g/199<head><m et a ht t p-equi v="Cont ent-Type"co提示：可以先修改部分代码后再运行DIV+CSS网页布局技巧实例4：使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。

css缩写的主要规则请参看《常用css缩写语法总结》，css缩写的主要规则如下：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;注意:在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。

盒尺寸通常有下面四种书写方法:▪property:value1; 表示所有边都是一个值value1；▪property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2▪property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3▪property:value1 value2 value3 value4; 四个值依次表示top,right,bottom, left方便的记忆方法是顺时针，上右下左。

具体应用在margin和padding的例子如下：margin:1em 0 2em 0.5em;边框(border)边框的属性如下：▪border-width:1px;▪border-style:solid;▪border-color:#000;可以缩写为一句：border:1px solid #000;语法是border:width style color;背景(Backgrounds)背景的属性如下：▪background-color:#f00;▪background-image:url(background.gif);▪background-repeat:no-repeat;▪background-attachment:fixed;▪background-position:0 0;可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;语法是background:color image repeat attachment position;你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：▪color: transparent▪image: none▪repeat: repeat▪attachment: scroll▪position: 0% 0%字体(fonts)字体的属性如下：▪font-style:italic;▪font-variant:small-caps;▪font-weight:bold;▪font-size:1em;▪line-height:140%;▪font-family:"Lucida Grande",sans-serif;可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表(lists)取消默认的圆点和序号可以这样写list-style:none;,list的属性如下:▪list-style-type:square;▪list-style-position:inside;▪list-style-image:url(image.gif);可以缩写为一句：list-style:square inside url(image.gif);DIV+CSS网页布局技巧实例5：明确定义单位，除非值为0忘记定义尺寸的单位是CSS新手普遍的错误。

在HTML中你可以只写width="100"，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。

只有两个例外情况可以不定义单位：行高和0值。

除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

DIV+CSS网页布局技巧实例6：区分大小写当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。

为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

DIV+CSS网页布局技巧实例7：取消class和id前的元素限定当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，而clas s可以在页面中多次使用。

你限定某个元素毫无意义。

例如：div#content { /* declarations */ }fieldset.details { /* declarations */ }可以写成#content { /* declarations */ }.details { /* declarations */ }这样可以节省一些字节。

DIV+CSS网页布局技巧实例8：元素属性的默认值p {margin:1em 0;font-size:1em;color:#333;}.update {font-weight:bold;color:#600;}这两个定义中，class="update"将被使用，因为class比p更近。

你可以查阅W3C 的《Calculating a selector’s specificity》了解更多。

DIV+CSS网页布局技巧实例11：多重class定义一个标签可以同时定义多个class。

例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。

.one{width:200px;background:#666;}.two{border:10px solid #F00;}在页面代码中，我们可以这样调用<div class="one two"></div>这样最终的显示效果是这个div既有#666的背景，也有10px的边框。

是的，这样做是可以的，你可以尝试一下。

DIV+CSS网页布局技巧实例12：使用子选择器使用子选择器(descendant selectors)CSS初学者不知道使用子选择器是影响他们效率的原因之一。

子选择器可以帮助你节约大量的class定义。

我们来看下面这段代码：<div id="subnav"><ul><li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a> </li>><li class="subnavitemselected"> <a href="#" class="subnavitemselecte d"> Item 1</a> </li><li class="subnavitem"> <a href="#" class="subnavitem"> Item 1</ a> </li></ul></div>这段代码的CSS定义是：div#subnav ul { /* Some styling */ }div#subnav ul li.subnavitem { /* Some styling */ }div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }div#subnav ul li.subnavitemselected { /* Some styling */ }div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some s tyling */ }你可以用下面的方法替代上面的代码<ul id="subnav"><li> <a href="#"> Item 1</a> </li><li class="sel"> <a href="#"> Item 1</a> </li><li> <a href="#"> Item 1</a> </li></ul>样式定义是：#subnav { /* Some styling */ }#subnav li { /* Some styling */ }#subnav a { /* Some styling */ }#subnav .sel { /* Some styling */ }#subnav .sel a { /* Some styling */ }用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。