本文主要和大家介绍了CSS+Html设计网站导航的具体步骤与相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。
<!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; }
以上是CSS+Html设计网站导航的详细内容。更多信息请关注PHP中文网其他相关文章!