黑马前端——days08_css

最新推荐文章于 2025-06-06 01:31:59 发布

胆怯与勇敢

最新推荐文章于 2025-06-06 01:31:59 发布

阅读量310

点赞数 4

分类专栏：黑马前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_52652401/article/details/141276088

版权

黑马前端专栏收录该内容

24 篇文章

订阅专栏

案例 1

页面框架文件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style1.css">
</head>

<body>
  <div class="tb-promo">
    <img src="images/tb.jpg" alt="">
    <!-- 左侧按钮箭头 -->
    <a href="#" class="prev"> &lt; </a>
    <!-- 右侧按钮箭头 -->
    <a href="#" class="next"> &gt; </a>
    <!-- 小圆点 -->
    <ul class="promo-nav">
      <li class="selected"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>

</html>

案例1

格式文件

* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

/* 轮播图 */
.tb-promo {
  position: relative;
  width: 520px;
  height: 280px;
  margin: 100px auto;
}

.tb-promo img {
  width: 520px;
  height: 280px;
}

/* 左右箭头 */
.prev,
.next {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  width: 20px;
  height: 30px;
  background: rgba(0, 0, 0, .3);
  text-align: center;
  line-height: 30px;
  color: #fff;
  text-decoration: none;
}

.prev {
  left: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.next {
  right: 0;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.promo-nav {
  position: absolute;
  bottom: 15px;
  left: 50%;
  margin-left: -35px;
  width: 70px;
  height: 13px;
  background: rgba(255, 255, 255, .3);
  border-radius: 7px;
}

.promo-nav li {
  float: left;
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  margin: 3px;
}

.promo-nav .selected {
  background-color: #ff5000;
}

案例 2

页面框架文件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style2.css">
</head>

<body>
  <div class="tudou">
    <div class="mask"></div>
    <img src="images/tudou.jpg" alt="">
  </div>
</body>

</html>

案例2

格式文件

.tudou {
  position: relative;
  width: 444px;
  height: 320px;
  margin: 30px auto;
}

.tudou img {
  width: 100%;
  height: 100%;
}

/* 隐藏图层 */
.mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}

.tudou:hover .mask {
  display: block;
}