Navigation bar code example and matters needing attention

Insert picture description here

Navigation frame:

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

Modification of the content in the label and attribute value in Css:

body{

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;

}

result:

Insert picture description here

note:

Body{} generally modify the default value of the browser

Attribute value. Nav{} defines the content of the attribute value

The label in the attribute value. nav li{} defines the content of the label

The attribute value in the attribute value.nav.logo{} and .nav.xuanzhong{} define the content of the logo attribute value

Guess you like

Origin blog.csdn.net/weixin_46182770/article/details/104025133