Web サイトの静的 homepage_html/css_WEB-ITnose の実装の概要

出典: http://www.ido321.com/842.html

ヘッダー部分の実装

   1: <div class="top">

   2:      <ul class="topul">

   3:          <li id="time"><a href="#">9月25日 周四</a></li>

   4:          <li><a href="#">联系我们</a></li>

   5:          <li><a href="#">收藏本站</a></li>

   6:      </ul>

   7:  </div>

   8:  <div class="header">

リー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー

   9:      <div class="logo">

  10:          <a href="#"><img src="./img/logo.png" alt="xxxxx"></a>

  11:      </div>

  12:      <div class="nav">

  13:          <ul class="navul">

ヘッダー部分 CSS

  14:              <li><a href="#">首页</a></li>

  15:              <li><a href="#">校园动态</a></li>

  16:              <li><a href="#">失物招领</a></li>

  17:              <li><a href="#">二手市场</a></li>

  18:              <li><a href="#">论坛专区</a></li>

  19:              <li><a href="#">个人中心</a></li>

  20:          </ul>

  21:      </div>

  22:  </div>

  23: </div>

   1: .top

   2: {

   3:     margin-top: 1em;

RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE ee

   4: }

   5: .topul

ボディ部分については、CSS を使用すると互換性の問題があります円を描く

   6: {

   7:     list-style: none;

   8:     margin-right: 3%;

   9:     color: #8B8989;

  10: }

  11: .topul li

  12: {

  13:     float: right;

  14:     margin-left: 25px;

  15: }

  16: .topul li a

  17: {

  18:     color: #8B8989;

  19:     text-decoration: none;

  20: }

  21: .topul li a:hover

  22: {

  23:     color: #8B8989;

  24:     text-decoration: none;

  25: }

  26: .header

  27: {

  28:     margin-top: 1em;

rree

  29:     height:100px;

  30:     position: relative;

  31:     top: 0;

  32:     left: 0;

  33: }

  34: .logo

  35: {

メインCSS

RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE

  36:     float: left;

  37: }

  38: .nav

効果

IE では、数字 1、2、 3 は中央に配置できないため、後でスパンを追加し (以前は使用できませんでした)、IE ハックを使用して問題を解決します

  39: {

  40:     float: left;

  41:     width: 80%;

  42:     position: absolute;

  43:     top:55%;

  44:     left: 20%;

  45: }

  46: .navul

  47: {