一、DIV标记与SPAN标记
div和span都可以作为一个容器,集体控制容器内的样式
区别是div使块级元素,前后会有换行
而span是行内元素,前后不会换行
div内可以有span,而span内不能有div
二、盒子模型
1,概念
任何页面元素都可以看成一个盒子
一个盒子模型由content、padding、border、margin四部分组成
width(height)的值指content的width(height)+padding的值
2,border
color
width: thin、medium、thick、数值
style: none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
border-top、border-bottom、border-left、border-right
IE不支持border-style
background-color在IE中指content+padding,FF中指content+padding+border
3,padding
padding-top、padding-bottom、padding-left、padding-right
4,margin
margin-top、margin-bottom、margin-left、margin-right
对一行而言,两个块的margin = margin-right + margin-left
对换行而言,两个块的margin = margin-bottom和margin-top中较大者
对父子而言,子块的margin = 子块的margin + 父块的padding
当margin设为负数时,块会向相反的方向移动,甚至覆盖另外的块
三、元素的定位
1,float
值可以为left、right或默认none,left和right分别向父元素的左侧或右侧靠紧
可以设置clear: left、right、both来清除float对其的影响
2,position
static: 默认值,保持原位
absolute: 绝对位置,top、bottom、right、left可以指定绝对值或百分比,CSS默认后加入到页面的元素会覆盖之前的原始
relative: 相对父块来定位,top、bottom、right、left
fixed: 本质上和absolute一样,但是块不会随着浏览器滚动条而上下移动,IE不支持fixed属性
3,z-index
z-index指垂直与页面方向的z轴,z-index值大的块位于值小的块上面,会形成覆盖效果
四、图片签名
<div id="block1"><img src="building.jpg" border="0"></div>
<div id="block2">xxx's photo</div>
#block1 {
padding: 10px;
border: 1px solid #0000;
float: left;
}
#block2 {
color: white;
padding: 10px;
position: absolute;
left 255px;
top: 205px;
}
五、文字阴影
<div id="block1">CSS定位阴影</div>
<div id="block2">CSS定位阴影</div>
#block1 {
position: relative;
z-index: 1;
}
#block2 {
color: #AAAAAA;
position: relative;
top: -1.06em;
left: 0.1em;
z-index: 0;
}
分享到:
相关推荐
精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局....
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局...
《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar
正在学习css+div的朋友应该都知道这几本书吧,《精通css+div 网页样式与布局》还有《css设计彻底研究》这些书都非常好,现在将《精通css+div 网页样式与布局》的ppt文件传上来,这样大家就可以不用买实体书了,至于...
《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript...
精通css+div 1,2,8,9,10章
《精通CSS+DIV网页样式与布局》实例源码.rar
精通CSS+DIV网页样式和布局 5个完整网站的CSS+DIV布局和美化方案
CSS+DIV网页样式与布局 精通CSS+DIV网页样式与布局
精通CSS+DIV网页样式与布局 语言:中文 格式:txt 使用前请您先阅读以下条款,否则请勿使用本站提供的文件! 1) 本站不保证所提供程序的完整性和安全性。 2) 请在使用前查毒 (这也是您使用其它网络资源所必须注意...
精通css+div样式和布局源码.rar精通css+div样式和布局源码.rar精通css+div样式和布局源码.rar精通css+div样式和布局源码.rar
《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript,Ajax,...
精通CSS+DIV网页样式与布局(附书源码)
精通CSS+DIV网页样式与布局完整源代码
CSS+DIV布局案例CSS+DIV布局案例CSS+DIV布局案例CSS+DIV布局案例
精通CSS+DIV网页样式与布局
精通CSS+DIV网页样式与布局完整版
精通CSS+DIV网页样式与布局一书中的实例.整本书中充斥着实例.
随着Web 2.0的大潮席卷而来,网页标准化CSS+DIV的设计方式正逐渐取代传统的表格布局模式,对CSS的学习也成为设计人员的必修课。 本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行...
精通CSS+DIV网页样式与布局8-9章实例 非常好,是最新的 打包下载