商院官网：列表的应用

案例：商院官网的制作

源代码：商院官网：列表的应用_源代码

添加列表

分别在学校要闻、通知公告、媒体报道添加如下列表：

<br/>
<ul>
				 
				  <li><a href="#">马克思主义学院召开陶行知教育...</a></li>
				  <li><a href="#">我校承办2017年山东省“农产品质量...</a></li>
				  <li><a href="#">2017山东养老服务业高峰论坛在我...</a></li>
				  <li><a href="#">校报荣获全国高校校报协会2016年...</a></li>
				  <li><a href="#">浙江纺织服装职业技术学院、河北...</a></li>
</ul>

<br/>
<ul>
				     <li><a href="#">关于组织开展国家职业指导师、心理...</a></li>
					 <li><a href="#">关于公布2017年公开招聘工作人员进...</a></li>
					 <li><a href="#">关于公布2017年公开招聘工作人员笔...</a></li>
					 <li><a href="#">2017年公开招聘工作人员笔试公告...</a></li>
					 <li><a href="#">关于2017年公开招聘工作人员现场...</a></li>
</ul>	
				

<br/>
<ul>
					 <li><a href="#">新浪山东：山东商职院承办2017年...</a></li>
					 <li><a href="#">大众网：山东商职院承办山东省职...</a></li>
					 <li><a href="#">新浪山东：2017山东养老服务业高...</a></li>
					 <li><a href="#">新浪山东：全国高校“形势与政策”...</a></li>
					 <li><a href="#">大众网：全国高校“形势与政策”课...</a></li>	
</ul>		

设定列表样式

为刚刚添加的列表设定样式

CSS：

       #layer2-2 a {color:black;text-decoration:none;}
       .layer2-2-1 ul{ margin:0;
           list-style-position: outside;      
        }
       .layer2-2-1 li{padding-left:0;margin-left:20px;text-align:left;line-height:250%;}

兼容各大浏览器的列表样式设置方法：

第一，设置列表标记ol或ul的边距、填充都是0；

第二，设置列表项标记li的左填充是0，左边距为20px，列表符号位置为outside，列表符号类型或者图像符号自己随意选定，通常不建议使用较大的图片，否则效果很差。

第三，给li项加上text-align 和line-height属性。

设置列表的样式为图片

添加list-style-image属性：

 .layer2-2-1 ul {
			...
			list-style-image:url('../img/dot.jpg');
			list-style-type:disc;
			
		}

每个列表项后面加上新闻的日期：

 
  <ul>
	<li><a href="#">马克思主义学院召开陶行知教育...    <span style="float:right;padding-right:4%;">11-22</span></a></li>
	。。。。。。
  </ul>