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

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

博主信息

博文 12

粉丝 0

访问量 8321

专题推荐

更多>

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

页眉代码：

分别引用外部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;
}

最终效果图：

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

初识前端与环境搭建

2023-03-10 19:09:06