查看“基础综合项目（一）”的源代码

*这个实训通过4个步骤实现了一个简单的网页
*同时，把前两个月所学的主要知识点融入到每个步骤中，达到活学活用的目的。
==1.盒子的基本布局==
*[[文件:w4-38.png|700px]]
*这一步主要实现了盒子的基本布局（上下排列），网页由此分为头部、主体、页尾三个部分。
*相关知识点：[[盒子模型的实现]]&nbsp;&nbsp;[[CSS的选择符（二）]]&nbsp;&nbsp;[[盒子的基本属性]]
*要点：
*盒子是块级元素，默认就是上下排列
*为了自适应，盒子宽度尽量定义为百分比，高度尽量定义为auto，同一行内宽度之和不超过100%
*CSS选择符灵活使用，针对某个盒子用id选择符，针对某一类盒子用class选择符。
*源代码：
 <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;}           
           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;}		   
	   .content {text-indent:2em;line-height:150%;}
           #source {text-align:right;}   
           #layer3{width:100%; height:30px;  background:#074C97;color:white;text-align:center;}   
          
                    
       </style>
    </head>
    <body>
       <div id="layer1"><h1>山东商业职业技术学院</h1></div>
       <div id="layer2" >
            <h3>学院简介</h3>
           <hr />

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

==2.盒子的嵌套布局==
*[[文件:w4-39.png|700px]]
*这一步主要实现了盒子的嵌套，将中间的大盒子嵌套了一左一右两个小盒子。
*相关知识点：[[盒子的嵌套布局]]&nbsp;&nbsp;[[盒子的嵌套布局（二）]]
*要点：
**网页的布局一般使用盒子的嵌套来实现
**当嵌套的小盒子垂直排列时，不用添加额外的属性；
**当嵌套的小盒子水平排列时，需给每个小盒子加上float:left属性，同时最后加上一个空盒子消除浮动
*源代码:
 <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>

==3.给页面添加图片和链接==
*[[文件:w4-40.png|700px]]
*这一步主要实现了给网页添加链接和图片
*相关知识点：[[超链接标记及属性]]、[[插入图像]]、[[图文混排]]
*要点：
**超链接和图片的路径要把握清楚
**图文混排时，如果图片在文字左侧，给图片添加float:left属性，如果在右侧，给图片添加float:right属性
*源代码：
  <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>

==4.添加导航菜单==
*[[文件:w4-41.png|700px]]
*这一步主要将上一步的超链接改造为导航菜单
*相关知识点：[[超链接块元素的实现]]
*要点：
**导航菜单核心是把a标签转化为块级元素
**如果是水平导航栏，这种转化通过给a标签添加float:left来实现
**如果是垂直导航栏，这种转化通过给a标签添加display:block;来实现；
**添加导航栏后，可通过添加伪类选择符设置悬停等效果。
*源代码:
 <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>