[企业官网]:设置新闻样式

现在我们已经完成了首页的设计。然而，我们的新闻资讯页面和新闻详情页面的样式尚未修改，目前看起来比较简陋。因此，我们需要添加一些样式来改善它们的外观。在进行样式添加时，我们需要运用一些 CSS 技术。为了保持与原页面整体风格的一致性，我们将首页的头部信息和底部信息复制过来，并在中间显示新闻列表。如下图所示：

首先，我们找到首页 index.html，将其顶部信息（即轮播图之前的内容）全部复制到list.html新闻资讯页面中。header头部html代码如下：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="{% static 'libs/scrollReveal/scrollreveal.min.js' %}"></script>
  <link rel="stylesheet" href="{% static 'css/font.css' %}">
  <link rel="stylesheet" href="{% static 'libs/glide/glide.core.min.css' %}">
  <link rel="stylesheet" href="{% static 'libs/glide/glide.theme.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/index.css' %}">
  <title>网络科技</title>
</head>

然后，在新闻资讯页面中进行相应替换。接着，将底部信息也就是 footer 全部复制到list.html新闻页面中，并进行相应替换。中间部分不需要变动。底部footer替换代码如下：

 <!-- 尾部 -->
  <footer>
    <div class="footer-menus">
      <div class="contact-us">
        <p class="menu-title">联系我们</p>
        <p>地址:北京市XXXX</p>
        <p>电话:12345678977</p>
        <p>传真:12345678977</p>
        <p>电子邮箱:12345678977@qq.com</p>
      </div>
      <div class="service-menu footer-menu">
        <p class="menu-title">服务概览</p>
        <ul class="menu-items">
          <li><a href="#">网站建设</a></li>
          <li><a href="#">域名购买</a></li>
          <li><a href="#">网页设计</a></li>
          <li><a href="#">移动应用</a></li>
        </ul>
      </div>
      <div class="service-menu footer-menu">
        <p class="menu-title">成功案例</p>
        <ul class="menu-items">
          <li><a href="#">桌面网站</a></li>
          <li><a href="#">移动网站</a></li>
          <li><a href="#">科研项目</a></li>
          <li><a href="#">软件应用</a></li>
        </ul>
      </div>
      <div class="service-menu footer-menu">
        <p class="menu-title">资讯中心</p>
        <ul class="menu-items">
          <li><a href="#">信息公开</a></li>
          <li><a href="#">最近新闻</a></li>
          <li><a href="#">最新博客</a></li>
        </ul>
      </div>
      <div class="service-menu footer-menu">
        <p class="menu-title">帮助与支持</p>
        <ul class="menu-items">
          <li><a href="#">帮助中心</a></li>
          <li><a href="#">联系客服</a></li>
          <li><a href="#">文档资源</a></li>
        </ul>
      </div>
      <p class="icp-info">京ICP备案 1234556789 号</p>
      <p class="rights">
        &copy; 2020 XX科技 - 响应式网站 版权所有
      </p>
      <p class="scrollToTop">
        <a href="#home"><i class="fa fa-chevron-up"></i></a>
      </p>
    </div>
  </footer>

  <script src="{% static 'libs/anime/anime.min.js' %}"></script>
  <script src="{% static 'libs/glide/glide.min.js' %}"></script>
  <script src="{% static 'libs/isotope/isotope.pkgd.min.js' %}"></script>
  <script src="{% static 'libs/smooth-scroll/smooth-scroll.polyfills.min.js' %}"></script>
  <script src="{% static 'js/index.js' %}"></script>
</body>

</html>

🔒 试读结束

继续阅读完整内容

以上为免费预览。前往「Django + Vue 全栈课程」，查看后续完整讲解、案例演示和配套资料。

查看课程详情