css基礎：樣式之定位、樣式之隱藏、二級選單、多個列表轉表格、圖片精靈技術
<html lang="en">
<head>
<meta charset="UTF-8">
<title>樣式之定位position</title>
<style>
.div0{
width: 500px;
height: 200px;
border: 1px solid red;
/*相對定位*/
/*一般相對定位的元素是不會進行平移的，它僅僅是給它的有絕對定位的子元素做一個參考座標*/
/*設定了相對定位後，可以使用left和top使當前元素進行位置的移動 */
/*它的移動參考它原來默認出現的位置*/
/*移動方向，left強於right，top強於bottom
同時設定left和right時只有left屬性起作用*/
position: relative;
}
.div1{
width: 150px;
height: 150px;
background-color: black;
position: relative;
/*設定背景色的透明度，最大為1，不透明，最小為0*/
opacity: 0.5;
top: -20px;
}
.div2{
width: 150px;
height: 150px;
background-color: blue;
/*絕對定位： 它預設也是按照程式碼順序進行載入，但是它定義的元素不會佔用頁面的內容範圍，不佔位置*/
position: absolute;
opacity:0.3;
/*絕對定位的元素產生平移，需要有一個參考的座標；該座標是先去找有定位屬性的元素，*/
/*如果有，則按照有定位的該元素的左上角作為（0，0）點進行平移；*/
/*如果沒有，則按照body元素的左上角作為（0，0）點進行平移*/
left: 100px;
top: 0px;
}
</style>
</head>
<body>
<!--固定定位position: fixed，它預設只會在頁面初始載入的位置不動，隨便你的頁面上下左右滾動，它的位置都不變-->
<!--該定位常用於浮動廣告-->
<div class="div1" style="position: fixed;"></div>
<div class="div0">
213213213213
<div class="div1"></div>
</div>
<div class="div2"></div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>樣式之隱藏、二級選單</title>
<style>
.div1{
/*visibility設定為隱藏，會為內容保留其物理空間*/
visibility: hidden;
}
.div2{
/*display隱藏，不會保留其物理空間*/
display: none;
}
.ul1>li{
float: left;
list-style-type: none;
width:100px;
}
/*設定二級選單*/
.div3 > ul>li>ul{
/*設定隱藏列表*/
display: none;
/*設定列表絕對定位，在列表開啟的時候不會擠壓介面的排版*/
position: absolute;
}
.ul1>li:hover > ul{
/*滑鼠移動到.選單的時候，將列表設定為塊元素*/
display: block;
color: red;
background-color: #00bfe5;
/*設定可見度*/
opacity:0.5;
}
</style>
</head>
<body>
11111111111111111111111
<div class="div1">我是隱藏的內容</div>
2222222222222222222
<br><br>
33333333333333333333333
<div class="div2">我是隱藏的內容</div>
444444444444444444
<br><br>
<div class="div3">
<ul class="ul1">
<li><a href="#">水果1</a>
<ul >
<li>蘋果</li>
<li>葡萄</li>
<li>桃子</li>
<li>香蕉</li>
<li>西瓜</li>
</ul>
</li>
<li><a href="#">水果2</a>
<ul >
<li>蘋果</li>
<li>葡萄</li>
<li>桃子</li>
<li>香蕉</li>
<li>西瓜</li>
</ul>
</li>
<li><a href="#">水果3</a>
<ul >
<li>蘋果</li>
<li>葡萄</li>
<li>桃子</li>
<li>香蕉</li>
<li>西瓜</li>
</ul>
</li>
</ul>
</div>
<br>
5555555555555555555555
<br>
66666666666666666666
<br>
777777777777777777777
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多個列表轉表格樣式</title>
<style>
.bordercl{
border: 1px solid red;
}
.div1{
/*將div元素設定為行內元素*/
display: inline;
}
.span1{
/*將span元素設定為塊元素*/
display: block;
}
.div2{
/*將物件作為表格單元格*/
display: table-cell;
/*超過瀏覽器寬度會自適應分配寬度*/
width: 3000px;
}
</style>
</head>
<body>
<!--style="display: table-row;"指定物件作為表格行-->
<div style="display: table-row;">
<div class="div2">
<ul>
<li>四川省</li>
<li>雲南省</li>
<li>貴州省</li>
<li>西藏自治區</li>
<li>重慶市</li>
</ul>
</div>
<div class="div2">
<ul>
<li>四川省</li>
<li>雲南省</li>
<li>貴州省</li>
<li>西藏自治區</li>
<li>重慶市</li>
</ul>
</div>
<div class="div2">
<ul>
<li>四川省</li>
<li>雲南省</li>
<li>貴州省</li>
<li>西藏自治區</li>
<li>重慶市</li>
</ul>
</div>
<div class="div2">
<ul>
<li>四川省</li>
<li>雲南省</li>
<li>貴州省</li>
<li>西藏自治區</li>
<li>重慶市</li>
</ul>
</div>
</div>
<br><br>
按國家軟體噶
<div class="bordercl div1">1111111111</div>
<span class="bordercl span1">2222222222222222222</span>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片精靈技術</title>
<style>
.div1{
/*設定顯示背景圖片的大小*/
width: 170px;
height:50px;
/*設定背景圖片*/
background-image: url("images3/btn[1].png");
/*設定顯示背景圖片的位置*/
background-position: 1010px 306px;
}
.div1:hover{
background-position: 260px -160px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
---------------------
作者：別念茶茶
來源：CSDN
原文：https://blog.csdn.net/weixin_38912281/article/details/83830166
版權宣告：本文為博主原創文章，轉載請附上博文連結！