仿今日头条部分代码 - - php中文网博客

首页 > 博客列表 > 仿今日头条部分代码

博主信息

博文 10

粉丝 0

访问量 5956

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

仿今日头条部分代码

失忆孤独患者

原创

414人浏览过

这是一个仿今日头条的项目
我们把css 进行了模块化
把页面分为了页眉主体页脚
需要注意的是大型的项目不能使用@import url(‘reset.css’);的方式引入css
因为@import url(‘reset.css’);方式引入是异步引入不是同步异步引入会出现加载上的错误渲染延迟等问题
<link rel="stylesheet" href="./static/css/reset.css">
<link rel="stylesheet" href="./static/css/header.css">
<link rel="stylesheet" href="./static/font/iconfont.css">
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3192548_29x74lu5elo.css">
<link rel="stylesheet" href="./static/css/footer.css">
<link rel="stylesheet" href="./static/css/min.css">

    <!-- 页眉 -->
<div class="header">
    <div class="search">
        <div class="keys">
            <span class="iconfont icon-fangdajing"></span>
            <span>习近平访问俄罗斯</span>
        </div>
        <div class="publish">
            <span class="iconfont icon-jiahao"></span>
            <span>发布</span>
        </div>
    </div>
    <div class="nav">
        <a href="" class="active">推荐</a>
        <a href="">科技</a>
        <a href="">数码</a>
        <a href="">军事</a>
        <a href="">科技</a>
    </div>
</div>
<!-- 主体 -->
<div class="main">
    <div class="rec-list">
        <a href="#" class="item">
            <span class="title">习近平访俄罗斯第一天,吃了什么好吃的</span>
        </a>
        <div class="desc">
            <span class="tag">置顶</span>
            <div class="other">
                <span>已关注</span>
                <span>央视新闻</span>
                <span>1899条评论</span>
            </div>
        </div>
    </div>
    <div class="rec-list">
        <a href="#" class="item">
            <span class="title">习近平访俄罗斯第一天,吃了什么好吃的</span>
        </a>
        <div class="desc">
            <span class="tag">置顶</span>
            <div class="other">
                <span>已关注</span>
                <span>央视新闻</span>
                <span>1899条评论</span>
            </div>
        </div>
    </div>
    <div class="rec-list">
        <a href="#" class="item">
            <span class="title">习近平访俄罗斯第一天,吃了什么好吃的</span>
        </a>
        <div class="desc">
            <span class="tag">置顶</span>
            <div class="other">
                <span>已关注</span>
                <span>央视新闻</span>
                <span>1899条评论</span>
            </div>
        </div>
    </div>
    <div class="rec-list">
        <a href="#" class="item">
            <span class="title">习近平访俄罗斯第一天,吃了什么好吃的</span>
        </a>
        <div class="desc">
            <span class="tag">置顶</span>
            <div class="other">
                <span>已关注</span>
                <span>央视新闻</span>
                <span>1899条评论</span>
            </div>
        </div>
    </div>
    <div class="imga-list">
        <a href="" class="item">
            <div class="left">
                <div class="title">今晚吃什么 今晚吃什么今晚吃什么烤鸡烤鸭</div>
                <div class="sesc">
                    <span class="author">烤乳猪</span>
                    <span class="replay-num">88条评论</span>
                    <span class="time">10小时前</span>
                </div>
            </div>
            <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
        </a>
        <a href="" class="item">
            <div class="left">
                <div class="title">今晚吃什么 今晚吃什么今晚吃什么烤鸡烤鸭</div>
                <div class="sesc">
                    <span class="author">烤乳猪</span>
                    <span class="replay-num">88条评论</span>
                    <span class="time">10小时前</span>
                </div>
            </div>
            <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
        </a>
        <a href="" class="item">
            <div class="left">
                <div class="title">今晚吃什么 今晚吃什么今晚吃什么烤鸡烤鸭</div>
                <div class="sesc">
                    <span class="author">烤乳猪</span>
                    <span class="replay-num">88条评论</span>
                    <span class="time">10小时前</span>
                </div>
            </div>
            <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
        </a>
        <a href="" class="item">
            <div class="left">
                <div class="title">今晚吃什么 今晚吃什么今晚吃什么烤鸡烤鸭</div>
                <div class="sesc">
                    <span class="author">烤乳猪</span>
                    <span class="replay-num">88条评论</span>
                    <span class="time">10小时前</span>
                </div>
            </div>
            <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
        </a>
    </div>
    <div class="imgato-list">
        <a href="#" class="tiem">
            <div class="title">吃烤鱼 吃红烧肉，卤鸭 ，凉菜 ，金枪鱼 饿肚子，喝热水</div>
            <div class="imgs">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
            </div>
        </a>
        <a href="#" class="tiem">
            <div class="title">吃烤鱼 吃红烧肉，卤鸭 ，凉菜 ，金枪鱼 饿肚子，喝热水</div>
            <div class="imgs">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
            </div>
        </a>
        <a href="#" class="tiem">
            <div class="title">吃烤鱼 吃红烧肉，卤鸭 ，凉菜 ，金枪鱼 饿肚子，喝热水</div>
            <div class="imgs">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
            </div>
        </a>
        <a href="#" class="tiem">
            <div class="title">吃烤鱼 吃红烧肉，卤鸭 ，凉菜 ，金枪鱼 饿肚子，喝热水</div>
            <div class="imgs">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
            </div>
        </a>
        <a href="#" class="tiem">
            <div class="title">吃烤鱼 吃红烧肉，卤鸭 ，凉菜 ，金枪鱼 饿肚子，喝热水</div>
            <div class="imgs">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
                <img src="https://pic.3gbizhi.com/2019/1112/20191112013312648.jpg" alt="">
            </div>
        </a>
    </div>
    <div class="video-list">
        <a href="#" class="tiem">
            <div class="title"></div>
            <video src=""></video>
        </a>
    </div>
</div>

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

markdown 语法简单详解学会很快就能运用

2023-03-10 13:38:12