“商院官网: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> |
<style type="text/css"> | <style type="text/css"> | ||
− | + | 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"> | + | <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"> | + | <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"> | + | <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>
返回 网页设计与开发