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

来自CloudWiki
跳转至： 导航， 搜索
 
（未显示同一用户的10个中间版本）
第1行： 第1行：
−
完成实训任务前，建议首先阅读：
+
[[文件:web8-19.png|600px]]
−
*[[常用标签]]
 
−
*[[什么是样式表]]
 
−
*[[CSS常用属性]]
 
  
 
==任务一==
 
==任务一==
−
*用记事本编写如下代码：
+
*源代码：
  
−
  <nowiki><html >
+
  <nowiki><!DOCTYPE html>
 +
<html>
 
<head>
 
<head>
−
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
+
<meta charset="utf-8" />
−
<title>山东商业职业技术学院</title>
+
<title>无标题文档</title>
 
<style type="text/css">
 
<style type="text/css">
−
  p{ }
+
body{
−
  .p1{ }
+
background: #fcfcfc;
−
.p2_4{ }
+
}
−
.p2_4 span{ }
+
p{  
−
.p3{ }
+
color:black;
−
.p5_9{ }
+
}
−
.p5_9 span{ }
+
#title{
−
  #p5{}
+
font-weight: bold;
 +
text-align: center;
 +
}
 +
#date{
 +
font-size:80%;
 +
line-height:220%;
 +
text-align: center;
 +
}
 +
 
 +
.detail{
 +
text-indent: 2em;
 +
line-height:220%;
 +
margin:0;
 +
}
 +
 
 +
#writer{
 +
font-size:100%;
 +
text-align: right;
 +
padding-right:20%;
 +
}
 +
   
 
</style>
 
</style>
 
</head>
 
</head>
  
 
<body>
 
<body>
−
  <p class="p1">山东商业职业技术学院</p>  
+
  <h2>山东商业职业技术学院</h2>  
−
  <p class="p2_4">2016-3-20<span>(2016-03-20 13:27:38)</span></p>
+
  <br>
−
<p class="p3">山东商业职业技术学院是1999年经教育部批准设立的省属高职院校。</p>
+
<p id="title">学校与三所职业院校签署合作意向书</p>
−
<p class="p2_4">党群部</p>  
+
<hr/>
−
<hr width="80%" />
+
<p id="date">时间：2019-12-21 09:09:21　　作者：杨帆　　来源：办公室（统战部）　　点击量：51</p>
−
<p class="p5_9" id="p5"> 山东商业职业技术学院是1999年经教育部批准设立的省属高职院校。学校具有悠久的办学历史和深厚的文化底蕴，办学历史可追溯到1936年的济南惠鲁商业学校。经过70多年的积淀，学校秉承“尚德蕴能，日精日新”的校训，坚持“就业导向”、“育人中心”、“能力本位”的办学方针，按照“创高职名校，施优教于民”的目标愿景，全校上下凝心聚力，干事创业，实现了跨越式发展，整体办学水平迅速提高。
+
<p class="detail">12月20日，由中国高教学会职教分会主办的商科高职教育服务“一带一路”暨东中西部商科院校区域合作第十二次研讨会在甘肃举行，会议期间，学校党委书记张志东书记代表学校与兰州现代职业学院、山西金融职业学院、辽宁经济职业技术学院分别签订了合作意向书。</p>
−
</p>
+
<p class="detail">会议由甘肃机电职业技术学院承办，中国职教学会商科专业委员会、中国商业经济学会职业教育分会、现代教育研究院对会议给予支持和指导。共有来自全国70个单位的130余名代表参加会议，张志东主持了大会开幕式。</p>
−
<p class="p5_9">学校下设<span>会计学院、工商管理学院、信息技术学院、机电工程学院、生物工程学院、汽车与电子技术学院、外国语学院、旅游管理学院、艺术设计学院、国际交流学院、继续教育学院、基础课教学部</span>等12个二级教学院部，开设生物工程学院、银座商务学院、冰轮工程学院、甲骨文学院、银座汽车学院、消防安保学院等校企合作二级学院。
+
<p class="detail">学校以优异成绩入选中国特色高水平高职学校和专业建设计划建设单位，正式开启“双高计划”建设，意向书的签署旨在加强东中西部商科院校的区域合作，学校将发挥“双高计划”引领职业教育高质量发展，更好地服务区域经济发展。</p>
−
</p>
+
   
−
<p class="p5_9">学校占地达2600亩，校舍建筑面积42万平方米，资产总值8亿多元，实验设备总值过亿元，图书馆藏书120万册。学校面向全国31个省、市、区招生，在山东省高职院校中录取分数线连续7年名列榜首，现有全日制在校生16000余人。
+
<p id="writer">责任编辑：宣传部</p>
−
</p>
 
−
<p class="p5_9"> 学校重视教育教学改革，积极推进专业、课程体系、教学团队、实践教学条件等建设，努力提高人才培养质量。现已建成集财经、电子信息、旅游、生化与药品制造、艺术设计等12大类58个专业。学生在高职高专“发明杯”全国大学生创新大赛、全国ITAT就业技能大赛、全国管理沙盘大赛、全国大学生会计信息化技能大赛等赛事中屡获大奖，成绩显著。
 
−
</p>
 
−
  <p class="p5_9"> 学校坚持校企合作办学，实施“名校名企育优生”战略，与上海大众、海尔集团、联想集团、鲁能集团、银座、美国Oracle公司、美国Cisco公司等国内外知名企业建立了紧密的校企合作协议，多数专业毕业生供不应求。
 
−
</p>
 
−
<p>来源：党群部</p>
 
 
</body>
 
</body>
 
</html></nowiki>
 
</html></nowiki>
−
*'''解释'''：上述代码中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个方面描述自己的项目
+
任务2：
−
*应用所学，使用CSS样式，调整网页的颜色背景、字体和文本属性
 
−
*风格保持个性、美观、实用，我酷故我在。
 
  
−
返回 [[网页设计与开发]]
+
将此css样式改为外部样式表。

2019年12月22日 (日) 14:12的最新版本

Web8-19.png

任务一

  • 源代码： 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{
	background: #fcfcfc;
}
p{  
	color:black; 
}
#title{
	font-weight: bold;
	text-align: center;
}
#date{
	font-size:80%;
	line-height:220%;
	text-align: center;
}

.detail{
	text-indent: 2em;
	line-height:220%;
	margin:0;
	}

#writer{
	font-size:100%;
	text-align: right;
	padding-right:20%;
}
 
</style>
</head>

<body>
 <h2>山东商业职业技术学院</h2> 
 <br>
<p id="title">学校与三所职业院校签署合作意向书</p>
<hr/>
<p id="date">时间：2019-12-21 09:09:21　　作者：杨帆　　来源：办公室（统战部）　　点击量：51</p>
<p class="detail">12月20日，由中国高教学会职教分会主办的商科高职教育服务“一带一路”暨东中西部商科院校区域合作第十二次研讨会在甘肃举行，会议期间，学校党委书记张志东书记代表学校与兰州现代职业学院、山西金融职业学院、辽宁经济职业技术学院分别签订了合作意向书。</p>
<p class="detail">会议由甘肃机电职业技术学院承办，中国职教学会商科专业委员会、中国商业经济学会职业教育分会、现代教育研究院对会议给予支持和指导。共有来自全国70个单位的130余名代表参加会议，张志东主持了大会开幕式。</p>
<p class="detail">学校以优异成绩入选中国特色高水平高职学校和专业建设计划建设单位，正式开启“双高计划”建设，意向书的签署旨在加强东中西部商科院校的区域合作，学校将发挥“双高计划”引领职业教育高质量发展，更好地服务区域经济发展。</p>
 
<p id="writer">责任编辑：宣传部</p>
</body>
</html>

任务2：

将此css样式改为外部样式表。

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