Web前端开发技术项目教程课件 7.2任务引入 制作资讯推介区域.pptx

项目7非遗资讯页面信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》页面布局

任务7.2制作资讯推介区域前端技术开发

任务引入一非遗资讯页面的原型图本任务制作资讯推介区域，图文排版

任务描述制作资讯推介区域1.资讯推介区域的布局呈现图片在左，文字在右的排版风格。2.右侧文本由标题和多个段落元素组成，显示上下排版。3.设置网页元素的背景样式、文字样式、填充和边距等。

任务实施二3124设置元素浮动，形成图文左右排版文字样式、背景样式、边距等创建图片、标题、段落，并按照结构放置在各个层中调整浮动元素所在父元素的高度图文排版其他样式设置创建网页元素消除浮动副作用

任务实施二资讯推介区域HTML代码divid=news h1资讯推介/h1divid=newscontent imgsrc=../img/news_1.png divid=newsright h3古琴艺术入选…/h3 p11月28日，由中国艺术研究院音乐… /p p本次会议的成功举办…/p /div /div /div1.插入图片2.创建右侧的文字元素，包裹为一个层元素3.将图片和文字包裹为一个整体

任务实施二资讯推介区域CSS代码#news{ margin:0auto; width:1300px; margin-top:60px;}#newsright{ padding:40px50px; width:600px; height:320px;}#newsimg,#newsright{ float:left;}#newscontent::after{ content:; display:block; clear:both;}1.设置图片、右侧层向左浮动，并控制右侧层的大小2.消除设置了浮动后产生的副作用3.设置整体区域宽度，居中显示

任务实施二资讯推介区域CSS代码#newsright{ background:url(../img/bg.jpg)no-repeat; background-size:cover; color:#fff; font:18px/1.5微软雅黑;}2.设置右侧层的背景图片1.文字样式

感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》