当前位置：首页 > news >正文

黑马前端——days09_css

news 2025/6/25 22:25:27

案例 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;
}