“基础综合项目（一）”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
（创建页面，内容为“==盒子的流式布局== *盒子的上下方向的边距根据具体需求来设置，左右方向的边距则设置为auto， 即margin:值1 auto 值2;，或者ma…”）
 
第1行： 第1行：
 
==盒子的流式布局==
 
==盒子的流式布局==
−
*盒子的上下方向的边距根据具体需求来设置，左右方向的边距则设置为auto，
+
*[[文件:w4-38.png]]
−
即margin:值1 auto 值2;，或者margin:值1  auto;
+
*源代码：
−
*水平方向边距auto的意义说明：
 
−
*使用浏览器窗口宽度或者使用父元素盒子的宽度减去当前盒子的宽度，将差值除以2之后得到的结果作为当前元素的左右边距。
 
−
*效果图：
 
−
*[[文件:w2-18.png|500px]]
 
−
*试一试：在[http://www.w3school.com.cn/tiy/t.asp?f=html_basic W3C编辑器]上粘贴以下代码，查看效果。
 
−
*然后在代码描述layer2的CSS属性中加入如下属性：margin:0px auto;
 
 
  <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
  <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
  <html xmlns="http://www.w3.org/1999/xhtml">
 
  <html xmlns="http://www.w3.org/1999/xhtml">
第14行： 第8行：
 
       <title>无标题文档</title>
 
       <title>无标题文档</title>
 
       <style type="text/css">
 
       <style type="text/css">
 +
      *{letter-spacing:0.2em;}
 
           h2{text-align:center;}
 
           h2{text-align:center;}
 
           p{text-align:left;}
 
           p{text-align:left;}
−
           #layer1{width:100%; height:100px;  background:blue;color:white;text-align:center;}
+
  h3{text-align:center;}
−
           #layer2{width:70%; height:300px;margin:0px auto;color:black;}
+
−
           #layer3{width:100%; height:30px;  background:blue;color:white;text-align:center;}  
+
           #layer1{width:100%; height:100px;  background:#074C97;color:white;text-align:center;}
 +
           #layer2{width:70%; height:auto;margin:0px auto;color:black;}  
 +
 
 +
           #layer3{width:100%; height:30px;  background:#074C97;color:white;text-align:center;}
 +
 
 +
  .content p{text-indent:2em;line-height:150%;}
 +
  #source {text-align:right;}
 
                      
 
                      
 
       </style>
 
       </style>
第24行： 第25行：
 
     <body>
 
     <body>
 
       <div id="layer1"><h1>山东商业职业技术学院</h1></div>
 
       <div id="layer1"><h1>山东商业职业技术学院</h1></div>
−
       <div id="layer2">
+
       <div id="layer2" class="content">
−
             <h2>信艺学院开展教师结对子活动<h2/>             
+
             <h3>学院简介</h3>
−
            <p>为让年轻教师更好地适应高职教育教学工作，进一步提高教学能力水平，提高教育教学质量，信息与艺术学院组织了教师“老带新”结对子活动，9月19日下午，活动的启动仪式举行。
+
           <hr />
−
            </p>             
+
 
 +
  <p>山东商业职业技术学院是1999年经教育部批准设立的省属高职院校，办学历史可追溯到1936年的济南惠鲁商业学校。
 +
  经过80多年的积淀，学校以“立德树人 兴商润民”为使命，以建设“创业型高水平商科院校”为目标愿景，秉承 “尚德蕴能，日精日新”的校训，
 +
  坚持“经营、创新、开放、共生”的发展理念，坚持为社会用人需求服务，为学生就业成才服务，为学生终生幸福奠基，
 +
  教学质量、办学特色得到社会各界的广泛肯定。</p>
 +
 
 +
          <p>学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、
 +
  全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品
 +
  贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术
 +
  研究中心等省市级科研机构。依托鲁商集团，建有国家农产品现代物流工程技术研究中心。</p>
 +
 
 +
          <p id="source"><i>来源：党群部</i></p>             
 
       </div>     
 
       </div>     
−
       <div id="layer3">底部</div>
+
       <div id="layer3">学校地址：济南市旅游路4516号    邮编：250103</div>
 
     </body>
 
     </body>
−
  </html>
+
  </html></nowiki>
−
</nowiki>
 
−
*如果不加水平居中的属性，页面内容会偏向一侧
 
−
*加了之后，页面内容水平居中
 
 
==盒子的嵌套布局==
 
==盒子的嵌套布局==
 +
*[[文件:w4-39.png]]
 +
*源代码:
 +
<nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<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;}
 +
          h2{text-align:center;}
 +
          p{text-align:left;}
 +
  h3{text-align:center;}
 +
 +
          #layer1{width:100%; height:100px;  background:#074C97;color:white;text-align:center;}
 +
  #layer1 h1{height:100px;line-height:100px;}
 +
          #layer2{width:100%; height:auto;margin:0px auto;color:black;}
 +
  #layer2-1{
 +
      width:30%; height:auto;
 +
  padding-top:2%;margin:0 auto;
 +
  color:black;text-align:center;float:left;
 +
  }
 +
  #layer2-1 p{text-align:center;line-height:250%;}
 +
  #layer2-2{
 +
        width:60%; height:auto;
 +
margin:0 auto;color:black;
 +
text-align:center;float:left;
 +
}
 +
  .content p{text-indent:2em;line-height:150%;}
 +
  #source {text-align:right;}
 +
  #layer2-3{clear:both;}
 +
          #layer3{
 +
        width:100%; height:30px;
 +
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">
 +
  <p>学校概况</p>
 +
          <p>机构设置</p>
 +
          <p>教育教学</p>
 +
          <p>创新创业</p>
 +
          <p>科技服务</p>
 +
         
 +
</div>
 +
    <div id="layer2-2" class="content">
 +
            <h3>学院简介</h3>
 +
            <hr />
 +
 +
  <p>山东商业职业技术学院是1999年经教育部批准设立的省属高职院校，办学历史可追溯到1936年的济南惠鲁商业学校。
 +
  经过80多年的积淀，学校以“立德树人 兴商润民”为使命，以建设“创业型高水平商科院校”为目标愿景，秉承 “尚德蕴能，日精日新”的校训，
 +
  坚持“经营、创新、开放、共生”的发展理念，坚持为社会用人需求服务，为学生就业成才服务，为学生终生幸福奠基，
 +
  教学质量、办学特色得到社会各界的广泛肯定。</p>
 +
 
 +
          <p>学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、
 +
  全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品
 +
  贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术
 +
  研究中心等省市级科研机构。依托鲁商集团，建有国家农产品现代物流工程技术研究中心。</p>
 +
 
 +
          <p id="source"><i>来源：党群部</i></p>           
 +
          </div>         
 +
          <div id="layer2-3"></div>
 +
      </div>  
 +
      <div id="layer3"><p>学校地址：济南市旅游路4516号    邮编：250103</p></div>
 +
    </body>
 +
</html></nowiki>
 
==给页面添加图片和链接==
 
==给页面添加图片和链接==
 +
*[[文件:w4-40.png]]
 +
*源代码：
 +
  <nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<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;}
 +
          h2{text-align:center;}
 +
          p{text-align:left;}
 +
  h3{text-align:center;}
 +
 +
          #layer1{width:100%; height:100px;  background:#074C97;color:white;text-align:center;}
 +
  #layer1 h1{height:100px;line-height:100px;}
 +
          #layer2{width:100%; height:auto;margin:0px auto;color:black;}
 +
  #layer2-1{
 +
      width:30%; height:auto;
 +
  padding-top:2%;margin:0 auto;
 +
  color:black;text-align:center;float:left;
 +
  }
 +
  #layer2-1 p{text-align:center;line-height:250%;}
 +
  #layer2-2{
 +
        width:60%; height:auto;
 +
margin:0 auto;color:black;
 +
text-align:center;float:left;
 +
}
 +
  .content p{text-indent:2em;line-height:150%;}
 +
  .content_img {width:300px;float:left;padding:5px; margin:5px 15px 15px 0; }
 +
  #source {text-align:right;}
 +
  #layer2-3{clear:both;}
 +
          #layer3{
 +
        width:100%; height:30px;
 +
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">
 +
  <p><a href="">学校概况</a></p>
 +
          <p><a href="">机构设置</a></p>
 +
          <p><a href="">教育教学</a></p>
 +
          <p><a href="">创新创业</a></p>
 +
          <p><a href="">科技服务</a></p>
 +
         
 +
</div>
 +
    <div id="layer2-2" class="content">
 +
          <h3>学院简介</h3>
 +
            <hr />
 +
          <img class="content_img" src="photo7.jpg">
 +
  <p>山东商业职业技术学院是1999年经教育部批准设立的省属高职院校，办学历史可追溯到1936年的济南惠鲁商业学校。
 +
  经过80多年的积淀，学校以“立德树人 兴商润民”为使命，以建设“创业型高水平商科院校”为目标愿景，秉承 “尚德蕴能，日精日新”的校训，
 +
  坚持“经营、创新、开放、共生”的发展理念，坚持为社会用人需求服务，为学生就业成才服务，为学生终生幸福奠基，
 +
  教学质量、办学特色得到社会各界的广泛肯定。</p>
 +
 
 +
          <p>学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、
 +
  全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品
 +
  贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术
 +
  研究中心等省市级科研机构。依托鲁商集团，建有国家农产品现代物流工程技术研究中心。</p>
 +
 
 +
          <p id="source"><i>来源：党群部</i></p>         
 +
          </div>         
 +
          <div id="layer2-3"></div>
 +
      </div>  
 +
      <div id="layer3"><p>学校地址：济南市旅游路4516号    邮编：250103</p></div>
 +
    </body>
 +
</html></nowiki>
 
==添加导航菜单==
 
==添加导航菜单==
 +
*[[文件:w4-41.png]]
 +
*源代码:
 +
<nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<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;}
 +
          h2{text-align:center;}
 +
          p{text-align:left;}
 +
  h3{text-align:center;}
 +
 +
          #layer1{width:100%; height:100px;  background:#074C97;color:white;text-align:center;}
 +
  #layer1 h1{height:100px;line-height:100px;}
 +
          #layer2{width:100%; height:auto;margin:0px auto;color:black;}
 +
  #navigation{
 +
      width:30%; height:auto;
 +
  font-weight:bold;
 +
          font-size:1em;
 +
          text-align:center; /* 这个属性使盒子中的链接居中 */
 +
  margin:0 auto;
 +
  padding-top:30px;
 +
  float:left;
 +
  }
 +
  #navigation a{
 +
 +
          width:90%;
 +
          display:block;
 +
          height:5em;
 +
          line-height:4em;
 +
          color:#FFFFFF;
 +
          background-color:#1136c1;
 +
         
 +
          text-decoration:none;
 +
              border-top:1px solid white;
 +
          border-left:12px solid #151571; /* 左边的粗边 */
 +
 +
          }
 +
    #navigation  a:hover{ /* 鼠标经过时 */
 +
background-color:#002099; /* 改变背景色 */
 +
color:#ffff00; /* 改变文字颜色 */
 +
border-left:12px solid yellow;
 +
}
 +
  #layer2-2{
 +
        width:60%; height:auto;
 +
margin:0 auto;color:black;
 +
text-align:center;float:left;
 +
}
 +
  .content p{text-indent:2em;line-height:150%;}
 +
  .content_img {width:300px;float:left;padding:5px; margin:5px 15px 15px 0; }
 +
  #source {text-align:right;}
 +
  #layer2-3{clear:both;}
 +
          #layer3{
 +
        width:100%; height:30px;
 +
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="navigation">
 +
  <a href="">学校概况</a>
 +
          <a href="">机构设置</a>
 +
          <a href="">教育教学</a>
 +
          <a href="">创新创业</a>
 +
          <a href="">科技服务</a>
 +
         
 +
</div>
 +
    <div id="layer2-2" class="content">
 +
          <h3>学院简介</h3>
 +
            <hr />
 +
          <img class="content_img" src="photo7.jpg">
 +
  <p>山东商业职业技术学院是1999年经教育部批准设立的省属高职院校，办学历史可追溯到1936年的济南惠鲁商业学校。
 +
  经过80多年的积淀，学校以“立德树人 兴商润民”为使命，以建设“创业型高水平商科院校”为目标愿景，秉承 “尚德蕴能，日精日新”的校训，
 +
  坚持“经营、创新、开放、共生”的发展理念，坚持为社会用人需求服务，为学生就业成才服务，为学生终生幸福奠基，
 +
  教学质量、办学特色得到社会各界的广泛肯定。</p>
 +
 
 +
          <p>学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、
 +
  全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品
 +
  贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术
 +
  研究中心等省市级科研机构。依托鲁商集团，建有国家农产品现代物流工程技术研究中心。</p>
 +
 
 +
          <p id="source"><i>来源：党群部</i></p>         
 +
          </div>         
 +
          <div id="layer2-3"></div>
 +
      </div>  
 +
      <div id="layer3"><p>学校地址：济南市旅游路4516号    邮编：250103</p></div>
 +
    </body>
 +
</html></nowiki>

2017年11月23日 (四) 15:33的版本

盒子的流式布局

  • W4-38.png
  • 源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <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;}
           h2{text-align:center;}
           p{text-align:left;}
		   h3{text-align:center;}	
			
           #layer1{width:100%; height:100px;  background:#074C97;color:white;text-align:center;}
           #layer2{width:70%; height:auto;margin:0px auto;color:black;}		   
		   
           #layer3{width:100%; height:30px;  background:#074C97;color:white;text-align:center;} 
		   
		   .content p{text-indent:2em;line-height:150%;}
		   #source {text-align:right;}
                    
       </style>
    </head>
    <body>
       <div id="layer1"><h1>山东商业职业技术学院</h1></div>
       <div id="layer2" class="content">
            <h3>学院简介</h3>
           <hr />

		   <p>山东商业职业技术学院是1999年经教育部批准设立的省属高职院校，办学历史可追溯到1936年的济南惠鲁商业学校。
		   经过80多年的积淀，学校以“立德树人 兴商润民”为使命，以建设“创业型高水平商科院校”为目标愿景，秉承 “尚德蕴能，日精日新”的校训，
		   坚持“经营、创新、开放、共生”的发展理念，坚持为社会用人需求服务，为学生就业成才服务，为学生终生幸福奠基，
		   教学质量、办学特色得到社会各界的广泛肯定。</p>
		   
           <p>学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、
		   全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品
		   贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术
		   研究中心等省市级科研机构。依托鲁商集团，建有国家农产品现代物流工程技术研究中心。</p>
		   
           <p id="source"><i>来源：党群部</i></p>            
       </div>    
       <div id="layer3">学校地址：济南市旅游路4516号    邮编：250103</div>
    </body>
 </html>

盒子的嵌套布局

  • W4-39.png
  • 源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <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;}
           h2{text-align:center;}
           p{text-align:left;}
		   h3{text-align:center;}	
			
           #layer1{width:100%; height:100px;  background:#074C97;color:white;text-align:center;}
		   #layer1 h1{height:100px;line-height:100px;}
           #layer2{width:100%; height:auto;margin:0px auto;color:black;}
		   #layer2-1{
		       width:30%; height:auto;
			   padding-top:2%;margin:0 auto;
			   color:black;text-align:center;float:left;
		   }
		   #layer2-1 p{text-align:center;line-height:250%;}
		   #layer2-2{
		        width:60%; height:auto;
				margin:0 auto;color:black;
				text-align:center;float:left;
			}
		   .content p{text-indent:2em;line-height:150%;}
		   #source {text-align:right;}
		   #layer2-3{clear:both;}
           #layer3{ 
		        width:100%; height:30px; 
				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"> 
		   <p>学校概况</p>
           <p>机构设置</p>
           <p>教育教学</p>
           <p>创新创业</p>
           <p>科技服务</p>
           
		 </div>
	     <div id="layer2-2" class="content">
            <h3>学院简介</h3>
            <hr />

		   <p>山东商业职业技术学院是1999年经教育部批准设立的省属高职院校，办学历史可追溯到1936年的济南惠鲁商业学校。
		   经过80多年的积淀，学校以“立德树人 兴商润民”为使命，以建设“创业型高水平商科院校”为目标愿景，秉承 “尚德蕴能，日精日新”的校训，
		   坚持“经营、创新、开放、共生”的发展理念，坚持为社会用人需求服务，为学生就业成才服务，为学生终生幸福奠基，
		   教学质量、办学特色得到社会各界的广泛肯定。</p>
		   
           <p>学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、
		   全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品
		   贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术
		   研究中心等省市级科研机构。依托鲁商集团，建有国家农产品现代物流工程技术研究中心。</p>
		   
           <p id="source"><i>来源：党群部</i></p>            
          </div>          
          <div id="layer2-3"></div>
       </div>		  
       <div id="layer3"><p>学校地址：济南市旅游路4516号    邮编：250103</p></div>
    </body>
 </html>

给页面添加图片和链接

  • W4-40.png
  • 源代码：
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <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;}
           h2{text-align:center;}
           p{text-align:left;}
		   h3{text-align:center;}	
			
           #layer1{width:100%; height:100px;  background:#074C97;color:white;text-align:center;}
		   #layer1 h1{height:100px;line-height:100px;}
           #layer2{width:100%; height:auto;margin:0px auto;color:black;}
		   #layer2-1{
		       width:30%; height:auto;
			   padding-top:2%;margin:0 auto;
			   color:black;text-align:center;float:left;
		   }
		   #layer2-1 p{text-align:center;line-height:250%;}
		   #layer2-2{
		        width:60%; height:auto;
				margin:0 auto;color:black;
				text-align:center;float:left;
			}
		   .content p{text-indent:2em;line-height:150%;}
		   .content_img {width:300px;float:left;padding:5px; margin:5px 15px 15px 0; }
		   #source {text-align:right;}
		   #layer2-3{clear:both;}
           #layer3{ 
		        width:100%; height:30px; 
				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"> 
		   <p><a href="">学校概况</a></p>
           <p><a href="">机构设置</a></p>
           <p><a href="">教育教学</a></p>
           <p><a href="">创新创业</a></p>
           <p><a href="">科技服务</a></p>
           
		 </div>
	     <div id="layer2-2" class="content">
           <h3>学院简介</h3>
            <hr />
           <img class="content_img" src="photo7.jpg">
		   <p>山东商业职业技术学院是1999年经教育部批准设立的省属高职院校，办学历史可追溯到1936年的济南惠鲁商业学校。
		   经过80多年的积淀，学校以“立德树人 兴商润民”为使命，以建设“创业型高水平商科院校”为目标愿景，秉承 “尚德蕴能，日精日新”的校训，
		   坚持“经营、创新、开放、共生”的发展理念，坚持为社会用人需求服务，为学生就业成才服务，为学生终生幸福奠基，
		   教学质量、办学特色得到社会各界的广泛肯定。</p>
		   
           <p>学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、
		   全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品
		   贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术
		   研究中心等省市级科研机构。依托鲁商集团，建有国家农产品现代物流工程技术研究中心。</p>
		   
           <p id="source"><i>来源：党群部</i></p>          
          </div>          
          <div id="layer2-3"></div>
       </div>		  
       <div id="layer3"><p>学校地址：济南市旅游路4516号    邮编：250103</p></div>
    </body>
 </html>

添加导航菜单

  • W4-41.png
  • 源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <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;}
           h2{text-align:center;}
           p{text-align:left;}
		   h3{text-align:center;}	
			
           #layer1{width:100%; height:100px;  background:#074C97;color:white;text-align:center;}
		   #layer1 h1{height:100px;line-height:100px;}
           #layer2{width:100%; height:auto;margin:0px auto;color:black;}
		   #navigation{
		       width:30%; height:auto;
			   font-weight:bold;
	           font-size:1em;
	           text-align:center; /* 这个属性使盒子中的链接居中 */
			   margin:0 auto;
			   padding-top:30px;
			   float:left;
		   }
		   #navigation a{
	
	           width:90%;
	           display:block;
	           height:5em;
	           line-height:4em;
	           color:#FFFFFF;
	           background-color:#1136c1;
	           
	           text-decoration:none;
               border-top:1px solid white;	
	           border-left:12px solid #151571;		/* 左边的粗边 */
	
           }
		    #navigation  a:hover{					/* 鼠标经过时 */
				background-color:#002099;			/* 改变背景色 */
				color:#ffff00;						/* 改变文字颜色 */
				border-left:12px solid yellow;
			}
		   #layer2-2{
		        width:60%; height:auto;
				margin:0 auto;color:black;
				text-align:center;float:left;
			}
		   .content p{text-indent:2em;line-height:150%;}
		   .content_img {width:300px;float:left;padding:5px; margin:5px 15px 15px 0; }
		   #source {text-align:right;}
		   #layer2-3{clear:both;}
           #layer3{ 
		        width:100%; height:30px; 
				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="navigation"> 
		   <a href="">学校概况</a>
           <a href="">机构设置</a>
           <a href="">教育教学</a>
           <a href="">创新创业</a>
           <a href="">科技服务</a>
           
		 </div>
	     <div id="layer2-2" class="content">
           <h3>学院简介</h3>
            <hr />
           <img class="content_img" src="photo7.jpg">
		   <p>山东商业职业技术学院是1999年经教育部批准设立的省属高职院校，办学历史可追溯到1936年的济南惠鲁商业学校。
		   经过80多年的积淀，学校以“立德树人 兴商润民”为使命，以建设“创业型高水平商科院校”为目标愿景，秉承 “尚德蕴能，日精日新”的校训，
		   坚持“经营、创新、开放、共生”的发展理念，坚持为社会用人需求服务，为学生就业成才服务，为学生终生幸福奠基，
		   教学质量、办学特色得到社会各界的广泛肯定。</p>
		   
           <p>学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、
		   全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品
		   贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术
		   研究中心等省市级科研机构。依托鲁商集团，建有国家农产品现代物流工程技术研究中心。</p>
		   
           <p id="source"><i>来源：党群部</i></p>          
          </div>          
          <div id="layer2-3"></div>
       </div>		  
       <div id="layer3"><p>学校地址：济南市旅游路4516号    邮编：250103</p></div>
    </body>
 </html>
取自“http://www.openbrains.net/mediawiki/index.php?title=基础综合项目（一）&oldid=2734”