左侧列表制作
思路: 分为两大块,标题一块,信息一块即可。
注意点:
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;
}