溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“HTML子絕父相實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“HTML子絕父相實例分析”吧!
一、子絕父相
1.只使用相對定位，對圖片的位置進行精準定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
width:800px;
height:50px;
background-color: red;
margin:0 auto;
}
ul li{
float:left;
width:100px;
height: 50px;
text-align:center;
background-color: yellow;
line-height: 50px;
}
ul li:nth-of-type(4){
/*這里復(fù)習(xí)了同類標(biāo)簽選擇第幾個進行設(shè)置它的樣式*/
background-color: blue;
}
ul li img{
position:relative;
left: -30px;
top: -14px;
width: 20px;
height: 16px;
/*這里可以先寫個大概的數(shù)字，然后利用谷歌開發(fā)者定位進行滾動數(shù)據(jù)調(diào)節(jié)*/
}
</style>
</head>
<body>
<ul>
<li>拍賣金融</li>
<li>美妝館</li>
<li>京東超市</li>
<li>
全球購<img src="bear.jpg">
</li>
<li>閃購</li>
<li>團購</li>
<li>拍賣</li>
<li></li>
</ul>
</body>
</html>
這種方式的的缺點：可以看到雖然利用相對定位進行了數(shù)據(jù)調(diào)節(jié)來達到讓圖片定位的效果，但是由于相對定位是在標(biāo)準流的基礎(chǔ)上進行調(diào)節(jié)，所以原來圖片的位置（也就是全球購后面的那塊區(qū)域）依然是被占用著的。
2.下面只使用絕對定位來進行試驗。
ul li img{
position:absolute;
left: 900px;
top: 1px;
width: 20px;
height: 16px;
}
?這種方式的缺點：上次連載說到，絕對定位會以首屏來進行定位，因此當(dāng)改變網(wǎng)頁大小的時候，將會造成變形，定位到了?不合理的地方。
3.因此要同時運用絕對定位和相對定位進行編排才最合理
ul li:nth-of-type(4){
/*這里復(fù)習(xí)了同類標(biāo)簽選擇第幾個進行設(shè)置它的樣式*/
background-color: blue;
position:relative;
}
ul li img{
/*介紹一個方法：子絕父相，即子元素使用絕對定位，父元素使用相對定位*/
position:absolute;
left: 41px;
top: 1px;
width: 20px;
height: 16px;
}到此，相信大家對“HTML子絕父相實例分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼