综合案例

news2024/12/27 14:14:33

案例1：淘宝焦点图布局

基本结构
在这里插入图片描述
1.大盒子我们类名为: tb-pro淘宝广告
2.里面先放一张图片
3.左右两个按钮用链接。左箭头prev 右箭头 next
4.底侧小圆点用ul 类名为pro-nav
注意：
1.如果一个盒子既有left属性也有right属性，则默认会执行left属性，同理top bottom 会执行 top
2.可以用并集选择器写相同的样式

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .tb-pro {
            position: relative;
            width: 520px;
            height: 280px;
            background-color: pink;
            margin: 100px auto;
        }
        .tb-pro 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;
        }
        .prev {
            left: 0;
            border-radius: 0 15px 15px 0;
        }
        .next {
            right: 0;
            border-radius: 15px 0 0 15px;
        }
        .pro-nav {
            position: absolute;
            bottom: 15px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            background-color: rgba(255,255,255,.3);
            border-radius: 6px;
        }
        .pro-nav li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            margin: 3px;
        }
        .pro-nav .selected {
            background-color: #ff5000;
        }
    </style>
</head>

<body>
    <div class="tb-pro">
        <img src="imgs/tb.png" alt="">
        <a href="#" class="prev"> < </a>
        <a href="#" class="next"> > </a>
        <ul class="pro-nav">
           <li class="selected"></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
        </ul>
    </div>
</body>

</html>

在这里插入图片描述

案例2：土豆网鼠标经过显示遮罩

1.练习元素的显示与隐藏
2.练习元素的定位
核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来。
遮罩的盒子不占有位置,就需要用绝对定位和display配合使用。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .td {
            position: relative;
            width: 444px;
            height: 320px;
            margin: 30px auto;
        }
        .td 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(imgs/arr.png) no-repeat center;
        }
        /* 当鼠标经过td盒子就让里面的遮罩层显示出来 */
        .td:hover .mask {
            display: block;
        }
    </style>
</head>
<body>
    <div class="td">
        <div class="mask"></div>
        <img src="imgs/td.png" alt="">
    </div>
</body>
</html>