position定位的使用-实现居中、装饰点、图片的定位

1. 图片的定位

效果（将“vip”和“更新至30集”固定在想要的位置，如果直接用ps把图片设定好会比较麻烦，任务多了工作量大）
代码
- css

<style>
      *{
    
    margin: 0px;padding: 0px;}
      li{
    
    list-style: none;}
      a{
    
    text-decoration: none; color: #000;}      /*text-decoration: none -> 去掉a标签的下划线 */
      
      #box1{
    
    
          width: 100%;
          height: 170px;
          background: rgba(0,0,0,0.7);
      }
      #box1 .content{
    
    
          margin: 0 auto;
          margin: 0 66px 0 66px;
      }
      #box1 .content p{
    
    
          font-size: 16px;
          font-family: Arial;
          color: #fff;
      }
      #box1 .content .banner ul{
    
    
          display: flex;
          flex-direction: row;	/*使子项显示为行，从左到右显示*/
          justify-content: space-between;	/*让子项平均分配空白区域*/
          margin-top: 15px;
      }
      #box1 .content .banner ul li a .tv{
    
    
          display: block;
          width: 210px;
          height: 117px;
          border-radius: 8px;
      }
      /*实现将“vip”和“更新至30集”固定在想要的位置*/
      #box1 .content .banner ul li{
    
    
          position: relative;
      }
      #box1 .content .banner ul li a .vip{
    
    
          position: absolute;
          left: 180px;
          top: 0px;
      }
      #box1 .content .banner ul li a span{
    
    
          font-size: 12px;
          color: white;
          position: absolute;
          left: 140px;
          top: 100px;
      }
    </style>

html

<div id="box1">
    <div class="content">
        <p>正在热播</p>
        <div class="banner">
            <ul>
                <li><a href="#"><img src="rebo.jpg" alt="热播剧" class = "tv"><img src="VIP.png" alt="" class = "vip"><span>更新至30集</span></a></li>
                <li><a href="#"><img src="rebo.jpg" alt="热播剧" class = "tv"><img src="VIP.png" alt="" class = "vip"><span>更新至30集</span></a></li>
                <li><a href="#"><img src="rebo.jpg" alt="热播剧" class = "tv"><img src="VIP.png" alt="" class = "vip"><span>更新至30集</span></a></li>
                <li><a href="#"><img src="rebo.jpg" alt="热播剧" class = "tv"><img src="VIP.png" alt="" class = "vip"><span>更新至30集</span></a></li>
                <li><a href="#"><img src="rebo.jpg" alt="热播剧" class = "tv"><img src="VIP.png" alt="" class = "vip"><span>更新至30集</span></a></li>
                <li><a href="#"><img src="rebo.jpg" alt="热播剧" class = "tv"><img src="VIP.png" alt="" class = "vip"><span>更新至30集</span></a></li>
            </ul>
    </div>
    </div>
</div>

2. 居中

效果
代码

<style>
	#box1{
    
    
		height:100px;
	    width: 100px;
	    border: 1px black solid;
	    position: relative;
	    }
    #box2{
    
    height: 25px; width: 25px; background: pink; position: absolute; left: 35%;top: 35%;}
</style>
<body>
	<div id="box1">
        <div id="box2"></div>
    </div>
</body>

3. 装饰点

效果
代码

<style>
	#box1{
    
    
	    height:100px;
	    width: 100px;
	    border: 1px black solid;
	    position: relative;
	}
	li{
    
    list-style: none;}
	#box1 ul li{
    
    position: relative;font-size: 24px;}
	#box1 ul li:before{
    
    content: " "; display: block; width: 3px; height: 3px; background-color: brown; position: absolute;top:50%; left: -8px;}
</style>
<body>
	<div id="box1">
        <ul>
            <li>啊啊啊</li>
            <li>鹅鹅鹅</li>
        </ul>
    </div>
</body>

position定位的使用-实现居中、装饰点、图片的定位

1. 图片的定位

2. 居中

3. 装饰点

猜你喜欢