B站首页仿写

记录第三个简单小项目，黑马前端进阶课程。

html较为基础，主要是合理布局，还没有加上js

<!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>b站</title>
    <link rel="stylesheet" href="/less/css/index.css">
    <link rel="stylesheet" href="/fonts/iconfont.css">
</head>
<body>
    <!--头部固定-->
    <header>
        <div class="top">
            <div class="left">
                <a href="#"><i class="iconfont Navbar_logo"></i></a>
            </div>
            <div class="right">
                <a href="#">
                    <i class="iconfont ic_search_tab"></i>
                </a>
                <a href="#" class="login"><img src="./images/login.png" alt=""></a>
                <a href="#" class="download"><img src="./images/download.png" alt=""></a>
            </div>
        </div>
        <div class="bottom">
            <div class="tab">
                <ul>
                    <li><a href="#" class="current">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                </ul>
            </div>
            <div class="more">
                <a href="#"><i class="iconfont general_pulldown_s"></i></a>
            </div>
    </div>
    </header>
    <!--内容区域-->
    <section class="vedio_content">
        <div class="vedio_list">
            <a href="#">
                <div class="pic">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>132</span>万
                        </p>
                    </div>
                    <img src="/images/1.jpg" alt="">
                </div>
                <div class="txt ellipsis-2">你活着不到就是对我最大的侮辱，寒心最强王者名言就是和救护车</div>
            </a>
        </div>
    </section>
</body>
</html>

css样式

@import 'base';
@vw: 3.75vw;
@pink:#fb7299;
/*头部固定*/
header{
    z-index: 1;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: (84/@vw);
    color: #fff;
    // background-color: palevioletred;
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: (44/@vw);
        padding-left: (18/@vw);
        padding-right: (12/@vw);
        // background-color: green;
    }
    .left{
        .iconfont{
            font-size: (28/@vw);
            color: @pink;
        }
    }
    .right{
        display: flex;
        .iconfont{
            font-size: (22/@vw); 
            color: #ccc;}
        .login{
            width: (24/@vw);
            height: (24/@vw);
            margin-left: (24/@vw);
        }
        .download{
            width: (72/@vw);
            height: (24/@vw);
            margin-left: (24/@vw);
        }
    }
    .bottom{
        display: flex;
        justify-content: space-between;
        height: (40/@vw);
        border-bottom: 1px solid #eee;
    }
        .more{
            a{
                display: block;
                width: (40/@vw);
                height: (40/@vw);
                line-height: (40/@vw);
                text-align: center;
                // font-size: (22/@vw);
                color: #ccc;
                .iconfont{
                    font-size: (22/@vw);
                }
            }
        }
        .tab{
            ul{
                display: flex;
            }
                li{
                    padding: 0 (16/@vw);
                }
                    a{
                        display: block;
                        height: (38/@vw);
                        line-height: (38/@vw);
                        font-size: (14/@vw); 
                    }
                        .current{
                            color: @pink;
                            border-bottom: 2px solid @pink;
                        }
        }
}
.vedio_content{
    padding:(84/@vw) (5/@vw) ;
    .vedio_list{
        display: flex;
        flex-wrap: wrap;
            a{
                width: 50%;
                padding:(8/@vw) (5/@vw);
                .txt{
                    margin-top: (5/@vw);
                    font-size: (12/@vw);
                }
                .pic{
                    position: relative;
                }
                .count{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    padding: (8/@vw);
                    color: #fff;
                }
            }
    }
}

猜你喜欢