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

任务7.3制作专题报道区域前端技术开发

任务引入一非遗资讯页面的原型图一行上呈现多个报道，形成多栏排版

任务描述制作资讯页面专题报道区域1.专题报道区域按一行显示3个专题项，每个专题项有图片和文字组成。2.该区域的右上角“查看更多”的超链接，出现的位置特殊需要使用定位方式，与所在区域形成相对位置不变的关系。

任务实施二3124将多个专题项包裹成一个层中。使用绝对定位方式设置“查看更多”超链接元素创建各个专题报道内容，包括图片、段落，层元素等设置每个专题报道的样式和排版层嵌套元素定位创建元素CSS样式与排版

任务实施二divclass=item imgsrc=../img/report-1.jpg pahref=#【文化和自然遗产日】…/a /p/div每个专题项HTML代码#report.item{ width:400px; float:left; background:#ccc; margin-right:50px;}每个专题项的CSS代码itemitemitem1.设置层的宽度2.设置浮动，一行显示三项3.设置层的右边距及背景色

任务实施二divid=report h1专题报道/h1 ahref=#id=more查看更多/a/div“查看更多”HTML代码#report{ position:relative;}#more{ position:absolute; top:20px; right:50px;}“查看更多”CSS代码1.“查看更多”使用绝对定位方式2.设置该超链接定位的基准点为其父元素“report”3.设置该元素的偏移量“查看更多”的位置特殊

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