DIV+CSS 网站设计的研究和探讨

浏览82次 时间:2014年2月25日 16:47

/张英1 引言

DIV+CSS 是网站标准(或称WEB标准)中的常用术语之。div html(超文本语言)中的一个元素,div+css 是一种网页布局的方法。

2 CSS的样式及引用

1)样式定义放在一个单独的后缀名为.CSS 文件中。

元素{ 属性color:值red} head 段使用<link> 标记,引用语法:<link rel=stylesheettype=text/csshref=样式表地址/>

2)嵌入式样式表:

<style> 元素段必须出现在head 段内,有一个开始和结束标记, 并且可以有多个<style> 段语法格式: <style type=text/css>

3)在嵌入式样式表中我们可以使用@import 导入一个外部样式表<style type=text/css>@import url( 外部样式表URL)……其它嵌入式的样式定义……</style>

3 DIV+CSS实例及技巧

3.1 div css布局中CSS图片大小自动等比例缩小图片不变形的解决技巧第一种,让图片和布局宽度高度成等比例,这样CSS 设置死宽度和高度,图片也是等比例缩小,图片也不会变形。第二种, 使用CSS max-width maxheight实现图片自动等比例缩小很简单我们要使用到max-width maxheight,这样即可设置对象的图片最大宽度和最大高度,这样图片就会等比例缩放图片,而图片相对不变形清晰。

3.2 DIV CSS无法显示背景颜色问题分析解决

1)由于使用float 造成浮动产生无法显示css 背景颜色。如果对一个对象设置了background 背景颜色样式,该对象内部盒子有使用float 浮动属性样式,这个时候该对象浮动产生,会导致该对象不能撑开,所以css 背景颜色就不能无法正常显示,解决方法有三种,一个是设置clear 清除浮动、设置css 高度、设置cssoverflow 样式。

2)由于高度限制造成了背景颜色不能显示完整。

假如你有个对象没有计算好高度,因不确定内容有多少,当内容超过你设置高度限制,这个时候超出部分背景就可能无法显示,这样只要设置够高的高度,或者取消删除高度样式即可;如果你想限制高度,又不想内容过多溢出你设置高度限制,那我们可以设置对应样式overflow:hidde,这样设置后,假如DIV 对象设置一定宽度高度,此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。

3.3 DIV重叠问题的解决

重叠样式需要主要CSS 样式解释

1z-index 重叠顺序属性。

2position:relative position:absolute设置对象属性为可定位(可重叠)。

3left right top bottom 绝对定位具体位置设置。配合的样式

1css width

2css height

3background 为了观察效果,我们对不同DIV 设置不同背景颜色进行区别。接下来我们要让DIV 按自己意愿重叠、叠加。下面我们通过一个例子来解决,新建4 DIV 盒子,一个大的DIV 盒子,CSS 命名为.div-relative, 三个小DIV 盒子放于第一个大DIV 对象盒子内,DIV 命名分别为.div-A.div-B.div-C。效果A:未排序、为排顺序DIV 层叠重叠我们可使用position 实现绝对定位,对父级设置position:relative 属性,对其子级设置position:absolute 加上left right top bottom 实现子级在父级内的任意定位。在原始情况下重叠是按DIV 代码本身顺序排列的,越后输入的DIV盒子就越靠前(浮在最上面)。除了改变源代码本身div 代码在html 中的顺序,我们还可以使用css z-index 实现DIV 层排列顺序。

效果B:通过CSS 控制DIV 重叠顺序我们使用以上绝对定位实例代码,只需要对.div-A.div-B.div-C分别加入z-index 样式即可实现任意顺序的排列。index 的值为正整数值,数字越大对应对象层越浮上层越靠前。

3.4 jQuery适用技巧笔记整合

1)关于网页元素的引用。

通过jQuery $() 引用元素包括通过IDCLASS、元素名以及元素的层级关系及dom 或者xpath 条件等方法,且返回的对象为jQuery 对象(集合对象),不能直接调用dom定义的方法。

2jQuery 对象与dom 对象的转换。只有jquery 对象才可以使用jquery 定义的方法。dom 对象和jquery 对象是有区别的,调用方法的时候要注意操作的是dom 对象还是jquery 对象,普通的dom 对象可以通过$()转换成jquery 对象。但由于jquery 对象本身是一个集合,所以如果jquery 对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。

3)如何获取jQuery 集合中的某一项。对于获取的元素集合,获取其中的某一项可以使用eq get(n) 或者索引号的方法获取,要注意的是,eq 返回的是jquery 对象,而get(n) 和索引则返回的是dom 元素对象。对于jquery 对象只能使用jquery 的方法,而dom 对象只能使用dom 的方法。

参考文献

[1]

TAG: 网站设计
上一篇 下一篇

论文发表 论文投稿 热点图片