ナビゲーションバーのコード例と注意が必要な事項

ここに画像の説明を挿入します

ナビゲーションフレーム:

<head>

    <title>wangzhang</title> 

    <link type="text/css" rel="stylesheet" href="jp.css"> 

</head>

<body>

  <ul class="nav" >

      <li class="logo">LOGO</li>

      <li class="xuanzhong">网站首页</li>

      <li>关于我们</li>

      <li>新闻中心</li>

      <li>产品展示</li>

      <li>客户案例</li>

      <li>项目合作</li>

      <li>给我留言</li>

      <li>人才招聘</li>

      <li>联系我们</li>

  </ul>  

</body>

Cssのラベルと属性値のコンテンツの変更:

体{

margin:0 atuo;

padding:0;

}

.are not {

margin:0 auto;

width:1240px;

height:133px;

}

.nav li {

float:left;

list-style: none;

width:107px;

height:100%;

line-height:133px ;

text-align:center;

font-size: 18px;

}

.nav .logo

width:363px;

height:100%;

color:blue;

font-size:64px;

font-family:microsoft yahei;

}

.nav .xuanzhong {

background-color: blue;

font-size: #ffffff;

}

結果:

ここに画像の説明を挿入します

注意:

Body {}は通常、ブラウザのデフォルト値を変更します

属性値。Nav{}は属性値の内容を定義します

属性値のラベル。navli{}は、ラベルの内容を定義します。

属性value.nav.logo {}および.nav.xuanzhong {}の属性値は、ロゴ属性値の内容を定義します

おすすめ

転載: blog.csdn.net/weixin_46182770/article/details/104025133