Web

<div id="huoli">
                <!--class通用在3个标题上的样式-->
                	<h5 class="biaoti">活力地带</h5>
                    <ul>
                    	<li>
                        	<img src="images/1.gif" alt="小图标"/>
                            <a href="#">个人首页</a>
                        <>
                        <li>
                        	<img src="images/2.gif" alt="小图标"/>
                            <a href="#">校园文化</a>
                        <>
                        <li>
                        	<img src="images/3.gif" alt="小图标"/>
                            <a href="#">阳光生活</a>
                        <>
                        <li>
                        	<img src="images/4.gif" alt="小图标"/>
                            <a href="#">释放梦想</a>
                        <>
                        <li>
                        	<img src="images/5.gif" alt="小图标"/>
                            <a href="#">我的相册</a>
                        <>
                        <li>
                        	<img src="images/1.gif" alt="小图标"/>
                            <a href="#">给我留言</a>
                        <>
                    </ul>
                </div>
                <div id="list">
                	<h5 class="biaoti">我的文章分类</h5>
                    <ul>
                    	<li><a href="#">个人随笔<>
                        <li><a href="#">Web开发<>
                        <li><a href="#">Spring框架<>
                        <li><a href="#">JavaSE</a><>
                    </ul>
                    <h5 class="biaoti">文章列表</h5>
                    <ul>
                    	<li><a href="#">我家在哪里<>
                        <li><a href="#">你好！秋天<>
                        <li><a href="#">你好！春天<>
                        <li><a href="#">你好！冬天</a><>
                    </ul>
                </div>

#zuozhe span{
	margin:10px;/*一圈的距离*/
	display:block;/*改成盒子元素，可以识别盒子元素的一些属性
	：margin、border\padding*/
	border-top:1px #999 dashed;/*上面虚线边 粗细是1，颜色是灰色*/
	border-bottom:1px #999 dashed;/*下边的虚线 粗细是1，颜色是灰色*/
	font-size:18px;/*字号*/
	padding-top:5px;/*内容距离边的距离-上面的*/
	padding-bottom:5px;/*内容距离边的距离-下面的*/
}

/*class选择器的写法 以点开头 后面跟着html标签上的class属性里面的那个名*/
.biaoti{
	color:#FFF;
	background-color:#328048;/*背景色绿色、取色器取到的*/
	height:40ps;
	yidth:220px;
	line-height:40px;/*设置垂直居中，值要和height的值一样*/
	font-size:16px;
	font-weight:bolder;/*加粗，h5本来就是标题，已经加粗过了，不加也可以*/
	padding-left:30px;/*左边撑出来一个空*/
	border-radius:0 10px 10px 0;/*和margin、border、padding，都是四个值*/
	/*顺序：左上角、右上角、右下角、左下角，0代表没有圆角*/

}
#huoli ul{
	list-style:none;/*去点*/
	padding-left:20px;
	padding-yop:10px;
}
#huoli ul li{
	margin:5px;/*每个li之间的距离*/
	width:90px;
	float:left;/*因为外面的ul的宽度太小了，所以原本应该都放在一行的，会自动掉下去，变成一行只能展示2个li*/
}
#huoli ul li a{
	font-size:12px;
	text-decoration:none;/*去下划线*/
	color:#333;/*网站字体颜色一般不是黑色，扎眼*/
}
#huoli ul li a:hover{/*鼠标滑过变色*/
	color:#090;
}
#huoli ul li img{
	margin-right:5px;/*让图标和文字之间的距离大点*/
}
#list{
	clear:both;/*清空所有的自带的float影响*/
}
#list ul{
	list-style:none;
	padding:15px;/*不靠左边和上边，留空*/
}
#list ul li{
	padding-bottom:8px;
	padding-left:15px;
	border-bottom:1px; #999 dotted;/*下面的虚线：dashed或者dottoned，哪个好看用哪个*/
    margin-bottom:8px;/*我的边和其他人的字的距离，padding我的字和我的边的距离*/
	background:url(images/iconl.gif) no-repeat;/*不重复的话，变成背景*/
	background-position:5px center;/*背景点的位置*/
}

 

转载于:https://my.oschina.net/u/4090471/blog/3028222