网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。 【实例介绍】 z-index空间位置 CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。 在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 z—index属性设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元 素的前面。 【基本语法】 z-index:auto | 数字 【语法介绍】 z—index属性的值为整数,可以为正数也可以为负数。当块被设置为position时.该值便可 设置各块之间的重叠高低关系,默认的z-index值为0。auto参数遵从其父对象的定位:数字必 页是无单位的整数值,可以取负值 【实例代码】
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>层叠顺序</title>
<style type="text/css">
<!--
.img {
position:absolute;
top: 25px;
right: 20px;
left: 25px;
bottom: 20px;
z-index: 1;
width: 394px;
height: 398px;
}
.text {
font-size: 12px;
position: absolute;
top: 35px;
right: 20px;
left: 38px;
bottom: 25px;
z-index: 2;
height: 130px;
}
-->
</style>
</head>
<body>
<div><img src="images/bj.jpg" width="330" height="352" class="img" /></div>
<div class="text">
<p>尺寸:均码</p>
<p>肩宽36CM 胸围86CM 裙长87CM 袖长60CM</p>
<p>这款连衣裙部分下摆雪纺花在右边,此类不算质量问题。</p>
<p>小店商品基本上都是现货销售,但是由于商品流动迅速和难以预测难免会出现暂时的缺货断码断色问题,所以请亲们拍前务必和掌柜联系询问是否有货; 对于直接拍下付款但没有现货的情况,掌柜会第一时间主动联系协商推迟发货或者退款问题。 </p>
<p><br>
</p>
</div>
</body>
</html>
【代码分析】 此段代码中,首先在<head></head>之间用<style>定义了img标记中的position属性为 absolute,z-index为1表示默认最底层,定义了text标记中的position属性为absolute。z-index, 为2,然后分别对图像和段落文本应用img和text样式。由于图像的z-index是1,因此它在文 本的后面出现。在浏览器中预览,效果如图18.17所示。 【素材及源码下载】 请点击:css z-index空间位置 下载本实例相关素材及源码
网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。 |