左侧列表的实现(2)
Css代码:
#zuozhe{ text-align:center; padding-left:15px; padding-top:15px; } #zuozhe img{ border:1px solid #096; padding:8px; border-radius:8px;/*设置圆角CSS3新特性*
#zuozhe span{ font-size:15px; margin:10px; border-top:1px dashed #666666; border-bottom:1px dashed #666666; padding-top:5ox; padding-bottom:5px; display:block;/*将span行内元素转成块元素*/
#huoli{ height:150px; margin-top:20px; } .biaoti{ color:#FFFFFF; font-size:16px; font-weight:bolder; /*加粗*/ width:220px; height:40px; background-color:#328048; border-radius:0 10px 10px 0; /*只设置右边的圆角 顺序:上 右 下 左*/ padding-left:30px; line-height:40px; }
活力地带”列表和菜单导航里的一样,设置为浮动,就会排排坐,一个个从左到右,因为一行只要2个,所以宽度有限制以后,放置2个li后就自动掉第2行去了
(1)#huoli ul{ padding-left:20px; padding-top:10px; list-style:none; /*去掉点*/ } #huoli ul li{ float:left; /*因为空间不够宽,仅能放下2个li*/ width:80px; margin:5px;
(2)#huoli ul li a{ float:left; font-size:12px; color:#333333; text-decoration:none; } #huoli ul li img{ /*为了和文字保持队形,也浮动*/ float:left; margin-right:6px;
文章分类、文章列表”标题样式和活力地带用一个class 列表样式:li标签:用背景更容易设置列表的图标样式 background-position:5px center;背景图片左上角相对于li元素左上角位置 x轴 y轴
#list ul{ list-style:none; padding:15px; } #list ul li{ border-bottom:1px dashed #666; padding-bottom:8px; padding-left:15px; background:url(images/icon1.gif) no-repeat;
/*背景图片左上角相对于li元素左上角的位置 x轴 y轴*/ background-position:5px center; margin-bottom:8px; } #list ul li a{ font-size:12px; color:#333; text-decoration:none; }