仿"今日头条"首页 - PHP学习

首页 > 博客列表 > 仿"今日头条"首页

博主信息

博文 29

粉丝 0

访问量 19613

专题推荐

更多>

仿”今日头条”首页

一、页眉结构分析

页面整体分三个部分：页眉、主体、页脚，其中

页眉：固定在顶部，可以采用固定定位来实现
页脚：固定在底部，同样采用固定定位来实现
主体：中间部分，其上部和下部占据了页眉和页脚的文档流位置而被遮挡，可以采用相对定位并设置 top 值解决被页眉遮挡的部分；通过设置 padding-bottom 解决被页脚遮挡的部分

二、HTML 文档结构

<!doctype html>
<html lang="cn-ZH">
<head>
    ......
    <link rel="stylesheet" href="mobile.css">
</head>
<body>
<header>
    <div class="search">
        <div class="keys">
            <span class="iconfont icon-sousuo"></span>
            <span>习近平主席访问俄罗斯</span>
        </div>
        <div class="publish">
            <span class="iconfont icon-jiahao1"></span>
            <span>发布</span>
        </div>
    </div>
    <div class="navs">
        <a href="" class="active">推荐</a>
        <a href="">科技</a>
        <a href="">数码</a>
        <a href="">军事</a>
        <a href="">科技</a>
    </div>
</header>
<main>
    <div class="recList">
        <a href="" class="item">
            <span class="title">习近平主席仿俄第一天，这些信息值得关注</span>
            <div class="desc">
                <span class="tag">置顶</span>
                <div class="other">
                    <span>已关注</span>
                    <span>央视新闻</span>
                    <span>1234条评论</span>
                </div>
            </div>
        </a>
        ......
    </div>
    <div class="img1-list">
        <a href="" class="item">
            <div class="left">
                <div class="title">中方将会如何推动俄乌实现停火？外交部回应</div>
                <div class="desc">
                    <span class="author">外交部</span>
                    <span class="reply-num">666条评论</span>
                    <span class="time">10小时前</span>
                </div>
            </div>
            <img src="img_1.png" alt="" class="right">
        </a>
        ......
    </div>
    <div class="img2-list">
        <a href="" class="item">
            <div class="title">华为何刚揭秘折叠新机黑科技 有三个方面很特殊</div>
            <div class="images">
                <img src="img_3.png" alt="">
                <img src="img_2.png" alt="">
                <img src="img.png" alt="">
            </div>
        </a>
        ......
    </div>
</main>
<footer>
    <a href="" class="active">
        <span class="iconfont icon-zhuye"></span>
        <span>首页</span>
    </a>
    <a href="">
        <span class="iconfont icon-bofang"></span>
        <span>视频</span>
    </a>
    <a href="">
        <span class="iconfont icon-xiaozu"></span>
        <span>小组</span>
    </a>
    <a href="">
        <span class="iconfont icon-31wode"></span>
        <span>我的</span>
    </a>
</footer>
</body>
</html>

三、CSS 样式

@import url(//at.alicdn.com/t/c/font_3961095_nhhkymnxkm.css);
*{ margin: 0; padding: 0; box-sizing: border-box; }
html{ font-size: calc(100vw / 3.75); }
body{ font-size: 0.16rem; }
header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    border-bottom: 1px solid #ccc;
    background-color: white;
}
header .search{
    background: red;
    display: grid;
    grid-template-columns: 1fr 0.5rem;
    padding: 0.08rem 0.15rem;
}
header .search .keys{
    background: #fff;
    border-radius: 0.5rem;
    display: flex;
    place-items: center;
}
header .search .keys .icon-sousuo{
    font-size: 0.16rem;
    padding-left: 0.08rem;
}
header .search .publish{
    color: white;
    place-self: end;
    display: grid;
    place-items: center;
}
header .search .publish .icon-jiahao1{
    font-size: 0.16rem;
}
header .navs{
    display: flex;
    place-content: space-around;
    padding: 0.1rem 0 0.05rem;
}
header .navs a{
    text-decoration: none;
    color: #030303;
    position: relative;
}
header .navs a.active{
    color: red;
}
header .navs a.active::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.04rem;
    width: 0.32rem;
    height: 0.02rem;
    background-color: red;
}
main{
    position: relative;
    top: 0.9rem;
    margin: 0 0.2rem;
    padding-bottom: 0.6rem;
}
main .recList .item{
    text-decoration: none;
    color: #030303;
    display: block;
    margin-top: 0.1rem;
}
main .recList .item .desc{
    font-size: x-small;
    display: flex;
    gap: 0.1rem;
}
main .recList .item .desc .tag{
    color: red;
}
main .recList .item .desc .other{
    color: #ccc;
}
main .img1-list a{
    text-decoration: none;
    color: #030303;
    margin-top: 0.1rem;
}
main .img1-list .item{
    display: grid;
    grid-template-columns: 1fr 1.3rem;
    gap: 0.2rem;
}
main .img1-list .item .left{
    display: grid;
    place-content: space-between;
}
main .img1-list .item .left .desc{
    font-size: x-small;
    color: #ccc;
}
main .img1-list .item .right{
    width: 100%;
}
main .img2-list .item{
    display: block;
    margin: 0.1rem 0;
    text-decoration: none;
    color: #030303;
}
main .img2-list .item .images{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.05rem;
}
main .img2-list .item .images img{
    width: 100%;
}
footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    place-content: space-around;
    background-color: #efefef;
    padding: 0.08rem 0;
}
footer a{
    text-decoration: none;
    display: grid;
    place-items: center;
    font-size: x-small;
}
footer a .iconfont{
    font-size: 0.2rem;
}
footer a.active{
    color: red;
}

四、页面显示效果

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Chrome 和 VS Code 的安装与常用配置

2023-03-15 16:15:07