移动端-仿B站页面练习

目录

1.准备阶段展示:​

2.css代码准备:

3.fonts字体图标准备:

​4.图片素材准备:

5.less代码准备:

6. base.less代码样式:

7.index.less代码样式:

8.最终页面效果及代码

1.准备阶段展示:

2.css代码准备:

less文件中的index.less文件同步生成的css文件输出位置

3.fonts字体图标准备:

4.图片素材准备:

5.less代码准备:

6. base.less代码样式:

// out:false

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  
  body {
    font-family: Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif;
  }
  
  a {
    color: #333;
    text-decoration: none;
  }
  
  img {
    vertical-align: middle;
    width: 100%;
    height: 100%;
  }
  ul {
    list-style: none;
  }
  
  .ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

7.index.less代码样式:

// out: ../css/


@import './base.less';


// 定义变量
// @xx:值;
@vw: 3.75vw;
@color: #fb7299;

// 1.头部
.header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    // width: 100vw;
    height: (84 / @vw);
    background-color: #fff;

    // 上
    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: (18 / @vw);
        padding-right: (12 / @vw);

        height: (44 / @vw);
        // background-color: #ccc;

        .left {
            .iconfont {
                color: @color;
                font-size: (28 / @vw);
            }
        }
        .right {
            // 给a加尺寸,从而控制img尺寸
            display: flex;

            .iconfont{
                font-size: (22 / @vw);
                color: #ccc;
            }

            a:nth-child(2) {
                width: (24 / @vw);
                height: (24 / @vw);
                margin: 0 (24 / @vw);
            }

            a:nth-child(3) {
                width: (72 / @vw);
                height: (24 / @vw);
            }
        }
    }

    // 下
    .bottom {
        position: relative;
        height: (40 / @vw);
        border-bottom: 1px solid #ccc;
        border-bottom: 1px solid #ccc;

        // 链接
        .nav {
            ul {
                display: flex;
                line-height: (40 / @vw);
                li {
                    padding: 0 (16 / @vw);
                    font-size: (14 / @vw);
                    a {
                        display: block;
                        height: 100%;
                        &.active {
                            color: @color;
                            border-bottom: 1px solid @color;
                            // padding-bottom: (9 / @vw);
                        }
                    }
                }
            }
        }
        // 箭头
        .more {
            position: absolute;
            right: 0;
            top: 0;
            width: (40 / @vw);
            height: (39 / @vw);
            background-color: #fff;
            text-align: center;
            line-height: (39 / @vw);
            .iconfont {
                font-size: (20 / @vw);
                color: #aaa;
            }
        }
    }
}

// 2.视频
.main {
    margin-top: (84 / @vw);
    .video {
        display: flex;
        // 弹性盒子换行
        flex-wrap: wrap;
        padding: (8 / @vw) (5 / @vw);
        a {
            padding: 0 (5 / @vw);
            width: 50%;
            background-color: #fff;
            // 图
            .pic {
                position: relative;
                .count {
                    position: absolute;
                    left: 0;
                    bottom: 0;

                    display: flex;
                    justify-content: space-between;
                    padding: (5 / @vw) (6 / @vw);

                    width: 100%;
                    background-image: linear-gradient(0deg,rgba(0,0,0,.85),transparent);
                    color: #fff;
                    font-size: (12 / @vw);
                }
            }
            // 字
            .txt {
                margin-top: (6 / @vw);
                margin-bottom: (12 / @vw);
                font-size: (12 / @vw);
                color: #212121;
            }
        }
    }
}

// 3.底部
.btn {
    position: fixed;
    left: 0;
    bottom: (50 / @vw);
    padding: 0 (12 / @vw);
    width: 100%;
    // width: 100vw;
    height: (38 / @vw);

    a {
        // 宽度是父级的100%
        display: block;
        height: (38 / @vw);
        background-color: @color;
        border-radius: (19 / @vw);
        text-align: center;
        line-height: (38 / @vw);
        color: #fff;

        i {
            margin-right: (10 / @vw);
        }

        span {
            font-size: (14 / @vw);
        }
    }
}

8.最终页面效果及代码

效果展示:

 创建index.html文件

代码如下:

<!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="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 1.头部:固定定位 -->
    <div class="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="#">
                    <img src="./images/login.png" alt="">
                </a>
                <a href="#">
                    <img src="./images/download.png" alt="">
                </a>
            </div>
        </div>
        <div class="bottom">
            <!-- 链接 -->
            <div class="nav">
                <ul>
                    <li><a href="#" class="active">首页</a></li>
                    <li><a href="#">动画</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">
                <i class="iconfont general_pulldown_s"></i>
            </div>
        </div>
    </div>
    <!-- 2.视频区域:滑动查看 -->
    <!-- tab选项卡:li的个数和div个数相同的 -->
    <!-- .main 布局的,里面包含li对应的div -->
    <div class="main">
        <div class="video">
            <a href="#">
                <!-- 图 -->
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <!-- 定位 -->
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                    </div>
                </div>
                <!-- 字 -->
                <div class="txt">英雄故事：索杰恩</div>
            </a>
            <a href="#">
                <!-- 图 -->
                <div class="pic">
                    <img src="./images/2.jpg" alt="">
                    <!-- 定位 -->
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                    </div>
                </div>
                <!-- 字 -->
                <div class="txt">英雄故事：索杰恩</div>
            </a>
            <a href="#">
                <!-- 图 -->
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <!-- 定位 -->
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                    </div>
                </div>
                <!-- 字 -->
                <div class="txt">英雄故事：索杰恩</div>
            </a>
            <a href="#">
                <!-- 图 -->
                <div class="pic">
                    <img src="./images/2.jpg" alt="">
                    <!-- 定位 -->
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                    </div>
                </div>
                <!-- 字 -->
                <div class="txt">英雄故事：索杰恩</div>
            </a>
            <a href="#">
                <!-- 图 -->
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <!-- 定位 -->
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                    </div>
                </div>
                <!-- 字 -->
                <div class="txt">英雄故事：索杰恩</div>
            </a>
            <a href="#">
                <!-- 图 -->
                <div class="pic">
                    <img src="./images/2.jpg" alt="">
                    <!-- 定位 -->
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                    </div>
                </div>
                <!-- 字 -->
                <div class="txt">英雄故事：索杰恩</div>
            </a>
            <a href="#">
                <!-- 图 -->
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <!-- 定位 -->
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                    </div>
                </div>
                <!-- 字 -->
                <div class="txt">英雄故事：索杰恩</div>
            </a>
            <a href="#">
                <!-- 图 -->
                <div class="pic">
                    <img src="./images/2.jpg" alt="">
                    <!-- 定位 -->
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                    </div>
                </div>
                <!-- 字 -->
                <div class="txt">英雄故事：索杰恩</div>
            </a>
            <a href="#">
                <!-- 图 -->
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <!-- 定位 -->
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                    </div>
                </div>
                <!-- 字 -->
                <div class="txt">英雄故事：索杰恩</div>
            </a>
            <a href="#">
                <!-- 图 -->
                <div class="pic">
                    <img src="./images/2.jpg" alt="">
                    <!-- 定位 -->
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                    </div>
                </div>
                <!-- 字 -->
                <div class="txt">英雄故事：索杰恩</div>
            </a>
            <a href="#">
                <!-- 图 -->
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <!-- 定位 -->
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                    </div>
                </div>
                <!-- 字 -->
                <div class="txt">英雄故事：索杰恩</div>
            </a>
            <a href="#">
                <!-- 图 -->
                <div class="pic">
                    <img src="./images/2.jpg" alt="">
                    <!-- 定位 -->
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                    </div>
                </div>
                <!-- 字 -->
                <div class="txt">英雄故事：索杰恩</div>
            </a>
            <a href="#">
                <!-- 图 -->
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <!-- 定位 -->
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                    </div>
                </div>
                <!-- 字 -->
                <div class="txt">英雄故事：索杰恩</div>
            </a>
            <a href="#">
                <!-- 图 -->
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <!-- 定位 -->
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>94.6</span>万
                        </p>
                    </div>
                </div>
                <!-- 字 -->
                <div class="txt">英雄故事：索杰恩</div>
            </a>
        </div>
    </div>
    <!-- 3.底部按钮:固定定位 -->
    <div class="btn">
        <a href="#">
            <i class="iconfont Navbar_logo"></i>
            <span>打开App，看你感兴趣的视频</span>
        </a>
    </div>
</body>
</html>