子网页实战练习
定位
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子绝夫相</title>
<style>
*{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
width: 800px;
height: 50px;
margin: 0 auto;
margin-top: 100px;
background: #ccc;
}
ul li{
float:right;
width: 100px;
line-height: 50px;
text-align: center;
}
ul li:nth-of-type(3){
background: yellow;
}
</style>
</head>
<body>
<ul>
<li>服装城</li>
<li>美妆馆</li>
<li>京东</li>
<li>超市</li>
<li>全球网购</li>
<li>闪购</li>
<li>团购</li>
<li>拍卖金融</li>
</ul>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位水平居中</title>
<style>
.box{
width: 300px;
height: 50px;
background: red;
position: absolute;
left:50%;
margin-left:-150px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html> -->
1
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位练习</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
width: 300px;
height: 300px;
border: 1px solid #ccc;
margin: 0 auto;
margin-top:100px;
position: relative;
}
div img{
width: 300px;
height: 200px;
}
/*目前没有精灵图*/
div .hot{
width: 45px;
height: 44px;
/*display: inline-block;*/
background: url("img/tuangou.png") no-repeat 0px -280px;
position: absolute;
top: 0px;
right: 0px;
}
div .price{
/*display: inline-block;*/
width: 134px;
height: 42px;
background: url("img/tuangou.png") no-repeat 0px -362px;
position: absolute;
left:-7px;
top:163px;
}
</style>
</head>
<body>
<div>
<img src="t01aaddc9d9b0d1e45d.jpg" alt="">
<span class="hot"></span>
<span class="price"></span>
<p>是你的夫君外后浮动那你就</p>
</div>
</body>
</html> -->
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位练习2</title>
<style>
*{
margin: 0px;
padding:0px;
}
div{
width: 520px;
height: 280px;
border: 2px solid #000;
margin: 0 auto;
margin-top:100px;
position: relative;
}
div span{
display: block;
width: 40px;
height: 80px;
background-color: rgba(0,0,0,0.3);
margin-top: 10px;
font-size:50px;
color: white;
text-align: center;
line-height: 80px;
}
div .leftArrow{
position: absolute;
left:0px;
top:69px;
}
div .rightArrow{
position: absolute;
right:116px;
top:69px;
}
ol{
list-style: none;
width: 200px;
height: 40px;
background:rgba(255,255,255,0.7);
position: absolute;
right: 8px;
bottom: 10px;
}
ol li{
width: 40px;
/*height: 40px;*/
border: 1px solid gold;
/*让li水平排版*/
float: left;
/*加边框使得元素空间变大，让防止*/
box-sizing: border-box;
/*水平垂直居中*/
text-align: center;
line-height: 40px;
/*定位 没有方向时候脱离标准流层叠在一起*/
}
</style>
</head>
<body>
<div>
<img src="TB1EMhjIpXXXXaPXVXXXXXXXXXX.jpg_.webp" alt="">
<span class="leftArrow"><</span>
<span class="rightArrow">></span>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
