《网页制作》实训项目卡十二.docVIP

《网页制作》实训项目卡十二 项目名称 项目二：温州广厦地产网站 学时 课内2学时　课外4学时 任务三 温州广厦网站首页制作 任务目标 掌握DIV＋CSS盒子模型布局网页原理。 掌握DIV＋CSS能够网页进行布局。 利用DIV+CSS布局温州广厦首页。 深入利用DIV+CSS制作页面内容。 一、任务内容： DIV+CSS布局温州广厦首页制作。网页中的文本内容见最后附：相关素材自行下载 二、任务要求 利用DIV+CSS完成页面布局。 利用各种标签（盒子）在DIV中进行内容布局。并对CSS样式进行设置。 网页中的所有样式设置均在basic.css样式文件中保留。 三、实施步骤 打开WenZhouEstate站点,打开index.html网页，打开basic.css样式文件。 参看下面首页样张完成制作。Header区域中的动画先不要添加，暂时留空，最后完成这个制作。 在nav盒子中利用ulli添加如样张所示链接文本，并建立对应的网页，设置正确链接页面。下面是页面名称 对nav及nav中的链接进行样式设置。 设置nav背景如图所示背景。设置ul，并取消ul前面的小点显示 height:51px;//高度 line-height:51px;//行高 设置li： text-align:center;//文本居中 height:51px;//高度 width:124px;//宽度 background:url(../images/linkr.gif) no-repeat right center;//背景 float:left;//浮动 将最后一个li添加类别样式进行宽度重置 width:123px; background:none; 设置链接正常样式如下： display: block;//块级盒子显示 width:124px;　　//宽度 height:51px;//高度 color:#fff;//文本颜色 text-decoration:none;//无下划线 重置最后一个链接的宽度 #nav ul li.end a width:123px; 设置链接活动状态时的样式如下 font-size:14px;//字体放大 font-weight:bold;//加粗字体 color:yellow;//变成黄色 text-decoration:underline;//取消下划线 对网页中的添加相应的内容，利用下面所提供的参考样式进行设置 #sidebar { width:251px; height:490px; background:#fff url(../images/weline.gif) no-repeat right 54%; float:left; } #sidebar h1 { background:url(../images/wel.gif) no-repeat; width:123px; height:35px; font-size:100%; text-indent:-9999px; margin-top:20px; margin-left:20px; } #sidebar img { display:block; margin-left:16px; } #sidebar ul { padding-top:10px; line-height:180%; text-indent:20px; } #sidebar ul li a { display:inline-block; width:65px; height:11px; background:url(../images/more.gif) no-repeat left center; } #sidebar ul li.line { border-bottom:1px solid #999; margin-left:20px; margin-right:50px; margin-bottom:5px; height:10px; } #news { width:313px; height:300px; background:#fff; float:left; } #news h1 { background:url(../images/news.gif) no-repeat; width:123px; height:27px; font-size:100%; text-indent:-9999px; margin-top:20px; margin-left:20px; } #news ul { line-height:160%; margin-top:10px