仿今日头条首页 - 前端学习

Home > List of blog posts > 仿今日头条首页

Blogger Information

Blog 12

fans 0

comment 0

visits 5388

Special Recommendation

More>

Related recommendations

首页整体分为三个部分：页面，主体，页脚.

页眉代码：

分别引用外部CSS文件：

<link rel="stylesheet" href="static/css/reset.css">
 <link rel="stylesheet" href="static/css/header.css">
 <link rel="stylesheet" href="static/css/footer.css">
 <link rel="stylesheet" href="static/css/main.css">
 <link rel="stylesheet" href="static/font_icon/iconfont.css">

其中 reset.css 初始化代码如下：

.footer {
 /* 绝对定位 */
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #efefef;
 display: flex;
 /* 分散对齐 */
 place-content: space-around;
 z-index: 999;
}
.footer a {
 /* 垂直排列，居中对齐 */
 display: grid;
 place-items: center;
 font-size: x-small;
}
/* 图标放大 */
.footer a .iconfont {
 font-size: x-large;
}
/* 激活样式 */
.footer a.active {
 color: red;
}

页眉代码：

<!-- 页眉   -->
<div class="header">
 <!-- 1.搜索框 -->
 <div class="search">
 <!-- 1.1关键字输入框 left -->
 <div class="keys">
     <!-- 放大镜：字体图标    -->
     <span class="iconfont icon-fangdajing"></span>
     <!-- 关键字-预置的 -->  
     <span>“天网2023”行动启动</span>
 </div>
 <!-- 1.2 发布按钮，right     -->
 <div class="publish">
     <!-- 字体图标 -->
     <span class="iconfont icon-jiahao"></span>
     <span>发布</span>   
 </div>
 </div>
 <!-- 2.导航组 -->
 <div class="navs">
   <a href="">关注</a>
   <a href="" class="active">推荐</a>
     <!-- 高亮 -->
     <a href="">热榜</a>
     <a href="">发现</a>
     <a href="">视频</a> 
     <a href="">防疫</a>
     <div class="key">
     <span class="iconfont icon-zhuanfa"></span>
     </div>
 </div>
</div>

css代码：

.header {
    /* 固定定位： */
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    /* 给导航栏设置下划线 */
    border-bottom: 1px solid #ccc;
    /* 设置层级，确保永远在最前面，不会被覆盖 */
    z-index: 999;
    background-color: #fff;
}
/* 搜索栏 */
.header .search {
    background-color: red;
    /* 布局格式 */
    display: grid;
    grid-template-columns: 1fr 0.5rem;
    /* 内边距 */
    padding: 0.1rem 0.13rem;
}
/* 搜索框 */
.header .search .keys {
    background-color: #fff;
    border-radius: 1.5rem;
    display: flex;
    place-items: center;
    padding-left: 0.15rem;
}
/* 发布按钮 */
.header .search .publish {
    color: #fff;
    display: grid;
    place-items: center;
    font-size: large;
}
/* 字体图标加号放大 */
.header .search .publish .icon-jiahao {
    font-size: x-large;
}
/* 列表 */
.header .navs {
    /* 弹性布局 */
    display: flex;
    /* 分散对齐 */
    place-content: space-around;
    /* 给导航栏下划线加间距 下边0.05rem*/
    padding: 0.1rem 0 0.05rem;
}
.header .navs .key .icon_zhuanfa {
    display: flex;
    position: fixed;
    font-size: xx-large;
    right: 0;
    width: 0.35rem;
    height: 0.25rem;
    place-content: center;
    color: #ccc;
}
/* 激活状态 */
.header .navs a.active {
    color: red;
}
/* 添加激活状态下的下划线，利用伪元素 */
/* 伪元素前面使用双冒号：::before/::after */
.header .navs a.active::after {
    content:'';
    /* 绝对定位 */
    position: absolute;
    left: 0;
    width: 0.3rem;
    height: 0.03rem;
    background-color: red;
    bottom: -0.03rem;
}
/* 宿主元素a作为绝对定位的父级 */
.header .navs a {
    position: relative;
}

3.主体代码：

<div class="main">
    <!-- 1.文本+标签 -->
    <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>1万评论</span>
          </div>
        </div>
      </a>
      <a href="" class="item">
        <span class="title">在推动构建人类命运共同体的大道上前进</span>
        <div class="desc">
          <span class="tag">置顶</span>
          <div class="other">
            <span>人民日报</span>
            <span>1347评论</span>
          </div>
        </div>
      </a>
      <a href="" class="item">
        <span class="title">春天里的中国色，美到惊艳！</span>
        <div class="desc">
          <span class="tag">置顶</span>
          <div class="other">
            <span>人民日报</span>
            <span>1644评论</span>
          </div>
        </div>
      </a>
      <a href="" class="item">
        <span class="title">"美国人要我们跳，咱不仅问'跳多高',还来个后空翻！"</span>
        <div class="desc">  
          <div class="other">
            <span>环球网</span>
            <span>166评论</span>
          </div>
        </div>
      </a>
      <a href="" class="item">
        <span class="title">健康中国|甲流感染期食养建议</span>
        <div class="desc">  
          <div class="other">
            <span>头条专题</span>
          </div>
        </div>
      </a>
    </div>
    <!-- 2.左边文本+右边图片 -->
    <div class="img1-list">
      <a href="" class="item">
      <!-- 标题文本 -->
        <div class="left">
          <div class="title">还派什么大使，美国晾了我们14个月，是时候反击了</div>
          <div class="desc">
            <span class="author">默默读书君</span>
            <span class="replay-num">88条评论</span>
            <span class="time">10小时前</span>
          </div>
        </div>
      <!-- 图片 -->
        <img src="static/images/1.jpeg" class="right"></img>
      </a> 
      <a href="" class="item">
        <!-- 标题文本 -->
          <div class="left">
            <div class="title">还派什么大使，美国晾了我们14个月，是时候反击了</div>
            <div class="desc">
              <span class="author">默默读书君</span>
              <span class="replay-num">88条评论</span>
              <span class="time">10小时前</span>
            </div>
          </div>
        <!-- 图片 -->
          <img src="static/images/1.jpeg" class="right"></img>
        </a> 
        <a href="" class="item">
          <!-- 标题文本 -->
            <div class="left">
              <div class="title">还派什么大使，美国晾了我们14个月，是时候反击了</div>
              <div class="desc">
                <span class="author">默默读书君</span>
                <span class="replay-num">88条评论</span>
                <span class="time">10小时前</span>
              </div>
            </div>
          <!-- 图片 -->
            <img src="static/images/1.jpeg" class="right"></img>
          </a>       
    </div>
    <!-- 3.上面文本+三张图片 -->
    <div class="img2-list">
      <a href="" class="item">
        <div class="title">2001年金吉奇用承诺诱捕米洛舍维奇，将其私自引渡海牙，下场如何？</div>
        <div class="imgs">
          <img src="static/images/2.jpeg" alt="">
          <img src="static/images/2.jpeg" alt="">
          <img src="static/images/2.jpeg" alt="">
        </div>
      </a>
    </div>
  </div>

CSS代码：

.main {
    min-height: 2000px;
    /* border: 1px solid rgb(229, 43, 43); */
    /* 相对定位 */
    position: relative;
    top: 1rem;
    padding-bottom: 0.6rem;
}
/* 下划线 */
.main .rec-list {
    border-bottom: 0.6px solid #ccc;
    padding: 0 0 0.05rem;
}
.main .rec-list .item {
    /* 行内元素转块级元素 */
    display: block;
    margin-top: 0.1rem;
}
.main .rec-list .item .desc {
    display: flex;
    font-size: xx-small;
    gap: 0.1rem;
}
.main .rec-list .item .desc .tag {
    color: red;
}
.main .rec-list .item .desc .other {
    color: #ccc;
}
/* 文本+图片  */
.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 {
    color: #ccc;
    font-size: xx-small;
}
/* 上面文本+三张图片 */
.main .img2-list .item .imgs {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap:0.05rem;
}

4.页脚

<div class="footer">
    <a href="" class="active">
      <span class="iconfont icon-shouye"></span>
      <span>首页</span>
    </a>
    <a href="">  
      <span class="iconfont icon-24gl-play"></span>
      <span>视频</span>
    </a>
    <a href=""> 
    <span class="iconfont icon-shoucang"></span>
      <span>商城</span>
    </a>
    <a href="">
      <span class="iconfont icon-yonghu"></span>
      <span>我的</span>
    </a>
  </div>

CSS代码：

.footer {
    /* 绝对定位 */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #efefef;
    display: flex;
    /* 分散对齐 */
    place-content: space-around;
    z-index: 999;
}
.footer a {
    /* 垂直排列，居中对齐 */
    display: grid;
    place-items: center;
    font-size: x-small;
}
/* 图标放大 */
.footer a .iconfont {
    font-size: x-large;
}
/* 激活样式 */
.footer a.active {
    color: red;
}

最终效果图：

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

初识前端与环境搭建

2023-03-10 19:09:06