“商院官网：CSS样式”的版本间的差异

来自CloudWiki
跳转至： 导航， 搜索
（→‎任务一）
第7行： 第7行：
 
*用记事本编写如下代码：  
 
*用记事本编写如下代码：  
  
−
  <nowiki><html >
+
  <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>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
−
<title>山东商业职业技术学院</title>
+
<title>无标题文档</title>
 
<style type="text/css">
 
<style type="text/css">
−
  p{ }
+
p{margin:5px 0; font-size:12pt; line-height:22px;}
−
  .p1{ }
+
  .p1{text-align:center; font-size:20pt; line-height:50px;}
−
  .p2_4{ }
+
  .p2_4{text-align:center;}
−
  .p2_4 span{ }
+
  .p2_4 span{text-decoration:underline; font-style:italic;}
−
  .p3{ }
+
  .p3{text-align:center;text-decoration:underline;}
−
  .p5_9{ }
+
  .p5_9{text-indent:2em; line-height:20pt;}
−
  .p5_9 span{ }
+
  .p5_9 span{font-weight:bold;}
−
  #p5{}
+
#p5{ text-indent:0;}
 +
  #p5::first-letter{float:left;font-size:3em; line-height:30pt; font-weight:bold; color:#a00;}
 +
 
</style>
 
</style>
 
</head>
 
</head>
第29行： 第32行：
 
  <p class="p2_4">党群部</p>  
 
  <p class="p2_4">党群部</p>  
 
  <hr width="80%" />
 
  <hr width="80%" />
−
  <p class="p5_9" id="p5"> 山东商业职业技术学院是1999年经教育部批准设立的省属高职院校。学校具有悠久的办学历史和深厚的文化底蕴，办学历史可追溯到1936年的济南惠鲁商业学校。经过70多年的积淀，学校秉承“尚德蕴能，日精日新”的校训，坚持“就业导向”、“育人中心”、“能力本位”的办学方针，按照“创高职名校，施优教于民”的目标愿景，全校上下凝心聚力，干事创业，实现了跨越式发展，整体办学水平迅速提高。
+
  <p class="p5_9" id="p5"> 山东商业职业技术学院是1999年经教育部批准设立的省属高职院校。学校具有悠久的办学历史和深厚的文化底蕴，办学历史可追溯到1936年的济南惠鲁商业学校。经过70多年的积淀，学校秉承“尚德蕴能，日精日新”的校训，坚持“就业导向”、“育人中心”、“能力本位”的办学方针，按照“创高职名校，施优教于民”的目标愿景，全校上下凝心聚力，干事创业，实现了跨越式发展，整体办学水平迅速提高。2001年被教育部确定为“全国示范性高职院校建设单位”。2002年被教育部、财政部确定为“重点支持建设的职业技术学院”。2005年被评为“全国职业教育先进单位”，是山东省重点建设的高水平骨干示范高职院校。2007年入选“国家示范性高等职业院校建设计划”建设院校行列，荣获“全国高职院校毕业生就业质量50强”荣誉称号，被省人事厅、教育厅授予“全省普通高校毕业生就业工作先进集体”称号。学校依托商业集团，建有全国高职院校惟一的国家农产品现代物流工程技术研究中心、山东省农产品贮运保鲜技术实验室。2009年被评为全国普通高等学校毕业生就业工作先进集体、山东省高职院校惟一的德育示范高校、全省首批大学生创业教育示范校、山东省服务外包人才实训基地，连续十年被评为省级文明单位。
 
</p>
 
</p>
 
  <p class="p5_9">学校下设<span>会计学院、工商管理学院、信息技术学院、机电工程学院、生物工程学院、汽车与电子技术学院、外国语学院、旅游管理学院、艺术设计学院、国际交流学院、继续教育学院、基础课教学部</span>等12个二级教学院部，开设生物工程学院、银座商务学院、冰轮工程学院、甲骨文学院、银座汽车学院、消防安保学院等校企合作二级学院。
 
  <p class="p5_9">学校下设<span>会计学院、工商管理学院、信息技术学院、机电工程学院、生物工程学院、汽车与电子技术学院、外国语学院、旅游管理学院、艺术设计学院、国际交流学院、继续教育学院、基础课教学部</span>等12个二级教学院部，开设生物工程学院、银座商务学院、冰轮工程学院、甲骨文学院、银座汽车学院、消防安保学院等校企合作二级学院。
第35行： 第38行：
 
  <p class="p5_9">学校占地达2600亩，校舍建筑面积42万平方米，资产总值8亿多元，实验设备总值过亿元，图书馆藏书120万册。学校面向全国31个省、市、区招生，在山东省高职院校中录取分数线连续7年名列榜首，现有全日制在校生16000余人。
 
  <p class="p5_9">学校占地达2600亩，校舍建筑面积42万平方米，资产总值8亿多元，实验设备总值过亿元，图书馆藏书120万册。学校面向全国31个省、市、区招生，在山东省高职院校中录取分数线连续7年名列榜首，现有全日制在校生16000余人。
 
</p>
 
</p>
−
  <p class="p5_9"> 学校重视教育教学改革，积极推进专业、课程体系、教学团队、实践教学条件等建设，努力提高人才培养质量。现已建成集财经、电子信息、旅游、生化与药品制造、艺术设计等12大类58个专业。学生在高职高专“发明杯”全国大学生创新大赛、全国ITAT就业技能大赛、全国管理沙盘大赛、全国大学生会计信息化技能大赛等赛事中屡获大奖，成绩显著。
+
  <p class="p5_9"> 学校重视教育教学改革，积极推进专业、课程体系、教学团队、实践教学条件等建设，努力提高人才培养质量。现已建成集财经、电子信息、旅游、生化与药品制造、艺术设计等12大类58个专业。建有国家级精品专业1个，教育部教学改革试点专业2个，国家示范建设专业9个，省级教学改革示范建设专业8个，省级品牌专业3个，省级特色专业4个；建有国家级职业教育实训基地1个，省级重点教育实习基地1个；获得国家级优秀教学成果1项，省级优秀教学成果12项，建有国家级精品课程7门、省级精品课程27门，拥有省级优秀教学团队4个、省级教学名师2名。学生在高职高专“发明杯”全国大学生创新大赛、全国ITAT就业技能大赛、全国管理沙盘大赛、全国大学生会计信息化技能大赛等赛事中屡获大奖，成绩显著。
 
</p>
 
</p>
−
  <p class="p5_9"> 学校坚持校企合作办学，实施“名校名企育优生”战略，与上海大众、海尔集团、联想集团、鲁能集团、银座、美国Oracle公司、美国Cisco公司等国内外知名企业建立了紧密的校企合作协议，多数专业毕业生供不应求。
+
  <p class="p5_9"> 学校坚持校企合作办学，实施“名校名企育优生”战略，创新推行了“教学——经营——一体化”、“双业融通订单式”、“准员工式2+1” 等工学结合人才培养模式。创新实践工学结合，不断拓展校企合作范围，提升校企合作层次，与上海大众、海尔集团、联想集团、鲁能集团、银座、美国Oracle公司、美国Cisco公司等国内外知名企业建立了紧密的校企合作协议，在教材建设、课程置换、师资培养、实习就业等领域进行广泛而又深入的合作。毕业生质量得到社会高度认可，毕业生初次就业率连续5年保持96%以上，多数专业毕业生供不应求。
 
</p>
 
</p>
 
  <p>来源：党群部</p>
 
  <p>来源：党群部</p>
 
</body>
 
</body>
−
</html></nowiki>
+
</html>
 +
</nowiki>
 
*'''解释'''：上述代码中p1, p2_4, p5_9 可视作段落标记，用以区分不同的段落，如p1表示第1段，p3表示第3段，p2_4表示第2-4段等。
 
*'''解释'''：上述代码中p1, p2_4, p5_9 可视作段落标记，用以区分不同的段落，如p1表示第1段，p3表示第3段，p2_4表示第2-4段等。
  
第51行： 第55行：
 
**第三个段落字号12pt，居中显示，行高为24px，加下划线。
 
**第三个段落字号12pt，居中显示，行高为24px，加下划线。
 
**第五到第九个段落开头设置字号12pt，行高24px，两个字符的缩进，其中所有学院名称都使用加粗效果。
 
**第五到第九个段落开头设置字号12pt，行高24px，两个字符的缩进，其中所有学院名称都使用加粗效果。
−
 
  
 
==任务二==
 
==任务二==

2017年10月12日 (四) 15:15的版本

完成实训任务前，建议首先阅读：

任务一

  • 用记事本编写如下代码： 
<!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">
 p{margin:5px 0; font-size:12pt; line-height:22px;}
 .p1{text-align:center; font-size:20pt; line-height:50px;}
 .p2_4{text-align:center;}
 .p2_4 span{text-decoration:underline; font-style:italic;}
 .p3{text-align:center;text-decoration:underline;}
 .p5_9{text-indent:2em; line-height:20pt;}
 .p5_9 span{font-weight:bold;}
 #p5{ text-indent:0;}
 #p5::first-letter{float:left;font-size:3em; line-height:30pt; font-weight:bold; color:#a00;}
 
</style>
</head>

<body>
 <p class="p1">山东商业职业技术学院</p> 
 <p class="p2_4">2016-3-20<span>(2016-03-20 13:27:38)</span></p>
 <p class="p3">山东商业职业技术学院是1999年经教育部批准设立的省属高职院校。</p>
 <p class="p2_4">党群部</p> 
 <hr width="80%" />
 <p class="p5_9" id="p5"> 山东商业职业技术学院是1999年经教育部批准设立的省属高职院校。学校具有悠久的办学历史和深厚的文化底蕴，办学历史可追溯到1936年的济南惠鲁商业学校。经过70多年的积淀，学校秉承“尚德蕴能，日精日新”的校训，坚持“就业导向”、“育人中心”、“能力本位”的办学方针，按照“创高职名校，施优教于民”的目标愿景，全校上下凝心聚力，干事创业，实现了跨越式发展，整体办学水平迅速提高。2001年被教育部确定为“全国示范性高职院校建设单位”。2002年被教育部、财政部确定为“重点支持建设的职业技术学院”。2005年被评为“全国职业教育先进单位”，是山东省重点建设的高水平骨干示范高职院校。2007年入选“国家示范性高等职业院校建设计划”建设院校行列，荣获“全国高职院校毕业生就业质量50强”荣誉称号，被省人事厅、教育厅授予“全省普通高校毕业生就业工作先进集体”称号。学校依托商业集团，建有全国高职院校惟一的国家农产品现代物流工程技术研究中心、山东省农产品贮运保鲜技术实验室。2009年被评为全国普通高等学校毕业生就业工作先进集体、山东省高职院校惟一的德育示范高校、全省首批大学生创业教育示范校、山东省服务外包人才实训基地，连续十年被评为省级文明单位。
</p>
 <p class="p5_9">学校下设<span>会计学院、工商管理学院、信息技术学院、机电工程学院、生物工程学院、汽车与电子技术学院、外国语学院、旅游管理学院、艺术设计学院、国际交流学院、继续教育学院、基础课教学部</span>等12个二级教学院部，开设生物工程学院、银座商务学院、冰轮工程学院、甲骨文学院、银座汽车学院、消防安保学院等校企合作二级学院。
</p>
 <p class="p5_9">学校占地达2600亩，校舍建筑面积42万平方米，资产总值8亿多元，实验设备总值过亿元，图书馆藏书120万册。学校面向全国31个省、市、区招生，在山东省高职院校中录取分数线连续7年名列榜首，现有全日制在校生16000余人。
</p>
 <p class="p5_9"> 学校重视教育教学改革，积极推进专业、课程体系、教学团队、实践教学条件等建设，努力提高人才培养质量。现已建成集财经、电子信息、旅游、生化与药品制造、艺术设计等12大类58个专业。建有国家级精品专业1个，教育部教学改革试点专业2个，国家示范建设专业9个，省级教学改革示范建设专业8个，省级品牌专业3个，省级特色专业4个；建有国家级职业教育实训基地1个，省级重点教育实习基地1个；获得国家级优秀教学成果1项，省级优秀教学成果12项，建有国家级精品课程7门、省级精品课程27门，拥有省级优秀教学团队4个、省级教学名师2名。学生在高职高专“发明杯”全国大学生创新大赛、全国ITAT就业技能大赛、全国管理沙盘大赛、全国大学生会计信息化技能大赛等赛事中屡获大奖，成绩显著。
</p>
 <p class="p5_9"> 学校坚持校企合作办学，实施“名校名企育优生”战略，创新推行了“教学——经营——一体化”、“双业融通订单式”、“准员工式2+1” 等工学结合人才培养模式。创新实践工学结合，不断拓展校企合作范围，提升校企合作层次，与上海大众、海尔集团、联想集团、鲁能集团、银座、美国Oracle公司、美国Cisco公司等国内外知名企业建立了紧密的校企合作协议，在教材建设、课程置换、师资培养、实习就业等领域进行广泛而又深入的合作。毕业生质量得到社会高度认可，毕业生初次就业率连续5年保持96%以上，多数专业毕业生供不应求。
</p>
 <p>来源：党群部</p>
</body>
</html>
  • 解释：上述代码中p1, p2_4, p5_9 可视作段落标记，用以区分不同的段落，如p1表示第1段，p3表示第3段，p2_4表示第2-4段等。

写代码时，可直接在<style></style>标签中描述样式，如p1{font-size:10pt;text-align:center;}等

  • 要求：
    • 网页背景颜色贴近学校官网。
    • 第一个段落字号20pt，居中显示，文本行高为30px。
    • 第二和第四个段落字号12pt，居中显示，行高为24px.
    • 第三个段落字号12pt，居中显示，行高为24px，加下划线。
    • 第五到第九个段落开头设置字号12pt，行高24px，两个字符的缩进，其中所有学院名称都使用加粗效果。

任务二

  • 由另一小组成员设计本小组的项目网站2.0版
  • 要求:
  • 打开上周网页，去掉网页中原有的所有样式属性。
  • 给网页添加内容，从市场需求、网站功能、商业模式、团队分工、财务预估等5个方面描述自己的项目
  • 应用所学，使用CSS样式，调整网页的颜色背景、字体和文本属性
  • 风格保持个性、美观、实用，我酷故我在。
  • 代码样例：
<html>
   <head><title>你的项目</title>
   </head>
   <style 
      <!--在此行下面添加你的样式 -->
   </style
   <body>
     <h1>你的项目</h1>
     <hr />
     <p>项目介绍:</p>
     <p>（市场需求）</p>
     <p>（网站功能）</p>
     <p>（商业模式）</p>
     <p>（团队分工）</p>
     <p>（财务预估）</p>
   </body>
 </html>

返回 网页设计与开发

取自“http://www.openbrains.net/mediawiki/index.php?title=商院官网：CSS样式&oldid=878”