“列表的实际应用”的版本间的差异

来自CloudWiki
跳转至: 导航搜索
2.列表样式的实际应用
 
(未显示同一用户的9个中间版本)
第2行: 第2行:
 
===1.常见列表样式设置===
 
===1.常见列表样式设置===
 
*兼容各大浏览器的列表样式设置方法:
 
*兼容各大浏览器的列表样式设置方法:
  第一,设置列表标记ol或ul的边距、填充都是0;<br/>
+
  第一,设置列表标记ol或ul的边距、填充都是0;列表符号位置为outside,<br/>
  第二,设置列表项标记li的左填充是0,左边距为20px,列表符号位置为outside,列表符号类型或者图像符号自己随意选定,通常不建议使用较大的图片,否则效果很差。
+
  第二,设置列表项标记li的左填充是0,左边距为20px,列表符号类型或者图像符号自己随意选定,通常不建议使用较大的图片,否则效果很差。
 +
第三,给li项加上text-align 和line-height属性。
  
 
*源代码:
 
*源代码:
 +
 
  <nowiki><html>
 
  <nowiki><html>
 
  <head>
 
  <head>
第14行: 第16行:
 
     }
 
     }
 
     li{padding-left:0;margin-left:20px;
 
     li{padding-left:0;margin-left:20px;
 +
        text-align:left;line-height:200%;
 +
    }
 
   </style>
 
   </style>
 
  </head>
 
  </head>
第27行: 第31行:
 
</body>
 
</body>
 
</html></nowiki>
 
</html></nowiki>
 
 
  
 
===2.列表样式的实际应用===
 
===2.列表样式的实际应用===
第34行: 第36行:
 
*'''第一步,网站布局'''
 
*'''第一步,网站布局'''
 
*[[文件:w5-10.png|750px]]
 
*[[文件:w5-10.png|750px]]
*源代码:
+
*源代码:[[列表的实际应用_源代码]]
  <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
  <nowiki></nowiki>
<html xmlns="http://www.w3.org/1999/xhtml">
 
    <head>
 
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 
      <title>无标题文档</title>
 
      <style type="text/css">
 
  *{letter-spacing:0.2em;margin:0;padding:0;}
 
          h2{text-align:center;}
 
          p{text-align:left;}
 
          h2{text-align:left;}
 
 
          #layer1{width:100%; height:100px;  background:#074C97;color:white;text-align:center;}
 
                  #layer1 h1{height:100px;line-height:100px;}
 
          #layer2{width:100%; height:auto;color:black;border:1px solid;}
 
  #layer2-1{
 
        width:70%; height:450px;
 
margin:0 ;padding:0;color:black;border:1px solid;
 
text-align:center;float:left;
 
}
 
          #layer2-1 h2{text-align:left;line-height:150%;}
 
          #source {text-align:right;}
 
      #layer2-2{
 
      width:29%; height:450px;
 
      margin:0 auto;border:1px solid;
 
      color:black;text-align:center;float:left;
 
      }
 
      #layer2-2 h2{text-align:center;line-height:200%;padding-top:10%;}
 
 
      #layer2-3{clear:both;}
 
          #layer3{
 
        width:100%; height:80px;
 
background:#074C97;color:white;
 
text-align:center;
 
}
 
          #layer3 p{
 
        height:30px;line-height:30px;
 
text-align:center;
 
}
 
 
 
                   
 
      </style>
 
    </head>
 
    <body>
 
      <div id="layer1"><h1>山东商业职业技术学院</h1></div>
 
      <div id="layer2" >
 
    <div id="layer2-1" class="content">
 
            <h2>学院要闻</h2>
 
            <hr width="70%" align="left" /><br/>
 
 
 
         
 
          </div>
 
    <div id="layer2-2">
 
        <h3>新闻排行</h3>
 
<center><hr width="70%" align="left" /></center>
 
</div>
 
</div>
 
             
 
          <div id="layer2-3"></div>
 
      </div>  
 
      <div id="layer3"><p>学校地址:济南市旅游路4516号    邮编:250103</p></div>
 
    </body>
 
</html></nowiki>
 
 
*第二步,用无序列表编写左侧的列表
 
*第二步,用无序列表编写左侧的列表
 
*[[文件: w5-11.png|750px]]
 
*[[文件: w5-11.png|750px]]
**将中间两个盒子的高度改为auto;
+
**将中间两个装新闻的盒子的高度改为auto;
 
**添加html代码:
 
**添加html代码:
 
  <nowiki><ul>
 
  <nowiki><ul>
第112行: 第53行:
 
   </ul>
 
   </ul>
 
   <br/></nowiki>
 
   <br/></nowiki>
**添加CSS代码:
+
**为列表及元素设置样式:
 
   <nowiki>#layer2-1 ul{ margin:0;
 
   <nowiki>#layer2-1 ul{ margin:0;
 
           list-style-position: outside;       
 
           list-style-position: outside;       
第130行: 第71行:
 
</ol></nowiki>
 
</ol></nowiki>
 
*在CSS中添加:
 
*在CSS中添加:
  <nowiki>#layer2-2 ol{ margin-left:40px;
+
  <nowiki>#layer2-2 ol{  
 
           list-style-position: outside;       
 
           list-style-position: outside;       
 
           }
 
           }
  #layer2-2 li{padding-left:0;margin-left:20px;
+
  #layer2-2 li{padding-left:0;margin-left:50px;
 
           text-align:left;line-height:250%;
 
           text-align:left;line-height:250%;
 
           font-size:90%;font-weight:bold;     
 
           font-size:90%;font-weight:bold;     

2020年12月5日 (六) 01:33的最新版本

列表的实际应用

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. li元素要设置为浮动(float:left);
    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 ;
		}