HTML学习记录：使⽤HTML静态⽹页代码模仿新浪⽹导航栏作为⼩⽩，我今天尝试使⽤HTML代码对新浪投资者关系⽹的导航栏进⾏模仿。
⽹站界⾯如图：
我今天想要模仿的是新浪⽹的导航栏部分：
我们可以先对此导航栏进⾏简单的分析：导航栏主要是使⽤list标签做出，中间加了下划线的，我们可以⾸先使⽤<ul>⽆序列表标签填充⼀些内容：
巴比龙<title></title>
</head>
<body>汕尾景点
<ul> <!--使⽤ul li实现导航栏-->
<li>⾸页</a></li>
<li>公司概况</li>
<li>股票资讯</li>
<li>新浪动态</li>
<li>财务信息</li>
好听的儿歌<li>投资者⽇</li>
<li></li>
</ul>
</body>
</html>
实现出的效果是这样的：
可以看到这暂时不是我们想要的效果，但是基本内容已经填充好了，所以我只需添加CSS样式改变导航栏的样式；
经过分析，我⼤概需要添加以下⼏种样式：
1.去掉⽆序列表之前的圆圈；
2.在每⼀⾏字下⾯添加⼀个下划线；
我们先添加第⼀个css样式，去掉⽆序列表之间的圆圈；要去掉⽆序列表的圆圈，我们需要使⽤css样式中list属性所包含的内容：
<title></title>
<style>
ul{
list-style: none; /*使Li上的效果全部消失*/
}
</style>
</head>
<body>
<ul> <!--使⽤ul li实现导航栏-->
<li>⾸页</a></li>
<li>公司概况</li>
<li>股票资讯</li>
<li>新浪动态</li>
<li>财务信息</li>
<li>投资者⽇</li>
<li></li>
</ul>
</body>
</html>
在全局css上添加了list-style:none后，li上的效果就全部消失了；
下⾯我们继续添加css样式，使每⼀⾏下⾯都添加⼀个下划线：
<title></title>
<style>
ul{
list-style: none;
}
li{
border-bottom: 1px solid
}
</style>
</head>
<body>
<ul> <!--使⽤ul li实现导航栏-->
<li>⾸页</a></li>
<li>公司概况</li>
<li>股票资讯</li>
<li>新浪动态</li>
<li>财务信息</li>
<li>投资者⽇</li>
<li></li>
</ul>
</body>
</html>
洛克王国什么宠物最好虽然下划线有了，但是我们发现，⽆论是下划线的颜⾊还是字体的间距都是有问题的；由于是模仿，我们可以调⽤新浪⽹的源代码查看⼀下具体的间距格式：
在源代码中我们到了以下内容，上⾯清楚的设定了下划线的颜⾊和⾏⾼，我们就在CSS的标签选择器li中添加以下内容：
<title></title>
<style>
ul{国王的演讲经典台词
list-style: none;
}
li{
border-bottom: 1px solid #e1e3e5;
line-height:49px;
}
</style>
</head>
<body>
<ul> <!--使⽤ul li实现导航栏-->
<li>⾸页</a></li>
<li>公司概况</li>
<li>股票资讯</li>
<li>新浪动态</li>城市旅游
<li>财务信息</li>
<li>投资者⽇</li>
<li></li>
</ul>
</body>
</html>
这样下划线就添加完成了。
⽬前的导航栏和我们想要的效果还是有⼀些出⼊的，所以现在我们要改变⼀下字体的格式：我们依旧去原⽹站代码寻字体格式：
我们在代码中也添加此⾏；但尤其需要注意的是，font的简化写法不能与line-height共存，所以我们把l
ine-height删去，把它写在font ⾥，所以源代码中的font就需要改动：将22px改为49px，然后为了使⽂本垂直居中，再在前⾯添加⼀个height属性；
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论