码迷,mamicode.com
首页 > Web开发 > 详细

定位网页元素(5)

时间:2017-05-17 21:09:31      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:doctype   1.0   body   透明度   public   部分   gb2312   play   index   

1.元素定位(position)
static:默认
relative:相对定位
absolute:绝对定位
flxed:固定定位(建议不要用,部分浏览器不兼容)
2.层叠关系(z-index)
默认值为:0
值可以是任何整数
值越大,位置在越前面
3.透明度
opacity:0~1值越小越透明

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>彩妆热卖产品列表</title>
 6 <link href="css/cosmetics.css" rel="stylesheet" type="text/css" />
 7 </head>
 8 <body>
 9 <div id="cosmetics">
10   <p class="title">大家都喜欢的彩妆</p>
11   <ul>
12     <li><a href="#"><span>1</span>Za姬芮新能真皙美白隔离霜 35g
13       <div><img src="image/icon-1.jpg"  alt="Za姬芮新能真皙美白隔离霜" />
14         <p>¥62.00  最近69122人购买</p>
15       </div>
16       </a></li>
17     <li><a href="#"><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml
18       <div><img src="image/icon-2.jpg" alt="美宝莲精纯矿物奇妙新颜乳霜BB霜" />
19         <p>¥89.00  最近13610人购买</p>
20       </div>
21       </a></li>
22     <li><a href="#"><span>3</span>菲奥娜水漾CC霜40g
23       <div><img src="image/icon-3.jpg" alt="菲奥娜水漾CC霜" />
24         <p>¥59.90  最近13403人购买</p>
25       </div>
26       </a></li>
27     <li><a href="#"><span>4</span>DHC 蝶翠诗橄榄卸妆油 200ml
28       <div><img src="image/icon-4.jpg" alt="DHC 蝶翠诗橄榄卸妆油" />
29         <p>¥169.00  最近16757人购买</p>
30       </div>
31       </a></li>
32   </ul>
33 </div>
34 </body>
35 </html>
代码示例

 

定位网页元素(5)

标签:doctype   1.0   body   透明度   public   部分   gb2312   play   index   

原文地址:http://www.cnblogs.com/yang82/p/6869350.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!