“项目实训4”的版本间的差异

来自CloudWiki
跳转至: 导航搜索
第4行: 第4行:
 
**[[盒子的基本属性]]  [[盒子的左右排列]]  
 
**[[盒子的基本属性]]  [[盒子的左右排列]]  
 
*想一想:下列盒子布局你能否实现:
 
*想一想:下列盒子布局你能否实现:
*[[文件:范例.jpg]] [[文件:范例.jpg]] [[文件:范例.jpg]]  
+
*[[文件:w2-39.png]] [[文件:w2-40.png]] [[文件:w2-41.png]]  
 
*以上周制作的学院网页为基础,将布局改为左右布局,样例如下:
 
*以上周制作的学院网页为基础,将布局改为左右布局,样例如下:
*[[文件:范例.jpg]]  
+
*[[文件:w2-42.png]]  
 
*代码保存为文件4.html,'''上传到你的码云'学院项目'中去'''([[“码云”的使用]])。
 
*代码保存为文件4.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>
 
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 
      <title>无标题文档</title>
 
      <style type="text/css">
 
          .layer1{width:100%; height:100px;  background:blue;color:white;text-align:center;}
 
          .layer2{width:70%; height:300px;margin:0 auto;color:blue;text-align:left;text-align:left;}
 
          .layer3{width:100%; height:30px;  background:blue;color:white;text-align:center;}         
 
      </style>
 
    </head>
 
    <body>
 
      <div class="layer1"><h1>山东商业职业技术学院</h1></div>
 
      <div class="layer2">
 
          <h3>(标题)我校1项课题获2017年省社科规划课题立项</h3>
 
          <hr />
 
          <p>(作者信息)时间:2017-10-16 15:19:49  作者:刘蕊 李卫成  来源:马克思主义学院  点击量:248</p>
 
          <p>(正文1)近日,山东省社会科学规划办组织了对2017年度省人文社会科学课题评审,我校马克思主义学院教师刘蕊主持申报的《自媒体时代高校思想政治教育人文关怀研究》获高等学校思想政治教育研究专项资助立项。</p>
 
          <p>(正文2)该项课题的成功申报,将有助于进一步贯彻落实全国全省高校思想政治工作会议精神,突出高等教育的立德树人根本任务,为做好新形势下高校思想政治工作提供智力支持。</p>
 
          <p>(正文3)本年度省社科规划办的课题主要包括基础研究、应用对策研究和有关专项研究课题,其中专项课题主要有高等学校思想政治教育研究专项、青年学者重点培养计划研究专项等,经过专家评审,评选出各类立项课题共639项,其中高等学校思想政治教育研究课题51项。</p>
 
          <p>(来源)来源:党群部</p>
 
        </div>   
 
      <div class="layer3">学校地址:济南市旅游路4516号    邮编:250103</div>
 
    </body>
 
</html>
 
</nowiki>
 
  
 
==任务二==
 
==任务二==
第40行: 第14行:
 
**[[盒子的基本属性]]&nbsp;&nbsp;[[盒子的左右排列]]  
 
**[[盒子的基本属性]]&nbsp;&nbsp;[[盒子的左右排列]]  
 
*想一想:下列盒子布局你能否实现:
 
*想一想:下列盒子布局你能否实现:
*[[文件:范例.jpg]]&nbsp;[[文件:范例.jpg]]&nbsp;[[文件:范例.jpg]]  
+
*[[文件:w2-39.png]]&nbsp;[[文件:w2-40.png]]&nbsp;[[文件:w2-41.png]]  
*以上周制作的项目网页为基础,将布局改为左右布局,样例如下:
+
*以上周制作的项目网页为基础,增加左右排列的布局
*[[文件:范例.jpg]]
+
*要求:简约时尚,美观大方,酷毙帅呆
 
*代码保存为文件4.html,'''上传到你的码云'小组项目'中去'''([[“码云”的使用]])。
 
*代码保存为文件4.html,'''上传到你的码云'小组项目'中去'''([[“码云”的使用]])。
  
 
返回 [[网页设计与开发]]
 
返回 [[网页设计与开发]]

2017年10月20日 (五) 23:59的版本

任务一


任务二

  • 复习以下章节:
  • 想一想:下列盒子布局你能否实现:
  • W2-39.png W2-40.png W2-41.png
  • 以上周制作的项目网页为基础,增加左右排列的布局
  • 要求:简约时尚,美观大方,酷毙帅呆
  • 代码保存为文件4.html,上传到你的码云'小组项目'中去“码云”的使用)。

返回 网页设计与开发