Skip to main content

【开发企业官网】12.设置新闻页样式

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

01头部信息和底部信息.jpg

首先，我们找到首页 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>

刷新页面，我们可以看到现在页面有了顶部和底部，以及中间的新闻列表。如下图所示：

02list页面展示.jpg

接下来，我们在list.html代码中将顶部背景色改为黑色以增强可读性。同时，我们选择一个原页面中的样式来让内容居中显示。比如关于我们的部分，并将其拷贝过来。然后，我们可以将其内容修改为新闻列表，或者直接使用它，接下来，我们给新闻列表页添加一些间距，使其不那么拥挤。我们可以修改 <h2> 标签为 <div> 标签，并添加一些样式来设置间距。同样地，我们也为新闻列表添加上下边距。修改代码如下：

{% load static %}
<!DOCTYPE html>
<html lang="en">

<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>

<body>

  <!-- 导航 -->
  <header style="background-color:black">
    <div class="logo">网络科技</div>
    <nav>
      <a href="#home">首页</a>
      <a href="#about-us">关于我们</a>
      <a href="#showcases">成功案例</a>
      <a href="#service">服务流程</a>
      <a href="#team-intro">团队介绍</a>
      <a href="#company-activities">资讯中心</a>
      <i class="fa fa-search"></i>
    </nav>
    <!-- 小屏幕按钮 -->
    <div class="burger">
      <div class="burger-line1"></div>
      <div class="burger-line2"></div>
      <div class="burger-line3"></div>
    </div>
  </header>
  <div class="container-wrapper">
    <section id="about-us" class="about-us">
      <h2 class="title1" style="padding: 10px;">新闻列表</h2>
        {% for item in news_list %}
          <div style="padding: 6px 0;">
            <a class="intro" href="/news/{{ item.id }}">
              {{ item.title }} 
            </a>
          </div>
        {% endfor %}
    </section>
  </div>
<!-- 尾部 -->
<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>

list.html最终页面显示如下：

03调整list页面样式

接下来点击进入新闻详情页后，我们在templates文件中的detail.html文件中我们可以进行一些简单的改造。同样地，将list.html代码内容拷贝过来，并进行相应替换。例如，我们可以将参考新闻标题替换为 news.title，删掉for循环，将日期添加为 <p> 标签，并将新闻内容放入 <p> 标签中。接下来我们在首页添加一个按钮，以便显示全部列表页的新闻。在资讯中心底部添加一个“查看全部”按钮，并将其链接到新闻列表页。修改代码如下：

{% load static %}
<!DOCTYPE html>
<html lang="en">

<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>

<body>

  <!-- 导航 -->
  <header style="background-color:black">
    <div class="logo">网络科技</div>
    <nav>
      <a href="#home">首页</a>
      <a href="#about-us">关于我们</a>
      <a href="#showcases">成功案例</a>
      <a href="#service">服务流程</a>
      <a href="#team-intro">团队介绍</a>
      <a href="#company-activities">资讯中心</a>
      <i class="fa fa-search"></i>
    </nav>
    <!-- 小屏幕按钮 -->
    <div class="burger">
      <div class="burger-line1"></div>
      <div class="burger-line2"></div>
      <div class="burger-line3"></div>
    </div>
  </header>
  <div class="container-wrapper">
    <section id="about-us" class="about-us">
      <h2 class="title1" style="padding: 10px 0;">{{news.title}}</h2>
          <p>{{news.created_at}}</p>
          <div style="padding: 6px 0;">
            <p class="intro" href="/news/{{ item.id }}">
              {{ news.content|safe }} 
            </a>
          </div>
    </section>
  </div>
<!-- 尾部 -->
<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>

接下来我们在首页index.html中添加一个按钮，以便显示全部列表页的新闻。在资讯中心底部添加一个“查看全部”按钮，并将其链接到新闻列表页。修改代码如下：

 <section id="company-activities" class="company-activities">
      <h2 class="title1">资讯中心</h2>
      <p class="intro">关注公司动态，获取一手信息</p>
      <div class="activities">
        {% for item in news %}
        <div class="activity">
          <div class="act-image-wrapper">
            <img src="/media/{{item.cover}}" alt="">
          </div>
          <div class="meta">
            <p class="date-published">
              <i class="fa fa-calendar"></i> {{ item.created_at }}
            </p>
          </div>
          <h2 class="act-title">{{ item.title }}</h2>
          <article>{{ item.content|slice:'20' }}...</article>
          <a href="/news/{{item.id}}">
          <button class="readmore-btn">阅读更多</button>
          </a>
        </div>
        {% endfor %}
      </div>
   <!-- 在此添加按钮 -->
      <div>
        <a href="/news/list">
          <button class="readmore-btn">查看全部新闻</button>
        </a>
      </div>
    </section>

最后，恭喜大家已经成功地开发了一个官方企业网站。在此基础上，你可以继续添加更多功能。本项目到此结束，希望大家能够通过实践来更加深入地理解 Django 的语法和流程。