DIV+CSS布局积累

格式：doc
大小：60.50 KB
文档页数：16

在写CSS的时候，经常为一些名字而发愁，比如说菜单后面的背景要用什么词来表示呢？大家都知道，菜单一般用menu来表示，那么菜单后面的背景我会用menubg，CSS里就写#menubg {…}。

还有一些其他的比如搜索框之类的应该怎么命名呢？下面有一些可以算得上是标准的命名吧。如果有错误或者遗漏请朋友们帮忙补上，谢谢！

[Copy to clipboard]

CODE:

页头：header

登录条：loginbar

标志：logo

侧栏：sidebar

广告：banner

导航：nav

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

滚动：scroll

页面主体：main

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

热点：hot

新闻：news

下载：download

状态：status

按钮：btn

投票：vote

合作伙伴：partner

友情链接：friendlink

页脚：footer

版权：copyright

提交：submit

文本框：textbox

统计：count

以上结构可以组合使用，例如：左列标题lefttitle；底部导航footernav 书写原则是： 1.一律小写； 2.尽量用英文； 3.不加中杠和下划线； 4.尽量不缩写，除非一看就明白的单词。

11.17 网易的CSS写法

[Copy to clipboard]

CODE:

/* 全局CSS定义 */

body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF;

font-size:12px; color:#000;}

div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}

h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}

table,td,tr,th{font-size:12px;}

/* 链接颜色 */

a:link {color: #1f3a87; text-decoration:none;}

a:visited {color: #83006f;text-decoration:none;}

a:hover {color: #bc2931; text-decoration:underline;}

a:active {color: #bc2931;}

/* 颜色属性 [定义规则，小写c加颜色名称] */

.cRed,a.cRed:link,a.cRed:visited{ color:Red; }

.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}

.cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;}

.cGray,a.cGray:link,a.cGray:visited{ color: #4F544D;}

.cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}

.cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}

.cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}

a.cBlack:hover{color:#bc2931;}

.cYellow,a.cYellow:link,a.cYellow:visited{color:#ff0;}

.cGreen,a.cGreen:link,a.cGreen:visited{color:#008000;}

/* 字体属性 [定义规则，小写f加属性名称] */

.fB {font-weight: bold;}

.fI {font-style: italic;}

/* 字体大小*/

.f12px{ font-size:12px;}

.f14px{ font-size:14px;}

/* 其他属性 */

.left{ float: left;}

.right{ float: right;}

.clear{ clear: both; font-size:1px; width:1px; visibility: hidden; }

.hidden {display: none;}

.unLine ,.unLine a{text-decoration: none;}

.noBorder{border:none; }

页面上所有图片自动缩放的代码

[Copy to clipboard]

CODE:

滚动条的颜色定义

[Copy to clipboard]

CODE:

scrollbar-face-color: #E0D5BE;

scrollbar-track-color: #EBE4D3;

scrollbar-highlight-color: #ffffff;

scrollbar-shadow-color: #ffffff;

scrollbar-3dlight-color: #ffffff;

scrollbar-dark-shadow-color: #ffffff;

scrollbar-arrow-color: #978C71;

给图片加边框

在CSS文件中对img定义边界（border），例如我在CSS中定义了：

[Copy to clipboard]

CODE:

img.framed {

padding: 6px;

border: 1px solid #CCC;

background-color: #FFF; }

那么在HTML文件中，针对嵌入的图片定义class="framed"就会有相应的边框效果。

[Copy to clipboard]

CODE:

在FF下一个自适应高度的简单做法

[Copy to clipboard]

CODE:

加上

height: 100%;

overflow: auto;

自动换行的简单做法

[Copy to clipboard]

CODE:

table-layout: fixed;

WORD-BREAK: break-all;

WORD-WRAP: break-word;

怎样用CSS把层做成半透明？

[Copy to clipboard]

CODE:

用下面的样式表定义你的层

.alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100,

FinishY=100｝

解释：

Opacity=开始的不透明度(100的话就不透明了)

FinishOpacity=结束的不透明度(100的话就不透明了)

Style=样式，从0开始，1.2.3....有均匀透明啊，放射形状透明啊...

StartX=开始透明的X坐标，基本上为图片、层的左上角（0）

StartY= 开始透明的Y坐标，基本上也为图片、层的左上角（0）

FinishX=结束透明的X坐标，基本上也图片、层的右下（图片、层的宽度）

FinishY=结束透明的Y坐标，基本上也为图片、层的右下角（图片、层的高度）

再谈一下关于清除浮动(闭合浮动元素)最简单的方法

最简单的清除浮动(闭合浮动元素的方法是在父级容器内,浮动对象下面再插入一个额外的DIV标签，来清除浮动（clear）,浏览器兼容性好，没有HACKS，缺点是要增加一个无语义的标签,但在有的布局下,可使这个只起到清除作用的DIV,具有语义化.

先看代码

[Copy to clipboard]

CODE:

......

其中WRAP是父级容器,sideright和sideleft是左、右部分的内容，foot里放了内容，在左、右内容的下面，并在父级容器里面，起到了清除浮动DIV的作用。

有什么能控制滚动条大小的吗？

典型的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" %>

7. 左中右版式

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

[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. }

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;}

页面代码如下：

这是身体

效果下图显示：点击看大图

其中居中的关键是将“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;}

什么是DIV+CSS,DIV+CSS布局介绍

什么是DIV+CSS?DIV+CSS布局介绍

DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。

为什么DIV+CSS会这么流行？

1、DIV+CSS完全符合W3C标准

微软等所有公司全部都是W3C支持者，这一点是最重要的，所以可以保证您的网站不会因为将来网络应用的升级而被淘汰。

2、支持所有浏览器的完美向后兼容

也就是说不管未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容，不会因为编码问题而改革。

3、搜索引擎更加友好

相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。

4、样式的调整更加方便

内容和样式的分离，使页面和样式的调整变得更加方便。现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

5、CSS的简洁的代码

对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。

6、结构分离

在团队开发中更容易分工合作而减少相互关联性，从而实现分工明确。

本文由泸州艺宣网：整理所得。

浅谈div+css布局技术

摘要 Web标准的逐渐普及,网页布局技术也发生了变化。文章介绍了Web标准的关键技术,及div+css布局方法。

关键词网站布局;web标准;css;xhtml语言

0 引言

随着Internet的快速发展,网络成为第四大媒体,网站的地位和作用也有了大幅的提升。随之而来的是各种新技术的不断涌现。在前端技术领域技术版本的更新,各类架构及工具的发展,前端开发的方法越来越多,技术越来越复杂,实现的工具和思路越来越简单。近几年主要门户网站都进行了网站重构,这样减少了大量的冗余代码,提高了可读性和可维护性,同时代码的减少又节省了带宽。

1 关键技术

1.1 XHTML

XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。2000年底,国际W3C组织(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。为了是适应XML,W3C在html的基础上涌xml的规则对其进行扩充,扩充后XHML仍旧可以被旧浏览器解析。与HTMl相比XTML语法更严谨更简洁。比如:所有的标记都必须要有一个相应的结束标记,所有标签的元素和属性的名字都必须使用小写,标记嵌套必须合理,图片必须有说明文字等。另外,XHTML有2种常用现行规范:

1)XHTML 1.0 Transitional - 过渡型,标识语法要求较宽松

要求非常宽松的DTD,它允许你继续使用HTML4.01的标识。

2)XHTML 1.0 Strict - 严格型,标识要求严格

要求严格的DTD,你不能使用任何表现层的标识和属性。

1.2 CSS

CSS是Cascading Style Sheet层叠样式表的缩写。主要为了弥补HTML功能上的不足,通过css加强对标签的修饰,解决内容与表现分离的问题,一般可以单独存储在CSS 文件中。

下载提示

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

DIV+CSS布局积累

合集下载

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

CSS+DIV布局案例

什么是DIV+CSS,DIV+CSS布局介绍

浅谈div+css布局技术

文档推荐

最新文档