Home >Web Front-end >CSS Tutorial >CSS+Html design website navigation
This article mainly introduces to you the specific steps and related operation skills of designing website navigation with CSS+Html. Friends in need can refer to it. I hope it can help everyone.
<!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; }
The above is the detailed content of CSS+Html design website navigation. For more information, please follow other related articles on the PHP Chinese website!