前面我们说了几个在网页中添加文字,图片,flash媒体文件等网页基本元素的添加方法.当我们把这些东西放到网页中的时候,我们会发现,他们按照先后顺序显示出来,如果我们要把他们放到我们想要的位置就不知道怎么办了..这节我们介绍div层标签<div></div>..它能很好的地帮我们定义其他网页标签的位置,只要把其他标签镶嵌在你定义的<div></div>里面就可以按照你的规则设定位置了..同时div就组成了网页的基本结构,学这个的时候到是可以联想一下搭房子...
先给大家一个基本印象:
格式: <div id="名称" class="类" style="样式" ></div>
div层中属性也存在于其他标签中,貌似我接触到的标签都有这些属性,为了方便我们经常在层中定义这些属性让网页变得简洁,有规律,方便修改...
id:就是给标签起个名字,你想什么名字就什么名字,这个名字在查找,写样式的时候常用...大家可以尝试着打开主页的源文件看看 里的ID..关于5Q主页里面的ID大家可以参考 这里
class 类: 也相当于一个名称,也是你自己定义的..
style 样式: 这个才是主角,里面的东西很多,包括定义层的背景,大小,位置,边框,字体,颜色等等...这个也就是传说中的css,如果要知道style里面到的有些什么东西先看看这里 ,这里面也不是所有...要全面的就进http://www.microsoft.com/
先讲一下style怎么用,我们用定义背景图片和字体颜色的方法做解释:
<div id="Layer" class="class1" style="background:url(http://photos.album.5q.com/59/36/6b/bed9bfe/1148119738921.jpg);color:#00CC66;" ></div>
上面这段也蛮好理解,先给层定义个ID为Layer,类为class1
在设置样式的时候:把背景background定义成http://photos.album.5q.com/59/36/6b/bed9bfe/1148119738921.jpg,把层里面的颜色,也就是字体颜色color定义为#00CC66;
然而在我们写主页代码的时候,对于主页上的div层,我们总不能把style=""加到div里面去吧...下面我们介绍一下style的另一种写法,这个就要用到id和class,先看看下面这个:
<style>
div #Layer{
background:#F1FAFA;
color: #0099CC;
}
div .class1{
background-color:#FBFBEA;
color:#000000;
background:#F1FAFA;
}
</style>
在上面这段代码中,我们看到了一个<style></style>标签,其实也就是说明一下里面的内容是写的样式..
首先看到了div #Layer这个的意思是说在div标签中的ID为Layer的层,如果你用的其他标签,例如是链接<a></a>标签中的就变成 a #Layer了,如果不写前面的,例如直接写#Layer,浏览器默认为div,所以在很多css中大家没看到前面这个东西...而只看到什么a{}之类的,他们是设定所有标签为<a></a>的样式..{}中的就是样式内容
后面那个div .class1的意思是说div标签中 class类为class1的层,方法和id一样,前面那个div也可以省略..不同的是你可能在不同层中设定了相同的calss类,但没有相同的id..如果都设定了同一种样式属性,后面的会把前面的覆盖掉,大家在5Q主页中去掉头像后面的白色背景就是写一个background:none;把前面的覆盖了..如果你一定要让前面的显示出来就在属性后面添加个!important,例如:background:none !important;具体用法还得靠大家在实践中摸索...在5Q主页中,<style></style>中的内容大家可以到这里参考...
style除了这种写法以外,还有一种以扩展名css为的文本地址引用方式..也就是大家看到的这种东西:
<style>@import url("http://img.5q.com/css/base.css");</style>
这个东西其实就是把网页中<style></style>中的内容放到一个记事本里面(注意:<style></style>这个标签不要放进去),然后传到网站上,把地址用上面那种方法引用到网页中即可...
下面我们介绍一下写代码的时候几个常用的样式属性,需要具体详细介绍还得去这里
| 用途 | 样式 | 值 | 解释 |
| 背景 | background-image: | url(图片地址); | 就是设置背景图片, |
| background-color: | 颜色值 | 设定背景颜色,可以是颜色的16进制码,也可以是其他的,例如:#003366; | |
| background-attachment: | fixed,inherit,scroll | 这个是设置背景是否随滚动条滚动的,fixed为固定不动..如果不填默认为滚动的 | |
| background-repeat: | no-repeat;repeat-x;repeat-y; | 这个是设定背景图片平铺方式的,no为不平铺,-x为横向平铺,-y为纵向平铺,意思是如果背景图比层小就会铺一张同样的在后面 | |
| 颜色 | color: | 颜色值 | 设定前景颜色,例如字体颜色.可以是颜色的16进制码,也可以是其他的,例如:#003366; |
| 文字 | font-family: | 宋体,黑体,楷体_gb2312,隶书, | 文字的字体~```其他字体没有列出来 |
| font-size: | 9px,12px,24px,36px | 文字的大小,一般以象素px为单位,从9到36大家试试看大小 | |
| 是否显示 | display: | block,none | 这个是大家蛮喜欢的咚咚,如果你要让某个层不在浏览器中显示,就把这个值设置为none,显示就是block |
| 大小 | width: | 100px; | 这2个东西大家不陌生,就是宽度和高度,值一般为象素单位,前面那个100你随便修改,分辨率为1024*768时,768就是显示器高度,1024就是显示器宽度 |
| height: | 100px; | ||
| 位置 | top: | 100px; | 层距离外层顶部的距离,意思是说如果这个层被镶嵌在另外一个层中,那么这个数值的意思里面的层距离外边层顶部的距离..数值定义和上面width:一样 |
| left: | 100px; | 同上的左边距离 | |
| right: | 100px; | 同上的右边距离 | |
| bottom: | 100px; | 同上的底部距离 | |
| z-index: | 数字; | 这个东西就是设定层的层叠顺序,如果几个层叠在一起了,这个东西就设定先后顺序,数字大的显示在外面 | |
| position: | absolute,relative | 当值为absolute时,对层的位置进行绝对定位,意思是定义了什么位置就是什么位置,也只有这个时候z-index才起作用,当值为relative时,这个层不能叠加到别的层上去 | |
| 边框 | border: | 数字; | 这个是设置边框宽度,值为数字.一般在2左右.边框弄那么宽干什么 |
| border-color: | 颜色值; | 和其他颜色设置一样; | |
| border-style: | none,dotted,dashed,solid, | none :无边框.dotted : 点线.dashed :虚线.solid : 实线.double : 双线边框.groove :3D凹槽.ridge : 菱形边框.inset : 3D凹边.outset :3D凸边.具体实践是看效果 | |
| 鼠标 | cursor: | url(鼠标地址); | 这个就是设置层中鼠标的，你可以为你想要的层设置鼠标，也就是说不同的层可以设置不一样的鼠标。后面那个写鼠标地址，一般是cur后缀的 |
| 透明度 | filter: | alpha(opacity=数字); | 这个是滤镜效果，css里面的滤镜效果有很多，这个只是其中的透明效果，它把一个层包括层背景一起透明，后面那个数字为0－100，0为完全透明，甚么也看不见 |
下面是一个写样式的工具,功能不全,可以用用：(预览可以查看你设置的代码的效果)
背景图片： (图片地址)
是否显示： 是 不是
宽度： px 高度： px(单位以经写了,只填写数字)
顶部间距： px 左边间距： px 右边间距： px 底部间距： px
层叠顺序： 位置设定： 绝对定位 相对定位
设置鼠标： (地址)
设置透明度： (0～100数字)
添加标签中的内容：(如果不填写,就只写入style样式,内容可以是其他代码标签)
地址:http://www.5qxn.com/study/html/html_7.html
607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
