仿今日头条首页

<div class="header">
        <div class="search">
            <div class="keys">
                <span class="iconfont icon-sousuo">&nbsp;&nbsp;</span>
                <span>习主席访问俄罗斯</span>
            </div>
            <div class="publish">
                <span class="iconfont icon-jiahao"></span>
                <span class="desc">发布</span>
            </div>
        </div>
        <div class="navs0">
            <div class="navs">
                <a href="">关注</a>
                <a href="" class="active">推荐</a>
                <a href="">热榜</a>
                <a href="">发现</a>
                <a href="">视频</a>
                <a href="">防疫</a>
                <a href="">图片</a>
            </div>
            <span class="iconfont icon-zhuanfa"></span>
        </div>
    </div>
    <div class="main">
        <div class="rec-list">
            <a href="" class="item">
                <span class="title">习近平同俄罗斯总统普京举行会谈</span>
                <div class="desc">
                    <span class="tag">置顶</span>
                    <div class="other">
                        <span>已关注</span>
                        <span>央视新闻</span>
                        <span>235条评论</span>
                    </div>
                </div>
            </a>
        </div>
        <div class="img1-list">
            <a href="" class="item">
                <div class="left">
                    <div class="title">泽连斯基恐提前逃亡！4万乌军陷入包围圈</div>
                    <div class="desc">
                        <span class="author">航航观历史</span>
                        <span class="replay-num">100条评论</span>
                        <span class="time">17小时前</span>
                    </div>
                </div>
                <img src="static/images/img1.png" class="right">
            </a>
        </div>
        <div class="img2-list">
            <a href="" class="item">
                <div class="title">泽连斯基恐提前逃亡！4万乌军陷入包围圈</div>
                <div class="imgs">
                    <img src="static/images/img1.png" alt="">
                    <img src="static/images/img1.png" alt="">
                    <img src="static/images/img1.png" alt="">
                </div>
            </a>
        </div>
        <div class="video-list">
            <a href="" class="item">
                <div class="title">古筝：小雨沙沙</div>
                <video src="static/video/video.mp4" controls></video>
            </a>
        </div>
    </div>
    <div class="footer">
        <a href="" class="active">
            <span class="iconfont icon-zhuye"></span>
            <span>首页</span>
        </a>
        <a href="" class="">
            <span class="iconfont icon-24gl-play"></span>
            <span>视频</span>
        </a>
        <a href="" class="">
            <span class="iconfont icon-liuyan"></span>
            <span>留言</span>
        </a>
        <a href="" class="">
            <span class="iconfont icon-yonghu"></span>
            <span>登录</span>
        </a>
    </div>

页眉
.header{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    border-bottom: 1px solid #efefef;
/* 确保页眉在顶层 */
    z-index: 888;
    background-color: #fff;
}
.header .search{
    background-color: rgb(247, 73, 73);
    padding: 0.08rem 0rem 0.08rem 0.15rem;
    display: grid;
    grid-template-columns: 1fr 0.6rem;
}
.header .search .keys{
    height: 0.45rem;
    background-color: #fff;
    border-radius: 1.5rem;
    padding-left: 0.18rem;
    display: flex;
    place-items: center;
}
.header .search .publish{
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.01rem;
}
.icon-jiahao{
    font-size: 0.25rem !important
}
.header .navs0{
    display: grid;
    grid-template-columns: 1fr 0.2rem;
    padding: 0.05rem 0.02rem 0.25rem;
}
.header .navs0 .navs{
    display: flex;
    place-content: space-around;
    position: fixed;
    left: 0;
    right: 0;
}
.header .navs0 .icon-zhuanfa{
    display: flex;
    position: fixed;
    right: 0;
    /* padding-right: 0.1rem; */
    width: 0.35rem;
    height: 0.25rem;
    background-color: #fff;
    place-content: center;
    color: #ccc;
}
.header .navs0 .navs a.active{
    color: rgb(247, 73, 73);
}
.header .navs0 .navs a{
    position: relative;
}
.header .navs0 .navs a.active::after{
    content: '';
    position: absolute;
    left: 0.05rem;
    width: 0.22rem;
    height: 0.03rem;
    bottom: -0.04rem;
    background-color: rgb(247, 73, 73);
}
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #efefef;
    display: flex;
    place-content: space-around;
}
页脚
.footer a{
    display: grid;
    place-items: center;
    font-size: 0.12rem;
}
.footer a .iconfont{
    font-size: 0.25rem;
}
.footer a.active{
    color: rgb(247, 73, 73);
}
main部分：
.main{
    min-height: 2000px;
    /* border: 1px solid #000; */
    position: relative;
    top: 1rem;
    /* padding-bottom: 0.6rem; */
}
.main .rec-list .item{
    display: block;
    margin-top: 0.05rem;
}
.main .rec-list .item .desc{
    display: flex;
    font-size: 0.12rem;
    gap: 0.1rem;
}
.main .rec-list .item .desc .tag{
    color: rgb(247, 73, 73);
}
.main .rec-list .item .desc .other{
    color: #ccc;
    gap: 0.1rem;
}
/* 左边文字+右边图片 */
.main .img1-list .item{
    display: grid;
    grid-template-columns: 1fr 1.3rem;
    gap: 0.2rem;
    margin-top: 0.1rem;
}
.main .img1-list .item .left{
    display: grid;
    place-content: space-between;
}
.main .img1-list .item .left .desc{
    font-size: 0.12rem;
    color: #ccc;
}
/* 文本+三张图片 */
.main .img2-list .item{
    display: block;
    margin-top: 0.1rem;
}
.main .img2-list .item .imgs{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.05rem;
}
/* 文字+视频 */
.main .video-list .item{
    display: block;
    margin-top: 0.1rem;
}
重置部分：
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
    color: #555;
}
/* 适应设备宽度 */
html{
    font-size: calc(100vw / 3.75);
}
/* 字号重置 */
body{
    font-size: 0.16rem;
    color: #333;
    background-color: #fff;
    /* 页面水平居中 */
    margin: 0 auto;
    padding: 0 0.15rem;
}
/* 外部资源适应屏幕宽度 */
body img,
body video{
    width: 100%;
}
/* 媒体查询 可选 */
@media (max-width:320px) {
    html{
        font-size: 85px;
    }
}
@media (min-width:640px) {
    html{
        font-size: 170px;
    }
}

总结：

完成了一个比较完整的手机网页，边看视频边做还好，如果完全自己去恐怕要很久，导航栏的右边悬浮了一个小图标，老师没介绍，自己弄做了好久。