11-10学院网站制作——新闻列表页设计（1）.docVIP

课程名称 WEB前端开发（1） 课次 39 任务、项目、课题名称 学院网站制作—新闻列表页设计（1） 课时 2学时 教学内容 创建主页，搭建主页结构，添加页面各元素 创建外部样式表，设置各元素的样式 教学目标 能够创建主页，搭建主页结构，添加页面各元素 能够创建外部样式表，设置各元素的样式 教学重点 创建主页，搭建主页结构，添加页面各元素 教学难点 创建外部样式表，设置各元素的样式 教学活动及主要环节 导入新课：（2分钟） 上节课给大家留下了制作学院官网首页的页脚部分这节课我们对新闻列表页进行制作。 新授： 左侧部分制作（25分钟） （带领同学们一起操作） 分析基本页面结构： 将主页index.html按快捷键ctrl+d复制一份，改名为：newsList.html，修改主体部分的代码如下所示。 !—main开始-- div class=main !--listL左侧内容开始-- div id=listL div class=Lnews h2新闻中心/h2 ul class=Lnewscont lia href=#学校要闻/a/li lia href=#系部动态/a/li lia href=#通知公告/a/li /ul /div div class=Lnotice h2通知公告spana href=# target=_blank更多/a/span/h2 ul class=Lcon lia href=# title=山东信息职业技术学院国家示范性软件职业技术学院实训中心建设项目申请报告编制项目的招标询价公告 target=_blank山东信息职业技术学院国.../aspan2018-11-29/span/li …… /ul /div /div !--左侧内容结束-- 添加css效果（35分钟） （带领同学一起操作） 设置CSS样式： #listL{ width:282px; float: left; overflow:hidden; margin-right:15px; } /*新闻中心*/ .Lnews{ width:280px; height:166px; background: #fff; border: 1px solid #ccc; margin-bottom:15px; } .Lnews h2 { width:240px; height:38px; line-height:38px; background:url(../images/head2.png) no-repeat; color: #fff; font-size: 14px; padding-left:40px; } .Lnewscont{ width:240px; height:110px; padding:10px 20px; } .Lnewscont li{ width:225px; height:30px; line-height:30px; background:url(../images/arror1.png) no-repeat left center; border-bottom: 1px dashed #666; padding-left:15px; } .Lnewscont li a:hover { font-weight:bold; } /*通知公告*/ .Lnotice{ background: #fff; float: left; width:260px; height:400px; border: 1px solid #ccc; padding:10px; margin-bottom:15px; } .Lnotice h2 { width:240px; height:36px; line-height:36px; background:url(../images/line.png) no-repeat left bottom ; color: #1a4aa7; font-size: 14px; padding-left:20px; position:relative; } .Lnotice h2 span{ position:absolute; right:0; top:0; font-weight:normal; } .Lnotice h2 span a{ co