溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“HTML水平居中方法與怎么設計一個團購界面”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“HTML水平居中方法與怎么設計一個團購界面”吧！
一、水平居中
1.margin:0 auto在絕對定位中就失效了
2.如何讓絕對定位的元素水平居中？
只需要設置絕對定位元素的left:50%；然后再設置絕對定位元素的margin-left:-元素寬的一半；
這樣就可以完成水平居中了
div{
width:50px;/*如果數值為100%，就代表這個div的寬度就是瀏覽器的整個寬度*/
height:50px;
background-color: red;
position:absolute;
left:50%;/*使用百分比意味著這個絕對定位的塊左邊距離瀏覽器一半的距離*/
}
.......省略代碼......
<body>
<div></div>
</body>
二、團購界面
注意點：這里的標志以及電腦配置，都是通過設置背景圖片和絕對定位、相對定位來?進行配置上的；這里面使用了span這個標簽，由于已經脫離了標準流，因此不需要在設置為display:inline-block;了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D155_GroupPurchase</title>
<style>
*{
margin:0px;
padding:0px;
}
div{
width: 500px;
height: 550px;
border:1px black solid;
margin:0 auto;
margin-top:100px;
position:relative;/*這里想要利用子絕父相來進行排版圖片的商標和配置的信息*/
}
div img{
width: 500px;
height: 500px;
}
div .brand{
width: 111px;
height: 29px;
background: url("image/laptop_label.jpg") no-repeat -21px -12px;
position:absolute;
left: 20px;
top:0px;
}
div .configuration{
width: 435px;
height: 40px;
background:url("image/laptop_label.jpg") no-repeat -78px -515px;
position:absolute;
left:20px;
top:505px;
}
</style>
</head>
<body>
<div>
<img src="image/laptop.jpg" alt="">
<span class = "brand"></span>
<span class = "configuration"></span>
</div>
?
</body>
</html>感謝各位的閱讀，以上就是“HTML水平居中方法與怎么設計一個團購界面”的內容了，經過本文的學習后，相信大家對HTML水平居中方法與怎么設計一個團購界面這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
