列表的实际应用

来自CloudWiki
跳转至： 导航， 搜索

列表的实际应用

1.常见列表样式设置

  • 兼容各大浏览器的列表样式设置方法：
第一，设置列表标记ol或ul的边距、填充都是0；列表符号位置为outside，

第二，设置列表项标记li的左填充是0，左边距为20px，列表符号类型或者图像符号自己随意选定，通常不建议使用较大的图片，否则效果很差。
第三，给li项加上text-align 和line-height属性。
  • 源代码：
<html>
 <head>
   <style>
     ul{ margin:0;padding:0;
      list-style-position: outside;
      
     }
     li{padding-left:0;margin-left:20px;
        text-align:left;line-height:200%;
     }
   </style>
 </head>
 <body>

 <h4>一个无序列表：</h4>
 <ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
 </ul>

</body>
</html>

2.列表样式的实际应用



  • 第二步，用无序列表编写左侧的列表
    • 

  • W5-11.png

    • 将中间两个装新闻的盒子的高度改为auto;
      • 

    • 添加html代码：


<ul>
    <li>马广水书记参加山东省高职高专院校思想政治理论课建设联盟2017年年会并做报告</li>
    <li>党委书记马广水出席全国优质高职建设交流研讨会并作典型报告</li>
    <li>我校学生在第十五届山东省大学生软件设计大赛中再获佳绩</li>
    <li>“果蔬生产信息精准追溯技术体系研究与应用”课题交流会议在我校召开</li>
    <li>我校举行学习《习近平的七年知青岁月》主题征文活动</li>
    <li>我校承办山东省职业技术教育学会职业院校创新创业教育论坛</li>
    <li>学校举行“风雨兼程永向党　不忘初心励前行”红歌大赛</li>
		   
  </ul>
  <br/>



    • 为列表及元素设置样式：


 #layer2-1 ul{ margin:0;
           list-style-position: outside;      
       }
      #layer2-1 li{padding-left:0;margin-left:20px;text-align:left;line-height:250%;}



  • 第三步，用有序列表编写右侧的列表
    • 

  • W5-12.png
    • 

  • 在html代码中添加ol标签：


			<ol>
			  <li><a href="#">电子信息学院开展“宣贯十九大精神　</a></li>
			  <li><a href="#">食品药品学院开展集团客座教授讲座</a></li>
			  <li><a href="#">电信学院组织开展消防安全系列主题活动</a></li>
			  <li><a href="#">梅花桩武术协会举行20周年庆典活动</a></li>
			  <li><a href="#">外交学院举行韩国留学生书法作品展</a></li>
			  <li><a href="#">智能制造与服务学院举办汽车专家讲座</a></li>
			</ol>



  • 在CSS中添加：


#layer2-2 ol{ 
           list-style-position: outside;      
           }
 #layer2-2 li{padding-left:0;margin-left:50px;
           text-align:left;line-height:250%;
           font-size:90%;font-weight:bold;    
	  }



  • 第四步，用列表编写导航菜单
    • 

  • W5-13.png
    • 

  • 修改layer1盒子的高度为150px，然后在其中嵌套一个新盒子
    • 

  • html代码如下：


<div id="layer1">
	      <div id="layer1-1"><h1>山东商业职业技术学院</h1></div>
		  <div id="layer1-2">
		     <ul>
                          <li><a  href="#">学校概况</a></li>
                          <li><a href="#">机构设置</a></li>
                           <li><a href="#">教育教学</a></li> 
			   <li><a href="#">创新创业</a></li> 
			   <li><a href="#">科技服务</a></li>
                     </ul>
	         </div>
	   </div>




 



  • 此时CSS样式中只有layer1部分的代码要重新修改一下：
    • 

  • 这里有3个要点：


    1. 列表前面的符号要使它不出现（list-style-type: none;）
      2. 

    2. li元素要设置为浮动（float:left);
      3. 

    3. li里面的a元素要设置成块级元素（display:block;}


                     #layer1{width:100%; height:150px;  text-align:center;}
		   #layer1-1{height:100px;line-height:100px;color:black;}
		   #layer1-2{width:100%; height:50px;color:black;text-align:center;background:#074C97;border:1px solid;}
		   #layer1-2 ul {
				list-style-type: none;
				margin: 0;
				padding-left:8%;
				overflow: hidden;
				
			}

		#layer1-2 li {
				float: left;
		}

		#layer1-2 li a {
				display: block;
				color: white;
				text-align: center;
				padding: 14px 16px;
				text-decoration: none;
		}

		#layer1-2 li a:hover {
				background-color: #FF0000 ;
		}







					

						取自“http://www.openbrains.net/mediawiki/index.php?title=列表的实际应用&oldid=24404”