网页设计师面试题与答案1
今天有个学生发了一个公司的面试题，发给大家思考一下。
文件夹中有两个文件如下：
图片文件squares.png显示如下
文件assignment3.html的源码如下：
<html> <!-- Problem 1: Using the image provided (squares.png). Display the 90x90 square images (A0,A1,B0,B1) in the html links below. Write the css styles for squareA and squareB, along with their hover states A1, B1. SquareA by default should be a link with the 90x90 square A0 displayed, and when hovered over show the square A1. Similarly for B as well, B0 to B1. Please do not use any image cropping tool to crop the image, use only css for implementation for problem 1. Please also consider any cross browser issues. --> <style>h1 {font-size:14px;}</style> <body> <h1>Problem 1</h1> <a href="#" class="squareA"></a> <br/> <a href="#" class="squareB"></a>
<!-- Problem 2: Using similar techniques used in problem 1.
Write a simple javascript carousel (no animation needed, but feel free to use any js library) where each div (class square) inside the view_area is a 90x90 square, and each class 'square A0', 'square A1', 'square B0', 'square B1' correspond to their 90x90 image in the squares.png image.
Three squares will be viewable, positioned left to right, in the view_area at any given time.
When the page is first loaded:
The starting position is A0, A1, B0. Only those 3 squares are displayed.
When a user clicks on the right arrow, B1, A0, A1, are displayed, B0 is not viewable. When a user clicks on the left arrow B1, A0, A1 goes back to the starting position (A0, A1, B0). Click left arrow again, the display is now A1, B0, B1.
Basically we want the 4 images to rotate, with only 3 of them viewable at any given time.
Below are some styles to get you started. Please write the necessary javascript/html/css for problem.
--> <style> .wrapper { border:1px solid black; width:370px; height:90px; } .go_left, .go_right, .view_area { float:left; width:50px; height:90px; text-align:center; }
.view_area { width:270px; overflow:hidden; height:90px; }
</style> <h1>Problem 2</h1> <div class="wrapper"> <div class="go_left"> << </div> <div class="view_area"> <div class="square A0"></div> <div class="square A1"></div> <div class="square B0"></div> <div class="square B1"></div> </div> <div class="go_right"> >> </div> </div> <!-- end problem 2 -->
<!-- Problem 3: This exercise is to simulate an animated gif with png.
Use javascript to animate the set of 6 squares (c0,c1,c2,c3,c4,c5), each square is like a frame in a movie, the animation will loop indefinitely. Provide the functions to start and stop the animation. Note: Consider performance issues in your implementation. Please do not animate the carousel in problem 2, the animation of the 80px x 80px should go into problem 3 div below -->
<style> .wrapper.small { width:84px; height:84px; text-align:center; } #problem3{ width:80px; height:80px; }
</style>
<h1>Problem 3</h1> <div class="wrapper small"> <div id="problem3">
</div> </div> <button onclick="">Start animation</button> <button onclick="">Stop animation</button>
</body> </html>