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
版权声明：本文为博主原创文章，转载请附上博文链接！
