网站的导航设计CSS+Html学习

最新推荐文章于 2025-05-09 11:19:34 发布

原创最新推荐文章于 2025-05-09 11:19:34 发布 · 793 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #Html

前端学习笔记专栏收录该内容

30 篇文章

订阅专栏

本文通过一个具体的网站案例，详细介绍了如何使用HTML进行网页结构搭建，并利用CSS实现美观的页面布局。文章首先展示了完整的HTML文档结构，接着重点讲解了导航栏的设计与实现方法，包括使用特定CSS样式来调整导航链接的显示效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<title>网站案例分析</title>
</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>
</ul>
</body>

</html>

======================================================================

@charset "utf-8";
body{
margin: 0 auto;
padding: 0;
}
.nav{
width: 1240px;
height: 133px;
margin: 0 auto;
font-family: "微软雅黑";/*字体型号*/
}
.nav li{
list-style: none;/*去掉前面的所有点*/
float: left;/*让导航内容由竖排变成横排*/
width: 107px;
height: 100%;/*和父节点一样高*/
line-height: 133px;/*行高就是行与行之间的距离*/
text-align: center;/*文字左右居中*/
font-size: 18px;/*字体大小*/
color: #333333;/*字体颜色*/
}
.nav .logo{
width: 363px;
height: 100%;
font-size: 64px;/*字体大小*/
color: #0c53ad;/*字体颜色*/
font-family: "微软雅黑";/*字体型号*/
}
.nav .xuanzhong{
background-color: #1040a8;
color: #ffffff;

}