《使用HTML+CSS开发商业站点》内部测试机试题

古城微笑少年丶 2022-12-05 00:47 125阅读 0赞

<table style="margin-left:-3.6pt;width:612px;"> 
 <tbody> 
 <tr> 
 <td colspan="2" style="vertical-align:top;width:459pt;"> 《使用HTML+CSS开发商业站点》内部测试机试题 &nbsp; </td> 
 </tr> 
 <tr> 
 <td colspan="2" style="vertical-align:top;width:459pt;"> 一、语言和环境 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:34.9pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:424.1pt;"> A、实现语言 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:34.9pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:424.1pt;"> &nbsp; HMTL、CSS </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:34.9pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:424.1pt;"> B、环境要求 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:34.9pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:424.1pt;"> &nbsp; WebStorm 10.0.3、Chrome、PhotoShop </td> 
 </tr> 
 <tr> 
 <td colspan="2" style="vertical-align:top;width:459pt;"> 二、功能要求 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:34.9pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:424.1pt;"> 本次测试卷由下面4个机试题目组成。 注：题目中的颜色和边距使用PS自行测量即可； &nbsp; 
 <ol> 
 <li>编写代码实现优酷电影播放列表，如下图所示效果</li> 
 </ol>&nbsp; &nbsp; 
 <ol> 
 <li>（1）编写代码实现唯品会导航，如下图所示效果</li> 
 </ol>（2）写出为父级添加 clearfix 伪类来清除浮动的代码 &nbsp; &nbsp; &nbsp; 
 <ol> 
 <li>编写代码实现京东轮播图布局，如下图所示效果</li> 
 </ol>&nbsp; &nbsp; 
 <ol> 
 <li>编写代码实现小米产品展示，如下图所示效果</li> 
 </ol>&nbsp; &nbsp; </td> 
 </tr> 
 <tr> 
 <td colspan="2" style="vertical-align:top;width:459pt;"> &nbsp; 
 <ul> 
 <li>具体要求及推荐实现步骤</li> 
 </ul></td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:34.9pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:424.1pt;"> 
 <ol> 
 <li>需求说明。</li> 
 </ol>1）不能使用浮动实现 2）鼠标经过每个列表项时，列表项显示阴影效果 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:34.9pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:424.1pt;"> 
 <ol> 
 <li>需求说明。</li> 
 </ol>1）使用浮动实现 2）使用伪类清除浮动 
 <ol> 
 <li>需求说明。</li> 
 </ol>1）左右指示符初始状态隐藏，鼠标移上图片之后，左右指示符显示 
 <ol> 
 <li>需求说明。</li> 
 </ol>1） 当鼠标移动上每个产品时，完成如图第三个产品的效果，整个产品添加一个阴影并且在y轴方向上移动2px，这个动画的是不延迟，经过0.2s，以匀速的方式过渡完成 &nbsp; 2）当鼠标移动到每个产品上时，当前产品的图片会发生放大效果，大小为原来图片的1.2倍，这个动画的是不延迟，经过0.4s，以匀速的方式过渡完成 &nbsp; </td> 
 </tr> 
 <tr> 
 <td colspan="2" style="vertical-align:top;width:459pt;"> 四、注意事项 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:34.9pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:424.1pt;"> 1、 请注意代码格式规范，缩进符合要求 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:34.9pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:424.1pt;"> 2、 请注意命名符合规范，主要代码必须有注释 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:34.9pt;"> &nbsp; </td> 
 <td style="vertical-align:top;width:424.1pt;"> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>