子网页实战练习

news/2024/7/8 2:54:43

定位

<!-- <!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">&lt;</span>
 <span class="rightArrow">&gt;</span>
   <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
   </ol>
</div>
</body>
</html>