书接上回,学习继续。
在设置完成后,我们接下来进行文本区域的内容物格式的设置。
1.设置作者区域中文本的样式,如果没有span标签,就没有什么标识可以针对这段文本来设置css样式,所以span就是针对这样的情况用的
所有HTML元素可以看作盒子,span默认不具备盒子模型属性。盒子模型有padding、margin,但是span不具备这些属性,也就是设置这些是不起作用的,怎么办呢?
将span转成块元素:display:block 当然也可以从块元素转回行内元素display:inline
代码如下:
#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行内元素转成块元素*/
}
2.高度肯定得设置,因为列表都是浮动的,必须设置在多大的范围里浮动“活力地带”这个标题和其他俩标题样式一样,那怎么设置css?Class选择器
代码如下:
#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;
}
3.“活力地带”这个标题和其他俩标题样式一样,那怎么设置css?Class选择器“活力地带”列表和菜单导航里的一样,设置为浮动,就会排排坐,一个个从左到右,因为一行只要2个,所以宽度有限制以后,放置2个li后就自动掉第2行去了
代码如下:
#huoli ul{
padding-left:20px;
padding-top:10px;
list-style:none;
/*去掉点*/
}
#huoli ul li{
float:left;
/*因为空间不够宽,仅能放下2个li*/
width:80px;
margin:5px;
}
#huoli ul li a{
float:left;
font-size:12px;
color:#333333;
text-decoration:none;
}
#huoli ul li img{
/*为了和文字保持队形,也浮动*/
float:left;
margin-right:6px;
}
4.“文章分类、文章列表”标题样式和活力地带用一个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;
}
以上就完成了对左侧列表的实现,效果图如下:
至此,本回学习结束。