左侧列表的实现

插入代码为部分代码，实现左侧列表

</div>
    <div id="menu"><!--ol是有序列表1,2,3,  ul是无序列表-->
      <ul>
      <li><a href="http://www.baidu.com"target="_blank">首页</a></li><!--添加超链接--><!--target新打开页面-->
      <li><a href="@">相册</a></li>
      <li><a href="#">阳光生活</a></li>
      <li><a href="@">释放梦想</a></li>
      <li><a href="@">留言</a></li>
      </ul>
    </div>
    <div id="main">
    <!--左边区域-->
    <div id="left">
    <!--划分3个区域-->
    <div id="zuozhe">
    <img src="baby.jpg" alt="我的照片"/>
    <!--文字,方便对文字样式的修改  一行不换行-->
    <span>linda zhaoqin</span>
    </div>
    <div id="huoli">
    6个列表项
    </div>
    <div id="list">
    分类和列表div
    </div>
    </div>

@charset "utf-8";
/* CSS Document */
*{/*通配符选择器*/
	margin:0px;
	padding:0px;
}



#menu{
	background-color:#328048;/*用颜色取色器取得*/
	height:50px;
}
/*修改id为menu的、html标签下面的、ul标签的样式*/
#menu ul{
	list-style:none;/*去掉点*/
	float:right;/*靠右*/
	height:50px;
	line-height:50px;/*设置行居中*/
	width:450px;
}

#menu li{
	float:left;/*可以使列表竖着变横着*/
	margin-left:20px;/*li距离左边那个li的距离*/
}

/*#menu ul li a{}*/
#menu a{
	color:#FFF;/*字体颜色*/
	text-decoration:none;/*去掉下划线*/
	font-size:16px;/*字体大小*/
	font-family:"微软雅黑";/*word中常见字体一般都可以写*/
}
#menu a:hover{/*当鼠标滑过超链接标签是的样式*/
    color:#F60;

}




#main{
	background-color:#0FF;
	height:1000px;
}
#left{
	background-color:#3F6;
	height:1000px;
	width:250px;
	float:left;/*可以使div横向排排坐*/
}
#zuozhe{
	padding-top:15px;
	padding-left:15px;/*上边和左边留点空*/
	text-align:center;/*整个内容水平居中*/
}

#zuozhe img{
	border:1px solid #999;/*加边solid实线*/
	padding:8px;
	border-radius:20px;/*圆角  值越大，角越圆*/
}

转载于:https://my.oschina.net/u/4090469/blog/3023901