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

最新推荐文章于 2024-05-04 02:41:05 发布

LJPchosen1

最新推荐文章于 2024-05-04 02:41:05 发布

阅读量207

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/weixin_46182770/article/details/104025133

版权

在这里插入图片描述

导航框：

<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属性值中的内容

LJPchosen1

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
导航栏代码例子及注意事项

导航框：<head> <title>wangzhang</title> <link type="text/css" rel="stylesheet" href="jp.css"> </head><body> <ul class="nav" > <li cl...
复制链接

扫一扫