“基础综合项目（一）”的版本间的差异
来自CloudWiki
（→2.盒子的嵌套布局） |
（→1.盒子的基本布局） |
||
| 第26行： | 第26行： | ||
#layer3{width:100%; height:30px; background:#074C97;color:white;text-align:center;} | #layer3{width:100%; height:30px; background:#074C97;color:white;text-align:center;} | ||
| − | .content | + | .content {text-indent:2em;line-height:150%;} |
#source {text-align:right;} | #source {text-align:right;} | ||
| 第33行： | 第33行： | ||
<body> | <body> | ||
<div id="layer1"><h1>山东商业职业技术学院</h1></div> | <div id="layer1"><h1>山东商业职业技术学院</h1></div> | ||
| − | <div id="layer2 | + | <div id="layer2" > |
<h3>学院简介</h3> | <h3>学院简介</h3> | ||
<hr /> | <hr /> | ||
| − | <p>山东商业职业技术学院是1999年经教育部批准设立的省属高职院校，办学历史可追溯到1936年的济南惠鲁商业学校。 | + | <p class="content">山东商业职业技术学院是1999年经教育部批准设立的省属高职院校，办学历史可追溯到1936年的济南惠鲁商业学校。 |
经过80多年的积淀，学校以“立德树人 兴商润民”为使命，以建设“创业型高水平商科院校”为目标愿景，秉承 “尚德蕴能，日精日新”的校训， | 经过80多年的积淀，学校以“立德树人 兴商润民”为使命，以建设“创业型高水平商科院校”为目标愿景，秉承 “尚德蕴能，日精日新”的校训， | ||
坚持“经营、创新、开放、共生”的发展理念，坚持为社会用人需求服务，为学生就业成才服务，为学生终生幸福奠基， | 坚持“经营、创新、开放、共生”的发展理念，坚持为社会用人需求服务，为学生就业成才服务，为学生终生幸福奠基， | ||
教学质量、办学特色得到社会各界的广泛肯定。</p> | 教学质量、办学特色得到社会各界的广泛肯定。</p> | ||
| − | <p>学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、 | + | <p class="content">学校是国家示范性高职院校、全国职业教育先进单位、全国普通高等学校毕业生就业工作先进集体、全国毕业生就业典型经验高校、 |
全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品 | 全国创新创业典型经验高校、全国高校实践育人创新创业基地、全省教育工作先进单位、山东省德育示范高校。学校建有山东省农产品 | ||
贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术 | 贮运保鲜技术实验室、北方现代物流研究所、济南市肉品质量安全控制工程技术研究中心、济南市农产品质量安全监控信息化工程技术 | ||
2017年11月24日 (五) 23:55的版本
- 这个实训通过4个步骤实现了一个简单的网页
- 同时，把前两个月所学的主要知识点融入到每个步骤中，达到活学活用的目的。
1.盒子的基本布局
- 这一步主要实现了盒子的基本布局（上下排列），网页由此分为头部、主体、页尾三个部分。
- 相关知识点：盒子模型的实现 CSS的选择符（二） 盒子的基本属性
- 要点：
- 盒子的上下排列
- 盒子宽度和高度的定义
- CSS选择符的使用
- 源代码：
<!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 {text-indent:2em;line-height:150%;}
#source {text-align:right;}
</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>
2.盒子的嵌套布局
- 这一步主要实现了盒子的嵌套，将中间的大盒子嵌套了一左一右两个小盒子。
- 相关知识点：盒子的嵌套布局 盒子的嵌套布局（二）
- 源代码:
<!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>
3.给页面添加图片和链接
<!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>
4.添加导航菜单
- 这一步主要将上一步的超链接改造为导航菜单
- 相关知识点：超链接块元素的实现
- 源代码:
<!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>
