Web全栈开发案例教程（AI辅助版）-实验大纲实验二 栏目框的制作.docxVIP

实验２栏目框的制作

实验目的：掌握浮动属性的运用，掌握清除浮动的方法，掌握使用flex布局制作可变宽度栏目框的方法。掌握制作栏目框的三种方法。掌握修改li元素列表图标的方法。

实验任务：完成如图A-2所示的栏目框网页。

图A-2栏目框

实验思考：当新闻标题文本行过长时如何自动省略并添加省略号？flex布局的栏目框是如何实现标题列可变宽度，日期列固定宽度的？

实验步骤：

1.用float布局实现栏目框，代码如下

style

ul{margin:0;padding:0;list-style:none;}

a{color:#666;text-decoration:none;}

.news{width:420px;margin-left:20px;}

.title{

height:40px;line-height:40px; /*设置标题栏高度并使内容垂直居中*/

border-bottom:2pxsolid#025483; }

.titleh2{height:40px;

float:left; /*标题左浮动*/

font-size:18px;color:#000;

margin:0; /*去掉h2标记的默认上下边界*/ }

.title.more{

flo