Each weekend to play one day tired, we'll do two interview questions. (it is sai

Preface

My CSS has been a short board, the reason is a few years ago on CSS do not pay attention to, now pay attention to the project experience is inadequate, so I spent a lot of time on this, read a book, do something, hope to improve the level of CSS in several projects!

Finished, I recently thought about their own CSS is short board, then the JS is suit? They find themselves in front of levels do not seem very high, then began to take old road to self up, so this time we want to do something to do the project, or on the Internet to make several interview questions to dry, the personal development is very good.

Before I have a period of time a bit confused, and can not find the direction and method of study, but in an interview in the process from the new obtained the power of attention, so we do not underestimate the impact of interview questions, interview question is a very good way to help designers improve! I don't CSS is short board, good it on two CSS interview questions.

Get down to business

The use of HTML+CSS to achieve such as layout, border-widht 5px, a grid size is 50*50, hover frame into the red (compatible with IE6+, considering the structure of semantic).


The use of a label and a pure CSS <a href= "title=" # "subscribe" > < /a> Subscribe; realization of figure, words always keep left 10px, down from 5px, change the font size (12px-50px), margins remain unchanged, do not use content: "subscribe", compatibility modern browsers

As the saying goes, there are pictures and the truth, two questions are out, we come to have a look.

A topic

To see the beginning of a topic, the first impression is small is very simple, but really simple is not to say, a simple estimate will not really out of the bar, I estimate a hole.

The first preview.:

This is a standard Sudoku, here I can shame on you try using table.:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style>
 6         * { margin: 0; padding: 0; }
 7         #test01 td { border: 5px solid blue; width: 50px; height: 50px; text-align: center; }
 8     </style>
 9 </head>
10 <body>
11     <h1>
12         The ugly table</h1>
13     <table id="test01">
14         <tr>
15             <td>
16                 1
17             </td>
18             <td>
19                 2
20             </td>
21             <td>
22                 3
23             </td>
24         </tr>
25         <tr>
26             <td>
27                 4
28             </td>
29             <td>
30                 5
31             </td>
32             <td>
33                 6
34             </td>
35         </tr>
36         <tr>
37             <td>
38                 7
39             </td>
40             <td>
41                 8
42             </td>
43             <td>
44                 9
45             </td>
46         </tr>
47     </table>
48     <hr />
49 </body>
50 </html>

The ugly table

PS: I call it the ugly table, actually table is not ugly, I'm ugly, take this question you, finally actually using table realize it is no problem, we are talking about a thing should not separate the heart, for example, a few years ago, we used the percentage of layout, someone will say you are wrong, now??? Great design may re occupation of the market, table may also gigantic loser Gundam.

Preliminary do it just like this, we found that there is a gap between the tables, so we need to first remove the gap first:

cellpadding="0" cellspacing="0"

This is my first time to approach, but this may not be what I want solutions, and finally found this Dongdong:

border-collapse:collapse;

Well, this is what I want,

The frame border-collapse attribute set the table will be combined into a single frame, or as in the standard HTML as a separate display

separate
 
The default value. The frame will be separated. Don't ignore the border-spacing and empty-cells properties. 
 
collapse
 
If possible, the frame will be combined into a single frame. The border-spacing and empty-cells properties will be ignored. 
 
inherit
 
The rules should be inherited from the parent element of the border-collapse attribute. 

So we'll change the code, we get this stuff:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style>
 6         * { margin: 0; padding: 0; }
 7         #test01 { border-collapse:collapse;}
 8         #test01 td { border: 5px solid blue; width: 50px; height: 50px; text-align: center;  }
 9         #test01 td:hover { border-color: Red;}
10         
11     </style>
12 </head>
13 <body>
14     <h1>
15         The ugly table</h1>
16     <table id="test01">
17         <tr>
18             <td>
19                 1
20             </td>
21             <td>
22                 2
23             </td>
24             <td>
25                 3
26             </td>
27         </tr>
28         <tr>
29             <td>
30                 4
31             </td>
32             <td>
33                 5
34             </td>
35             <td>
36                 6
37             </td>
38         </tr>
39         <tr>
40             <td>
41                 7
42             </td>
43             <td>
44                 8
45             </td>
46             <td>
47                 9
48             </td>
49         </tr>
50     </table>
51     <hr />
52 </body>
53 </html>

In any case, this is not what I want, and he is not compatible with IE6, so I think the absolute positioning, so we try to absolute positioning.:

#test02 { position: relative; }
#test02 a { border: 5px solid blue; width: 50px; height: 50px; text-align: center; display: block; position: absolute; }

I wanted to take the a tag is set to inline-block, but IE6 does not seem to support the support, is it right? I really do not know, I can't see it on the computer. . . .

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style>
 6         * { margin: 0; padding: 0; }
 7         #test01 { border-collapse: collapse; }
 8         #test01 td { border: 5px solid blue; width: 50px; height: 50px; text-align: center; }
 9         #test01 td:hover { border-color: Red; }
10         
11         #test02 { position: relative; z-index: 1; }
12         #test02 a { border: 5px solid blue; width: 50px; height: 50px; _width: 60px; _height: 60px; text-align: center; display: block; position: absolute; z-index: 2; }
13         #test02 a:hover { border-color: Red; z-index: 3; }
14     </style>
15     <!--<script src="../jquery-1.7.1.js" type="text/javascript"></script>
16     <script type="text/javascript">
17         $(document).ready(function () {
18             var tb = $('#test02');
19             for (var i = 1; i <10; i++) {
20                 var c = parseInt((i - 1) / 3);
21                 var t = c * 50;
22                 var ll = i % 3 == 0 ? 3 : i % 3;
23                 l = (ll - 1) * 50;
24                 if (l != 0) {
25                     l += 5 * (ll - 1);
26                 }
27                 if (t != 0) {
28                     t += 5 * c;
29                 }
30                 var tmp = $('<a href="javascript:;" style="left:' + l + 'px; top: ' + t + 'px">' + i + '</a>');
31                 tb.append(tmp);
32             }
33         });
34     </script>-->
35 </head>
36 <body>
37     <h1>
38         The ugly table</h1>
39     <table id="test01">
40         <tr>
41             <td>
42                 1
43             </td>
44             <td>
45                 2
46             </td>
47             <td>
48                 3
49             </td>
50         </tr>
51         <tr>
52             <td>
53                 4
54             </td>
55             <td>
56                 5
57             </td>
58             <td>
59                 6
60             </td>
61         </tr>
62         <tr>
63             <td>
64                 7
65             </td>
66             <td>
67                 8
68             </td>
69             <td>
70                 9
71             </td>
72         </tr>
73     </table>
74     <hr />
75     <h1>
76         Absolute positioning of a</h1>
77     <div id="test02">
78         <a style="left: 0px; top: 0px" href="javascript:;">1</a><a style="left: 55px; top: 0px"
79             href="javascript:;">2</a><a style="left: 110px; top: 0px" href="javascript:;">3</a><a
80                 style="left: 0px; top: 55px" href="javascript:;">4</a><a style="left: 55px; top: 55px"
81                     href="javascript:;">5</a><a style="left: 110px; top: 55px" href="javascript:;">6</a><a
82                         style="left: 0px; top: 110px" href="javascript:;">7</a><a style="left: 55px; top: 110px"
83                             href="javascript:;">8</a><a style="left: 110px; top: 110px" href="javascript:;">9</a></div>
84     <hr />
85 </body>
86 </html>

Then we realized the function, because the error below in the IE6 CSS box model analysis, so it was a little hack, now we'll have a look this question I do what is insufficient.

Look at the code friends might notice, I actually use js to generate HTML code, JS code will not need to read, without thinking, but each will have style elements.

I don't know what God is doing, but this is what I can think of, as for the problem really want what, I also don't know.... Unknown Jue Li!

Once again a preview.:


Then, we go on to the next topic.

Second questions

First, attach the preview.:

To tell you the truth, looking at the second question, I looked for a long time on one of these words is not understood in modern browsers, “ ” modern browser here refers to the IE9+ browser it? ? ?

But up to now, if you don't use HTML5 and CSS3 things with pure HTML, I'm afraid I can't, so we have a look at him this title

The mouse above, the words change slowly, but seems to have only one a tag <a href= "title=" # "subscribe" > /a>, subscribe to the blog <below the red line should be the other.?

But for CSS3, this problem is not difficult, but is the pit? We come to have a look:

PS: The text in detail the is a a tag, so there should be a label only.

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style>
 6         * { margin: 0; padding: 0; }
 7         a { display: block; border-bottom: 4px solid red; text-decoration: none; color: Gray; font-size: 12px; 

transition: font-size 1s; padding: 0 0 5px 10px; } 8 a:hover { font-size: 50px; } 9 </style> 10 </head> 11 <body> 12 <a href="#" title="Subscribe to the blog "> subscribe to blogs</a> 13 </body> 14 </html>

So I feel to be rather baffling is finished.... Also don't know right. . .

Conclusion

Before we project manager said, nothing out of an interview, will be growing, I am here to become nothing to do two interview questions are good, ha ha, hoped that the two question can give you the fun.

If you feel good, you help yo

Posted by Adolph at November 15, 2013 - 1:11 PM