导航栏代码例子及注意事项

在这里插入图片描述

导航框:

<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中标签和属性值中内容的修改:

body{

margin:0 atuo;

padding:0;

}

.nav{

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{}定义属性值里的内容

属性值中的标签.nav li{}定义标签了的内容

属性值中的属性值.nav .logo{}和.nav .xuanzhong{}定义了logo属性值中的内容

猜你喜欢

转载自blog.csdn.net/weixin_46182770/article/details/104025133
今日推荐