HTML子絕父相實例分析
本篇內容主要講解“HTML子絕父相實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML子絕父相實例分析”吧!
公司主營業(yè)務：成都做網站、網站建設、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現互聯網宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯建站推出遜克免費做網站回饋大家。
一、子絕父相
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){
/*這里復習了同類標簽選擇第幾個進行設置它的樣式*/
background-color: blue;
}
ul li img{
position:relative;
left: -30px;
top: -14px;
width: 20px;
height: 16px;
/*這里可以先寫個大概的數字，然后利用谷歌開發(fā)者定位進行滾動數據調節(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>
這種方式的的缺點：可以看到雖然利用相對定位進行了數據調節(jié)來達到讓圖片定位的效果，但是由于相對定位是在標準流的基礎上進行調節(jié)，所以原來圖片的位置（也就是全球購后面的那塊區(qū)域）依然是被占用著的。
2.下面只使用絕對定位來進行試驗。
ul li img{
position:absolute;
left: 900px;
top: 1px;
width: 20px;
height: 16px;
}
?這種方式的缺點：上次連載說到，絕對定位會以首屏來進行定位，因此當改變網頁大小的時候，將會造成變形，定位到了?不合理的地方。
3.因此要同時運用絕對定位和相對定位進行編排才最合理
ul li:nth-of-type(4){
/*這里復習了同類標簽選擇第幾個進行設置它的樣式*/
background-color: blue;
position:relative;
}
ul li img{
/*介紹一個方法：子絕父相，即子元素使用絕對定位，父元素使用相對定位*/
position:absolute;
left: 41px;
top: 1px;
width: 20px;
height: 16px;
}到此，相信大家對“HTML子絕父相實例分析”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！
網站欄目：HTML子絕父相實例分析
URL地址：http://chinadenli.net/article30/gdgpso.html
成都網站建設公司_創(chuàng)新互聯，為您提供品牌網站建設、商城網站、網站設計、移動網站建設、搜索引擎優(yōu)化、標簽優(yōu)化
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯
- 細分網站SEO優(yōu)化和百度搜索引擎優(yōu)化 2016-09-21
- 什么是SEO(搜索引擎優(yōu)化)?我認為的SEO是這樣的 2015-05-18
- google搜索引擎優(yōu)化什么時間做效果最好？ 2015-01-12
- 白帽搜索引擎優(yōu)化怎么做？ 2015-11-10
- 為什么說搜索引擎優(yōu)化是最重要的網絡營銷方式 2016-11-04
- 如何衡量搜索引擎優(yōu)化的成功? 2015-08-16
- 淺析搜索引擎優(yōu)化與微博之間的關系 2022-12-17
- 每一個企業(yè)應該使用搜索引擎優(yōu)化 2016-11-16
- 搜索引擎優(yōu)化的理由是什么？ 2014-03-08
- 為什么SEO搜索引擎優(yōu)化會提倡白帽 拒絕黑帽 2023-04-04
- 搜索引擎優(yōu)化如何寫高質量偽原創(chuàng)文章? 2023-04-07
- 站長如何利用微博進行搜索引擎優(yōu)化 2022-12-08