首页 > 代码库 > 定位网页元素(5)
定位网页元素(5)
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="http://www.mamicode.com/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="http://www.mamicode.com/#"><span>1</span>Za姬芮新能真皙美白隔离霜 35g 13 <div><img src="http://www.mamicode.com/image/icon-1.jpg" alt="Za姬芮新能真皙美白隔离霜" /> 14 <p>¥62.00 最近69122人购买</p> 15 </div> 16 </a></li> 17 <li><a href="http://www.mamicode.com/#"><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml 18 <div><img src="http://www.mamicode.com/image/icon-2.jpg" alt="美宝莲精纯矿物奇妙新颜乳霜BB霜" /> 19 <p>¥89.00 最近13610人购买</p> 20 </div> 21 </a></li> 22 <li><a href="http://www.mamicode.com/#"><span>3</span>菲奥娜水漾CC霜40g 23 <div><img src="http://www.mamicode.com/image/icon-3.jpg" alt="菲奥娜水漾CC霜" /> 24 <p>¥59.90 最近13403人购买</p> 25 </div> 26 </a></li> 27 <li><a href="http://www.mamicode.com/#"><span>4</span>DHC 蝶翠诗橄榄卸妆油 200ml 28 <div><img src="http://www.mamicode.com/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)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。