【web前端开发】作业3-商品轮播图样式

要求：
请添加图片描述

代码：

iconfont.css文件

@font-face {
    
    
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1663296898867') format('truetype');
}

.iconfont {
    
    
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-weixuanzhongyuanquan1:before {
    
    
  content: "\f0129";
  position: absolute;
  left:720px;
  top:100%;
  margin-top: -20px;
  width:20px;
  height:20px;
}

.icon-weixuanzhongyuanquan2:before {
    
    
  content: "\f0129";
  position: absolute;
  left:740px;
  top:100%;
  margin-top: -20px;
  width:20px;
  height:20px;
}

.icon-weixuanzhongyuanquan3:before {
    
    
  content: "\f0129";
  position: absolute;
  left:760px;
  top:100%;
  margin-top: -20px;
  width:20px;
  height:20px;
}

.icon-weixuanzhongyuanquan4:before {
    
    
  content: "\f0129";
  position: absolute;
  left:780px;
  top:100%;
  margin-top: -20px;
  width:20px;
  height:20px;
}

.icon-circleyuanquan0:before {
    
    
  content: "\e71e";

  position: absolute;
  left:700px;
  top:100%;
  margin-top: -20px;
  width:20px;
  height:20px;
}
/* 左右标签 先右再左*/
.icon-lunboyoufangun:before {
    
    
  position: absolute;
  content: "\e7bd";
  top:50%;
  margin-top:-15px;
  left:780px;
  width:20px;
  height:30px;
}

.icon-lunbozuofangun:before {
    
    
  content: "\e7be";
  position: absolute;
  left:0;
  top:50%;
  margin-top: -15px;
  width:20px;
  height:30px;
}


/* .prev{
  position: absolute;
  left:0;
  top:50%;
  margin-top: -15px;
  width:20px;
  height:30px;
} */

1.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <style>
        .content{
      
      
            position: relative;
            width:800px;
            height:300px;
            background-image: url(shangchen/1.jpg);
            background-repeat: repeat-x;
            background-size: cover;
        }
    </style>
</head>
<body>
    <!-- 1.把图片设置为父类元素 -->
    <div class="content">
        <!-- 2.把左右图标放入 -->
        <a href="#" class="iconfont icon-lunbozuofangun">  </a>
        <a href="#" class="iconfont icon-lunboyoufangun">  </a>
        <!-- 3.把轮播图图标放入 -->
        
        <a href="#" class="iconfont icon-circleyuanquan0">  </a>
        <a href="#" class="iconfont icon-weixuanzhongyuanquan1">  </a>
        <a href="#" class="iconfont icon-weixuanzhongyuanquan2">  </a>
        <a href="#" class="iconfont icon-weixuanzhongyuanquan3">  </a>
        <a href="#" class="iconfont icon-weixuanzhongyuanquan4">  </a>

    </div>
</body>
</html>

<!-- 1.先使用普通方法成功->再转为研究iconfont  ok --改为a标签-->

效果：
在这里插入图片描述

【web前端开发】作业3-商品轮播图样式

猜你喜欢