从无到有的摸索开发，小兔鲜儿首页（下）

2023-06-28 22:36:30

小兔鲜儿网站底部分析：友情链接、公司信息和企业文化的布局

友情链接的布局

小兔鲜儿网站底部的友情链接区域采用了一种紧凑的布局方式，利用<br>换行符将链接分段。这种设计有效地节省了空间，使页面看起来更加简洁。

HTML代码：

<div class="footer-friendlink">
  <div class="footer-friendlink-title">
    <span>友情链接</span>
  </div>
  <div class="footer-friendlink-content">
    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.qq.com">腾讯</a>
    <a href="https://www.sina.com">新浪</a>
    <a href="https://www.163.com">网易</a>
    <a href="https://www.sohu.com">搜狐</a>
    <a href="https://www.ifeng.com">凤凰</a>
    <a href="https://www.xinhuanet.com">新华</a>
  </div>
</div>

公司信息的布局

公司信息采用了一个清晰易读的表格格式，将公司名称、地址、电话和邮箱等信息分门别类地展示出来。

HTML代码：

<div class="footer-company">
  <div class="footer-company-title">
    <span>公司信息</span>
  </div>
  <div class="footer-company-content">
    <table>
      <tr>
        <th>公司名称</th>
        <td>小兔鲜儿</td>
      </tr>
      <tr>
        <th>公司地址</th>
        <td>北京市海淀区上地十街10号</td>
      </tr>
      <tr>
        <th>公司电话</th>
        <td>010-59252888</td>
      </tr>
      <tr>
        <th>公司邮箱</th>
        <td>service@xiaotuxianr.com</td>
      </tr>
    </table>
  </div>
</div>

企业文化的布局

企业文化信息也以表格格式呈现，将企业理念、宗旨和目标等重要信息清楚地展现在用户面前。

HTML代码：

<div class="footer-culture">
  <div class="footer-culture-title">
    <span>企业文化</span>
  </div>
  <div class="footer-culture-content">
    <table>
      <tr>
        <th>企业理念</th>
        <td>用户至上，诚信经营</td>
      </tr>
      <tr>
        <th>企业宗旨</th>
        <td>为用户提供优质的产品和服务</td>
      </tr>
      <tr>
        <th>企业目标</th>
        <td>成为一家受人尊敬的企业</td>
      </tr>
    </table>
  </div>
</div>