菜单栏

来源：互联网发布：c 编程猜字小游戏编辑：程序博客网时间：2024/05/01 16:37

纵向菜单效果图

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><link rel="stylesheet" href="css/zujian.css" /><body><nav class="list1"><ul><li><a href="#">shift</a></li><span style="white-space:pre"></span><li><a href="#">color</a></li><span style="white-space:pre"></span><span style="white-space:pre"></span><li><a href="#">apple</a></li><span style="white-space:pre"></span><span style="white-space:pre"></span><li><a href="#">orange</a></li><span style="white-space:pre"></span><span style="white-space:pre"></span><li><a href="#">prosecute</a></li></ul></nav></body></html>

css

*{margin: 0;padding: 0;}nav{margin: 50px;width : 150px;}.list1 ul{border: 1px solid #f00;border-radius: 3px;padding: 5px 10px 3px;}.list1 li{list-style-type: none;padding: 3px 10px;}/*非首位子元素 选择符*/.list1 li+li{border-top: 1px solid #f00;}/*为链接添加样式*/.list1 a{text-decoration: none;font: 20px;font-weight: 400;color:#000;background: #ffed53;}.list1 a:hover{color: #069;}

横向菜单效果图

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="css/heng.css" /></head><body><nav class="list1"><ul><li><a href="#">HTML</a></li><li><a href="#">CSS</a></li><li><a href="#">JAVA</a></li><li><a href="#">PHP</a></li></ul></nav></body></html>

.list1 ul{overflow:hidden;}.list1 li{float:left;list-style-type: none;}.list1 a{display: block;padding: 0 16px;text-decoration: none;color: #999;}.list1 li + li a{border-left: 1px solid #aaa;}/*li + li a  除第一个链接之外的每个链接左侧都加一条竖线*/.list1 a:hover{color: #555;}

0 0