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

课程名称 WEB前端开发（1） 课次 40 任务、项目、课题名称 学院网站制作—新闻列表页设计（2） 课时 2学时 教学内容 创建主页，搭建主页结构，添加页面各元素 创建外部样式表，设置各元素的样式 教学目标 能够创建主页，搭建主页结构，添加页面各元素 能够创建外部样式表，设置各元素的样式 教学重点 创建主页，搭建主页结构，添加页面各元素 教学难点 创建外部样式表，设置各元素的样式 教学活动及主要环节 导入新课：（2分钟） 上节课给大家留下了制作学院官网首页的页脚部分这节课我们对新闻列表页进行制作。 新授： 右侧部分制作（25分钟） （带领同学们一起操作） 分析基本页面结构： div id=listR div class=Rtop h2新闻中心/h2 span当前位置：a href=index1.html首页/a a target=_blank href=#新闻中心/a 列表/span /div div class=Rcon ul lispan class=date2018-09-02/span a href=newsDetail.html title=我院被确定为空军士官人才培养定点院校 target=_blank我院被确定为空军士官人才培养定点院校/a /li …… /ul /div br div共30条记录 1/2页 nbsp;a href=#首页/a a href=#上一页/anbsp;a href=#下一页/a a href=#尾页/a nbsp;第 select option value=1 selected=selected1/option option value=2 2/option /select页 /div /div 添加css效果（35分钟） （带领同学一起操作） 设置CSS样式： #listR{ width:858px; border:1px solid #ccc; background:#FFF; float:right; padding:10px 20px; overflow:hidden; margin-bottom:20px; } .Rtop{ width:858px; height:30px; line-height:30px; } .Rtop h2{ width:75px; height: 30px; text-align: center; border-bottom:2px solid rgb(2,81,178); font-size:14px; color:#1a4aa7; float:left; } .Rtop span{ display:inline-block; width:783px; height: 31px; border-bottom:1px solid #999; font-size:14px; float:left; } .Rtop span a{ color:#000; } /*右边列表内容*/ .Rcon{ width:858px; min-height: 600px; } .Rcon ul li { width:843px; height:34px; line-height:34px; background:url(../images/icon.png) no-repeat left center; padding-left:15px; border-bottom:1px dashed #999; float:left; } .Rcon ul li .date{ float:right; } .Rcon ul li a { color: #3c3c3c; } .Rcon ul li a:hover { color:#00F; } 总结：（2分钟） 制作网页时按照从整体到部分，从上到下，从左到右的顺序制作 作业： 完成主页的新闻页主体部分结构以及样式设置。