Web学习3.25

书接上回，学习继续。

在设置完成后，我们接下来进行文本区域的内容物格式的设置。

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;
}

以上就完成了对左侧列表的实现，效果图如下：

 

至此，本回学习结束。

转载于:https://my.oschina.net/u/4090525/blog/3029429