黑马前端——days09

黑马前端——days09_css

news2024/11/14 13:24:12

案例 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="box">
    <a href="#" class="prev">&lt;&lt;上一页</a>
    <a href="#" class="current">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#" class="elp">...</a>
    <a href="#" class="next">&gt;&gt;下一页</a>
    到第 <input type="text"> 页
    <button>确定</button>
  </div>
</body>

</html>

案例1

格式文件

* {
  margin: 0;
  padding: 0;
}

.box {
  margin-top: 100px;
  text-align: center;
}

.box a {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 36px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.box .prev,
.box .next {
  width: 85px;
}

.box .current,
.box .elp {
  background-color: #fff;
  border: none;
}

.box input {
  height: 36px;
  width: 45px;
  border: 1px solid #ccc;
  outline: none;
}

.box button {
  width: 60px;
  height: 36px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

案例 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="box1"></div>
  <div class="price">
    <span class="miaosha">¥1650<i></i></span>
    <span class="origin">¥5650</span>
  </div>
</body>

</html>

案例2

格式文件

.box1 {
  margin: 0 auto;
  width: 0;
  height: 0;
  /* 1.只保留右边的边框有颜色 */
  border-color: transparent red transparent transparent;
  /* 2.样式都是solid */
  border-style: solid;
  /* 3.上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
  border-width: 100px 50px 0 0;
}

.price {
  width: 160px;
  height: 24px;
  line-height: 24px;
  border: 1px solid red;
  margin: 0 auto;
  margin-top: 10px;
}

.miaosha {
  position: relative;
  float: left;
  width: 90px;
  height: 100%;
  background-color: red;
  text-align: center;
  color: #fff;
  font-weight: 700;
  margin-right: 8px;
}

.miaosha i {
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
  border-width: 24px 10px 0 0;
}

.origin {
  font-size: 12px;
  color: gray;
  text-decoration: line-through;
}