左侧列表制作

左侧列表制作

思路： 分为两大块，标题一块，信息一块即可。

注意点：
a标签是内联元素，像做这种鼠标移动li变色的，就把a标签+display:block; 变为块级元素就会铺满li。

 <div class="list_main">
            <div class="news_type">
                <h2>新闻中心</h2>
                <div class="news_type_content">
                    <ul>
                        <li><a href="list.html">公司新闻</a></li>
                        <li><a href="list.html">媒体报道</a></li>
                        <li><a href="list.html">活动专题</a></li>
                        <li><a href="list.html">精彩视频</a></li>
                        <li><a href="list.html">资源下载</a></li>
                        <li><a href="list.html">公司内刊</a></li>
                    </ul>
                </div>
            </div>
            <div class="list_box"></div>
        </div>

.news_type h2
{
	height:35px;
	line-height:35px;
	font-size:14px;
	font-family:"微软雅黑";
	color:#666;
	background:url(../images/title_bg.gif) repeat-x;
	padding-left:20px;
}

.news_type_content
{
	height:365px;
    background:url(../images/content_bg.gif) repeat-x;
}

.news_type_content li
{
	list-style-type:none;
	height:30px;
	line-height:30px;
}

.news_type_content li a
{
	color:#666;
	text-decoration:none;
	background:url(../images/li_bg.gif) no-repeat left center;
	padding-left:15px;
	display:block; 
	/* 设置为块元素 */
}

.news_type_content li a:hover
{
	color:#009CDF;
	background:url(../images/li_bg2.gif) no-repeat left center;
	background-color:#F2F2F2;
}