DIV+CSS技术的研究
第一章 DIV+CSS技术的基础知识
第一节DIV+CSS的基本概念
CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML等文件式样的计算机语言。
DIV是HTML (超文本语言)中的一个元素,DIV+CSS是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了W3C内容与表现相分离。
第二节DIV+CSS布局的优势
2.1符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
2.2 支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。
2.3 搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。
2.4 样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。
2.5 CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。
2.6 表现和结构分离,在团队开发中更容易分工合作而减少相互关联性。
第三节 WEB标准的理解
第四节 CSS的基本语法结构
类型选择符 |
指以网页中已有的标签类型作为名称的选择符如: body{} div{} span{} |
群组选择符 |
除了对单个xhtml 对象进行样式的指定,同样也可以对一组对象进行相同的样式指派。如: h1,h2,p,span{font-size:12px;} 注:对象之间用逗号隔开。 |
包含选择符 |
对一个对象的子对象进行定义样式,如 h1span{}注:对象之间用空格隔开。上面样式的意思是对h1的span进行样式定义。 |
Id class选择符 |
id在网页中只能出现一次,适合大的定义,比如可以定义导航,头部,尾部各一个id如: <divid="content"></div> #content{};class 可以用于页面中多个元素,如: <divclass="p1"></div><h1class="p1"></h1>.p1{}。 |
标签指定选择符 |
如果既想使用id或class也同时使用标签选择符,可以使用如下格式: h1#content{} 表示所以id为content的h1标签。h1.content{}表示所有class为h1的标签。 |
组合选择符 |
#content h1{} 表示id 为content的所有h1标签 .contenth1{}表示class为content的所以h1标签。伪类:如 : a:hover{} 。 |
通配选择符 |
我们可以对对象进行模糊指定的方式进行选择,用*作为关键字,如: *{color:red;} 页面的所有标签的颜色都为红色。 |
第五节 CSS优先级和继承
5.1 CSS的优先级
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
p { color: red; } p { color: blue;} |
然而,你不可能经常用相同的选择符冲突达到目的,当你使用嵌套选择符,合理的冲突来了。比如:
div p { color: red; } p { color: blue; } |
也许在你看起来p元素的内容在div元素里面的颜色是蓝色,就像后面p元素的规则,但是第一个选择符的特性却是红色。基本上,一个选择符越多特性,样式冲突的时候将显示它的样式。
一组嵌套选择符的实际特性可以计算出来。基本的,使用id选择符的值是100,使用class选择符的值是10,每个html选择符的值是1。它们加起来就可以计算出特性的值。
名称 |
特性 |
备注 |
p |
1 |
一个html选择符 |
div p |
2 |
两个html选择符 |
.tree |
10 |
1个class选择符 |
div p.tree |
1+1+10=12 |
两个html选择符,一个class选择符 |
#baobab |
100 |
1个ID选择符 |
body #content .alternative p |
112 |
两个html选择符,一个ID选择符,一个类选择符 |
按照上面的规则,div p.tree的特性比div p高,body #content .alternativep又比它们两个都高。
<styletype="text/css"> <!-- *{font-size:20px;} .class3{ font-size: 12px; } --> </style> <spanclass="class3">我是多大字号?</span> |
运行结果:.class3{ font-size: 12px; }
<styletype="text/css"> <!-- #id1 #id2{font-size:20px;} .class3{font-size:12px;} --> </style> <div id="id1"class="class1"> <p id="id2"class="class2"> <span id="id3"class="class3">我是多大字号?</span> </p> </div> |
<styletype="text/css"> <!-- #id3 { font-size: 25px; } .class3{ font-size: 18px; } span{font-size:12px;} --> </style> <span id="id3"class="class3">我是多大字号?</span> |
运行结果:#id3 { font-size: 25px; }
解释:当对某个元素的CSS选择符样式定义的越具体,层级越明确,该定义的优先级就越高。
<styletype="text/css"> <!-- .class1 .class2 .class3{font-size: 25px;} .class2 .class3{font-size: 18px;} .class3 { font-size: 12px; } --> </style> <divclass="class1"> <pclass="class2"> <spanclass="class3">我是多大字号?</span> </p> </div> |
运行结果:.class1 .class2 .class3{font-size: 25px;}
原则四:标签#id >#id ; 标签.class>.class
<styletype="text/css"> <!-- span#id3{font-size: 18px;} #id3{font-size: 12px;} span.class3{font-size: 18px;} .class3{font-size: 12px;} --> </style> <spanid="id3">我是多大字号?</span> <spanclass="class3">我是多大字号?</span> |
运行结果:span#id3{font-size: 18px}| span.class3{font-size: 18px}
5.2 CSS的继承
继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个body定义了的颜色值也会应用到段落的文本中。
<styletype="text/css"> <!-- body {color: #f00;} --> </style> <body> <p>CSS<strong>继承性</strong>的测试</p> </body> |
CSS继承性的测试 |
然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。
我们仍以上面的举例代码为例:在样式定义中添加一条:strong {color:#000;}
发现只需要给<strong>加个颜色值就能覆盖掉它继承自<body>的样式颜色。由此可见:任何显示申明的规则都可以覆盖其继承样式。
继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。
有一些属性不能被继承,如:border, margin, padding, background等。
<styletype="text/css"> <!-- div {border: 1px solid #000;} --> </style> <div>我是<em>border</em>我是不能被继承滴</div> |
|
第二章DIV+CSS技术的常用知识
第一节 盒模型相关知识
1.1 盒模型的基本概念
填充、边框和边界都分为“上右下左”四个方向,既可以分别定义,也可以统一定义。
CSS内定义的宽和高,指的是填充以内的内容范围,因此一个元素:
实际宽度 = 左边界 + 左边框 + 左填充 + 内容宽度 + 右填充 + 右边框 + 右边界 |
实际高度 = 上边界 + 上边框 + 上填充 + 内容高度 + 下填充 + 下边框 + 下边界 |
每个块级元素都从一个新行开始,而且其后的元素也需另起一行开始,标题、段落、表格、层、body等都是块级元素。块级元素只能作为其他块级元素的子元素,而且需要一定的条件。
内联元素,例如<a>、<span>等,定义上下边界不会影响到行高(line-height),内联元素距离上一行元素的距离由行高决定,而不是填充或边界。
内联元素不需要在新行内显示,而且也不强迫其后的元素换行,如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。
浮动元素(无论左或者右浮动)边界不压缩,且若浮动元素不声明宽度,则其宽度趋向于0,即压缩到其内容能承受的最小宽度。
如果盒中没有内容,则即使定义了宽度和高度都为100%,实际上只占0%,因此不会被显示,此点在采取层布局的时候需特别注意。
边框默认的样式(border-style)为不显示(none)。
1.2 IE和FF对盒模型的解释区别
#test { width: 650px !important; width: 648px; padding-left: 2px; background: #fff; } |
IE Box的总宽度是: width+padding+border+margin
FF Box的总宽度就是 width的宽度,padding+border+margin的宽度,含在width内。
box{ width: 300px; padding: 5px;} |
box{ width: 290px !important; width: 300px;} |
这样子才能确保box的宽度始终在300px,而不会出现被撑开的现象
注意:ul 标签在 Mozilla 中有 padding 值,而在 IE 中只有 margin 有值。
所以在使用ul时最好将ul初始化:ul{margin:0;padding:0}
第二节 常用元素的用法和比较
2.1 DIV与SPAN的区别
测试<span>紧跟前面的"测试"显示</span> <div>这里会另起一行显示</div> |
测试紧跟前面的"测试"显示 这里会另起一行显示 |
块元素和行内元素也不是一成不变的,通过定义CSS的display属性值可以互相转化,如:
测试<divstyle="display:inline">紧跟前面的"测试"显示</div> <spanstyle="display:block">这里会另起一行显示</span> |
因为div与span元素的特殊性,所以一般用于应用样式表,比如说用CSS定义为层,而需要分清的是块元素和行内元素的区别,还有两者间的相互转化。
2.2 ID与CLASS的区别
在用CSS来控制网页布局时我们可能都会遇到一个问题:当定义一个属性时,是使用id,还是使用class?下面具体分析:
综上所述,归总起来一句话:id是唯一的并且是父级的,class是可以重复的并且是子级的。
2.3CSS中PX、PT、EM的区别
在网页设计、样式代码编程过程中经常用到的设置字体大小的有px、pt、em等。
px就是表示pixel,像素,是屏幕上显示数据的最基本的点,最小单位;
em,其实就是%,从这个概念上看,em才是真正的“相对单位”。
pt全称为point,但中文不叫“点”,确切的说法是一个专用的印刷单位“磅”,大小为1/72英寸。所以它是一个自然界标准的长度单位,也称为“绝对长度”。
px会随显示器的分辨率而改变,pt会随Windows系统字体大小设置而改变。
设置Windows系统字体大小:桌面上右键 > 属性 > 设置> 高级 > 常规 > DPI设置,默认的是“正常尺寸96DPI”,你可以自定义修改。
px和pt的使用区别,只有当用户改变默认的96DPI下才会产生:使用px定义文字,无论用户怎么设置,都不会改变大小;使用pt定义文字,当用户设置超过96DPI的值,数值越大,字体就越大。
2.4 CSS中PADDING 与MARGIN的区别
margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边
2.5 CSS中DISPLAY的用法
none |
此元素不会被显示。 |
block |
此元素将显示为块级元素,此元素前后会带有换行符。 |
inline |
默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block |
行内块元素。(CSS2.1 新增的值) |
list-item |
此元素会作为列表显示。 |
run-in |
此元素会根据上下文作为块级元素或内联元素显示。 |
compact |
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
marker |
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
table |
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table |
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group |
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group |
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group |
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row |
此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group |
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column |
此元素会作为一个单元格列显示(类似 <col>) |
table-cell |
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption |
此元素会作为一个表格标题显示(类似 <caption>) |
使用CSS display属性,可以重写标签的默认显示,根据非列表元素创建列表或者将列表更改为非列表。
<ul> <li>Raspberry</li> <li>Blackberry</li> <li>Boysenberry</li> </ul> |
Raspberry Blackberry Boysenberry |
该代码是呈列表状显示出来。通过ul li {display:inline;}便把列表状的显示变成显示成在同一行上;又如:
<div id="nav"> <ahref="/">Home</a> <ahref="info">Info</a> <ahref="shop">Shop</a> <ahref="map">Map</a> </div> |
是显示在同一行,但通过div#nav a {display: list-item;}可更改成列表状显示;效果如下:
Home Info Shop Map |
2.6 CSS中BACKGROUND的用法
background-color |
规定要使用的背景颜色。 |
background-image |
规定要使用的背景图像。 |
background-repeat |
规定如何重复背景图像。 |
background-attachment |
规定背景图像是否固定或者随着页面的其余部分滚动。 |
background-position |
规定背景图像的位置。 |
background-repeat 改变背景图片的重复并排的设定
background-image:url("http://www.52css.com/xx.gif"); background-repeat:no-repeat; |
background-image:url("http://www.52css.com/xx.gif"); background-repeat:no-repeat; background-attachment:fixed; |
使用百分比定位 background-position: x% y% (x% 往右移 y% 往下移)
backgroud-position: 0% 0%; |
左边上方 |
backgroud-position: 0% 50%; |
左边中间 |
backgroud-position: 50% 0%; |
中间上方 |
backgroud-position: 50% 50%; |
正中间 |
backgroud-position:100% 0%; |
右边上方 |
backgroud-position: 0% 100%; |
左边下方 |
backgroud-position: 100% 50%; |
右边中间 |
backgroud-position: 50% 100%; |
中间下方 |
backgroud-position: 100% 100%; |
右边下方 |
2.7CSS引用方式IMPORT与LINK的具体区别
我们知道在网页中引用外部CSS有两种方式,即:@import与link,我们也经常听到有人说要使用link来引入CSS更好,下面来具体介绍两种的区别。
<link href="http://www.52css.com/styles.css" type="text/css" /> |
import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件,具体形式
<style type="text/css">@import url("http://www.52css.com/styles.css");</style> |
@import url(../style.css) screen; |
另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你需要使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.
就目前看来小型的网站还是使用link比较合适(或者说比较流行),当然如果将来我们需要把CSS进行模块化管理也肯定要用到@import.
2.8 H1~ H6标签的正确的使用
在我的日常开发中,我最常用到的H1~H4。建议大家把H1~H6都用到。
HTML标签有专门的标签处理页面上的标题。它们是h1,h2,h3,h4,h5和h6,象封建社会一样,h1就是万能的君主而h6就是最底层的百姓。
<h1>主标题,写在这里</h1> <h6>次标题,写在这里</h6> |
注意:h1标签在一个页面只能使用一次——假定它是这个页面的主标题,是不应该使用多次的(相当于一篇文章的题目,你可以有一个副题目,但你不会使用两个并列的题目吧?
但是,h2到h6可以如你所需任意使用多次,但它们应依设计意图,该按顺序使用。比如,h4应该是h3的子标题,h3应该是h2的子标题,以此类推。
第三节DIV+CSS网页布局
通过前面知识点的研究和介绍。对DIV和CSS已经有大概的了解;下面让我们通过下面的例子来讲解DIV+CSS的布局。
第一步:根据用户需求构思系统或软件界面,并用绘图软件把页面绘制出来图片文件如:
第二步:我们需要根据构思图来规划一下页面的布局,仔细分析一下该图,我们不难发现,图片大致分为以下几个部分:
1、顶部,其中又包括了logo、menu和一幅banner图片;
2、内容部分又可分为侧边栏、主体内容;
3、底部,包括一些版权信息。
根据上图,画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。
│body {} |
第三章 CSS编写和命名规范
在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一、代码维护和扩展。由于Web项目开发的分散性、独立性、整合的交互性等,所以定制一套完整的约定和规则显得尤为重要。特制定以下CSS编写和命名规范文档作为本公司以后CSS编写和命名规范。
第一节 CSS样式文件的命名
建立样式表文件时,分类编写样式到下列样式表文件中,并统一放在【CSS】文件夹里:
main.css |
文字样式 |
font.css |
|
表格 |
table.css |
主题 |
themes.css |
打印 |
print.css |
补丁 |
mend.css |
第二节CSS选择符的命名
所有选择符必须有小写英文字母或“_”下划线组成;样式名必须是表示该样式的大概含义;参考后面的“样式命名参考”。
比如:dcrm_logo{ …} dcrm_logo_ico{…}
第三节 图片的命名与书写
图片的命名原则小写英文字母名称放在头尾两部分,用“_”下划线隔开,头部表示此图片的大类性质例如广告、标志、菜单、按钮等等;尾部表示图片的概念。
广告 |
banner |
标志 |
logo |
链接的小图片 |
button |
装饰图 |
pic |
标题的图片 |
title |
||
banner_sohu.gif 、banner_sina.gif、 menu_about_us.gif、menu_job.gif、 title_news.gif、 logo_police.gif、 logo_national.gif、pic_people.jpg |
第四节CSS注释书写规范
4.1 提示和标签信息注释
这是注释最常用的途径,可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。这种应用简洁性最为重要。
.search{ border:1px solid#fff; } |
4.2 修改样式注释(时间和相关人员)
4.3 文档结构
.search{ border:1px solid #fff; } .menul_ul{ border:1px solid #fff; } |
第五节CSS布局编码标准和建议
5.1 建立样式表索引
5.2 命名锚点 的使用
*==STRUCTURE:=============================================== $__header HeaderDefinitions $__menu Global Site $__content Everything within the content -----------------------------------------------------------------------------------------------*/ {...Header CSS Definitions...} {...Header CSS Definitions...} |
5.3 建立良好的CSS编码顺序
最后定义的 CSS 样式将会覆盖在其之前定义的所有已经存在、或与之冲突的样式,比如下面这个例子:
p { color: red; background: yellow;} p { color: green;} |
5.4 合适的缩写
在CSS中经常会利用缩写把多个相同类型的属性定义指定为一个。CSS缩写会使CSS文档更加干净、简洁;缩写语法参考相关章节。
5.5CSS图像拼合(即CSS Sprites技术)
苹果官方网站的菜单设计是CSS Sprites技术应用非常好的案例:
5.6 CSS组合和嵌套
你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。
h2 { color: red;} .w3cbbs { color: red;} .w3cbbs_52css { color: red; } 则你可以这样写h2,.w3cbbs,.w3cbbs_52css { color: red; } |
CSS结构好的话,没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。
#top { background-color: #ccc; padding: 1em;} #top h1 { color: #ff0; } #top p { color: red; font-weight: bold; } |
第六节常用CSS选择符命名参考
导航 |
nav |
页头 |
header |
主导航 |
mainnav |
页面主体 |
main |
顶导航 |
topnav |
内容 |
content |
子导航 |
subnav |
页脚 |
footer |
菜单 |
menu |
版权 |
copyright |
子菜单 |
submenu |
登陆 |
login |
标志 |
logo |
侧栏 |
sidebar |
广告 |
banner |
搜索 |
search |
滚动 |
scroll |
标签页 |
tab |
小技巧 |
tips |
合作伙伴 |
partner |
加入 |
joinus |
标题 |
title |
注册 |
regsiter |
指南 |
guild |
新闻 |
news |
下载 |
download |
按钮 |
button |
状态 |
status |
服务 |
service |
投票 |
vote |
注释 |
note |
友情链接 |
friendlink |
提示信息 |
msg |
注意:命名方式使用“类别_功能”的方式(.bar_news{} .bar_product{})。
第四章 CSS高级应用与技巧
第一节 CSS缩写语法
1.1 颜色
#000000 |
#000 |
#336699 |
#369 |
1.2 盒尺寸
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 |
1.3 边框(border)
border-width:1px; border-style:solid;border-color:#000; |
可以缩写为一句:border:1px solid #000;语法是border:width style color;
1.4 背景(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: scrollposition: 0% 0% |
1.5 字体(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% "LucidaGrande",sans-serif; |
注意:如果你缩写字体定义,至少要定义font-size和font-family两个值。
1.6 列表(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); |
第二节 CSS代码优化
2.1 高效CSS属性的简写
2.2 避免使用Hack
Hack是一个糟糕的东西,它会为不同浏览器定义一样的代码,使得CSS繁冗。
2.3 使用留白
对比上图中的两种CSS书写格式,哪一种格式能让你更加节约阅读和修改的时间呢?留白的效果显而易见,它会让你更容易管理代码。
2.4 移除多余的结构(frameworks)和重设(resets)
2.5 让CSS能保证日后的维护
另一种优化CSS代码的方法是按照你的习惯将CSS生命分成清晰的结构块。将CSS文件的声明用注释分隔开并进行排版,可以更方便自己在很长时间以后重新审理这个CSS文件,到那时你的效率会高出许多。
2.6 记录你的工作
2.7 压缩使用
常用的在线压缩工具:http://www.csstip.cn/
2.8 增加代码的重用率
代码重用是CSS的优势之一,把相同的属性写到公有样式里;不必每条样式表都写同样的内容。
2.9 明确定义单位,除非为0
2.10 区分大小写
当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,规定所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。
第三节 CSS圆角样式的应用
3.1 固定宽度的圆角框
最容易创建的是固定宽度的圆角框。它们只需要两个图像:一个图像用于框的顶部,另一个用于底部。例如,假设希望创建下图这样的框样式。
<div class=”box”> <h2>Headeline</h2> <p>Content</p> </div> |
需要用图形软件创建两个这样的图像:一个图像用于框的顶部,另一个用于底部。
然后,将顶部图像应用于标题元素,将底部图像应用于div框的底部。因为这个框样式是单色的,所以可以在div框上添加背景颜色,从而形成框的主体。
.box{ Width:418px; Background:#effce7url(images/bootome.gif) no-repeat left bottom;} .box h2{ Background:url(images/top.gif) no-repeat left top;} |
我们不希望内容碰到框的边界,所以还需要在div中的元素上添加一些填充:
.box h2{ Padding:10px 20px 020px;} .box p{ Padding:0 20px 10px20px;} |
3.2 内容自动延的圆角
处理此类圆角是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作。我们将会这样做:
第一步:创建我们的 Sprite
1)为矩形圆角图片处理选择一款编辑器 (在这个案例中选择的是Firework).
2)新创建一个文件,将圆角导入到这个新文件中,复製三次,然后旋转这三个新切片得到另外的三个圆角。
3)合成四个圆角为一张图片,并用 1px 的红线 来区分它们。
第二步:HTML 原始码
<divclass="roundedbox"></div> |
现在,我们必须再增加四个 div ,这会在将来创建圆角的时候用到。之后必须给每个加载一个类.corner,同时也标识一个类来指定它们格子的位置。
<div class="roundedbox"> <strong>My content in roundedBoxType 1</strong> <div class="cornertopLeft"></div> <div class="cornertopRight"></div> <div class="cornerbottomLeft"></div> <div class="cornerbottomRight"></div> </div> |
第三步:CSS 原始码
让我们先来定义下所有的圆角:所有的圆角都必须定义绝对定位,并且注明高度跟宽度。圆角定义的宽度跟高度都是 17px。
.corner { position:absolute; width:17px; height:17px; } |
.roundedbox {position:relative;} |
.roundedBox { position:relative; padding:17px; margin:10px 0;} |
我们会对每个圆角作绝对定位设置,并且定位背景图的位置 (根据我们的 sprite):
.roundedbox { position:relative; padding:17px; margin:10px 0;} .corner { position:absolute; width:17px; height:17px;} .topLeft { top:0; left:0; background-position:-1px -1px;} .topRight { top:0; right:0; background-position:-19px -1px;} .bottomLeft { bottom:0; left:0; background-position:-1px -19px;} .bottomRight { bottom:0; right:0; background-position:-19px -19px;} |
第四节CSS滑动门技术的应用
其实CSS滑动门这个概念早在几年前就已经出现了,只是近来年被提得比较多而已。但是常常有人把它跟选项卡效果混淆在一起。
<div class =”box”> <div class=” box-outer”> <div class =” box-inner”> <h2>Headline</h2> <p>Content</p> </div> </dic> </div> |
.box{ width:20em; background:#effce7url(images/bottom-left.gif) no-repeat left bottom;} .box-outer{ background:url(images/bottom-right.gif) no-repeat right bottom; padding-bottom:5%;} .box-inner{ background:url(images/top-left.gif) no-repeat left top ;} .box h2{ background:url(images/top-right.gif) no-repeat right top; padding-top:5%;} box h2,.box p{ padding-left:5%; padding-right:5%;} |
在这个示例中,我以em为单位设置框的宽度,所以在浏览器中增加文本尺寸时框会伸展如下图。当然,可以用百分数设置宽度,这使框根据浏览器窗口的尺寸进行扩展或收缩。这是弹性和灵活布局背后的主要原则之一。
第五节小提示窗口的应用
第六节折叠标签的研究的应用
<ul id="menu"> |
*{ margin:0px; padding:0px;} #menu { overflow:hidden; margin:10px; width:200px; background:#000000;} #menu h1 { font:normal 14px/14px "黑体"; color:#FFFFFF;} #menu li { display:block; padding:10px; width:178px; border:1px solid #FFCC00; border-top-width:0px; list-style:none;} #menu li.end {border-top-width:1px;} #menu li a { display:block; width:100%; text-decoration:none;} #menu li a span { display:none; padding:10px 0 0 0; font:normal 12px/12px "宋体"; color:#666666;} #menu li a:hover { background:#000000;} #menu li a:hover span { display:block;cursor:hand;} |
#menu li a span { display:none; padding:10px 0 0 0; font:normal 12px/12px "宋体"; color:#666666;} #menu li a:hover span { display:block; cursor:hand;} |
#menu li a span 这个样式中的display:none;设置隐藏,因为原始状态span是在a标签下,只让a链接下的其他元素显示,span 下的内容全部隐藏。
#menu li a:hover span 这个样式display:block;设置块状也就是显示的意思,当鼠标滑过a链接span显示块状,然后就可以把里面的内容显示出来。
第五章 DIV+CSS浏览器兼容研究
第一节CSS HACK 汇总速查一览
浏览器 |
Hack(不支持的为红色) |
IE6 |
“*” “_” “\9” “!important” |
IE7 |
“*“ “_” “\9” “!important” |
IE8 |
“*“ “_” “\9” “!important” |
FF |
“*” “_” “\9” “!important” |
.main{ background-color:#CC00FF; ---------ALL background-color:#FF0000\9; ------------IE8 *background-color:#0066FF; -------------------IE7 _background-color:#009933; --------------------------IE6 background-color:#000000!important;}---------------------------FF |
第二节 常见兼容问题整理
2.1 DOCTYPE 影响 CSS 处理
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Frameset.dtd"> |
Strict类型:严格类型,使用时浏览器将相对严格,不允许使用任何表现形式的标识和属性,如在元素中直接使用bgcolor背景色属性等。
Frameset类型:框架页类型,如果网页使用了框架结构,就有必要使用这样的文档声明。
2.2 编码差异导致IE6不能正常解析CSS文件
方法一:把 CSS、JS 和网页文件都统一保存为 UTF-8 格式。
2.3 FORM标签在IE自动增加MARGIN边距
2.4 UL标签
UL标签在Mozilla中默认是有padding值的,而在IE中只有margin有值;
2.4 MARGIN加倍的问题
置为float的div在IE下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;例如:
<divid="imfloat"></div>相应的CSS为
DIV+CSS技术的研究相关推荐
- 【入门须知】学DIV CSS技术如何入门?
[入门须知]学DIV CSS技术如何入门? 引言: 引用一本书中的一段文字:"当我第一次开始学习汉语时,我的家庭老师老王给了我一本汉英字典.一本汉语语法书和一本初级教程.但是,他将这些书放 ...
- html如何实现表格效果,DIV+CSS技术实现类似table表格的效果
当前位置:网站首页 >> 网站技术 >> DIV+CSS技术实现类似table表格的效果 [发布人:站长之家 发布日期:2015-04-03] 表格在网页制作中使用非常广 ...
- html中的分离式布局,DIV+CSS技术在网页布局中的应用
摘 要 信息科学技术的进步使得互联网技术行业快速发展起来.其中网页设计作为互联网技术行业中重要的一部分,应用先进技术提高其工作效率与工作质量具有重要意义.DIV+CSS技术在网页布局中的优势作用使得其 ...
- 最完整的div+css技术入门知识(一)
常用代码结构: div:主要用于布局,分割页面的结构 ul/ol:用于无序/有序列表 span:没有特殊的意义,可以用作排版的辅助,例如: 引用内容 <li><span>(4. ...
- 用DIV+CSS技术制作一个简单的网页 我的家乡主题
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- DIV CSS BackGround属性研究
在设置background-image属性时,有很多属性 1.background:url("图片路径") [no-repeat]; background:url(".. ...
- 用DIV+CSS技术制作个人博客网站(web前端网页制作课期末作业)
- 什么是前端?以及HTML/DIV+CSS/JavaScript技术是什么?(1)
这篇文章适用范围: 适用于:对前端.HTML/DIV+CSS/JavaScript有所耳闻,但是不理解含义 不适用:学习过3天以上前端的入门者(-.- )你去看点高阶的好么.. ...
- DIV+CSS布局的优势和弊端
DIV+CSS的优势 1.符合W3C标准.这保证您的网站不会因为将来网络应用的升级而被淘汰. 2.对浏览者和浏览器更具亲和力.由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到 ...
最新文章
- Oracle基础 动态SQL语句
- R语言关联规则挖掘数据集预览、分析、筛选:项目数的分布形态(分位数、密度图)、itemFrequency函数统计每一项目在所有事务中出现的次数、最常发生的项目、数据筛选(交易的集合项目大于1)
- loop设备做LVM
- 成功解决AttributeError: module 'numpy' has no attribute 'equal'
- Exchange系列—使用系统自带的备份工具来备份数据库
- 阿里云弹性计算负责人蒋林泉:亿级场景驱动的技术自研之路
- 有关ElasticSearch的基本概念
- ifconfig没有ip地址_虚拟机创建后该如何获取IP地址并访问互联网实用教程
- 基本操作2-常用命令
- PHP图片与文字合成
- Png怎么转jpg?这种方法教你如何快速转换
- 堆栈c语言 矩形填色,堆栈涂色官方版下载|堆栈涂色安卓版v0.1下载 - 一游网手机游戏...
- phpcms数据库备份与恢复_Phpcms一键清理数据后完整找回数据
- mysql密码认证插件_关于mysql:无法加载身份验证插件’caching_sha2_password’
- 使用CFile类的Write()向.txt文档中写入数据
- 亚马逊国际站通过ASIN获取商品信息
- Python将图片转换为字符画
- Github即将破百万的PDF:编写高质量代码改善JAVA程序的151个建议
- 安卓玩机搞机技巧综合资源-----“另类更新“偷渡”操作步骤 无需解锁bl 无需内侧用户【十三】
- Java设计模式之观察者模式(UML类图分析+代码详解)