兄弟,你要做网页,代码肯定是要学的 不懂可以私
相信我,慢慢来不难的,我帮你写好了,你只需要修改自己喜欢的样式即可
并且所有要修改样式的地方我都帮你备注好了
您只需要把 这堆东西放入<head></head>两个标签之间的中间
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: BLACK; /*导航栏背景颜色*/
}
li {
float: left; /*在导航栏内对齐方式*/
}
li a {
display: block;
color: white; /*字体颜色*/
text-align: center; /*字居中*/
padding: 14px 14px; /*框大小*/
text-decoration: none; /*把<a>标签自带的
下划线去掉*/
}
li a:hover {
background-color: #228B22; /*鼠标经过框框时的背景颜色*/
font-size: 25px; /*鼠标经过时字体大小*/
}
</style>
在把 这堆放在<body></body>之间
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
示例页面HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: BLACK; /*导航栏背景颜色*/
}
li {
float: left; /*在导航栏内对齐方式*/
}
li a {
display: block;
color: white; /*字体颜色*/
text-align: center; /*字居中*/
padding: 14px 14px; /*框大小*/
text-decoration: none; /*把<a>标签自带的下划线去掉*/
}
li a:hover {
background-color: #228B22; /*鼠标经过框框时的背景颜色*/
font-size: 25px; /*鼠标经过时字体大小*/
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>