[分享]css做浮动在左边的菜单

在网页设计中，经常会遇到将菜单放在左边并且浮动的要求。这时，我们可以使用CSS中的float属性来实现这个效果。具体实现方法如下：在HTML中，我们需要使用一个ul标签来代表菜单，并为每个菜单项使用l...

在网页设计中，经常会遇到将菜单放在左边并且浮动的要求。这时，我们可以使用CSS中的float属性来实现这个效果。
具体实现方法如下：
在HTML中，我们需要使用一个ul标签来代表菜单，并为每个菜单项使用li标签。例如：

<ul>
  <li>菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
</ul> 

接下来，在CSS中为ul标签设置float:left;属性即可将菜单放置在页面左边并浮动。例如：

p{
  width:80%;
  margin:0 auto;
}
ul{
  float:left;
  width:20%;
  margin:0;
  padding:0;
  list-style:none;
}
li{
  margin:0;
  padding:0;
} 

需要注意的是，在设置菜单的宽度时，建议使用百分比来指定，这样可以根据屏幕大小自适应调整大小。同时，需要将ul的内外边距设置为0，去除默认的缩进和边框。
另外，如果需要在菜单中使用图片或者添加样式，可以在li标签中进行设置。例如：

li{
  margin:0;
  padding:0;
}
li a{
  display:block;
  height:50px;
  line-height:50px;
  text-decoration:none;
  color:#000;
}
li a:hover{
  background-color:#ccc;
}
li img{
  width:20px;
  height:20px;
  margin-right:10px;
} 

上述示例中，我们为a标签设置了高度和行高，使其垂直居中，并去除了下划线。同时，在鼠标悬停时设置了背景色来表现用户操作的反馈。对于li中的图片，我们使用了margin-right属性来设置图片与文本之间的距离。
通过使用这些CSS属性，我们可以很方便地实现一个具有浮动在页面左边并带有图片和样式的菜单。