-page Layout instance ——— win7 own small abacus

Night 7 layout, 9:30, just got it.

He found that he was very efficient when he focused on Kazakhstan. Calculator before layout. Made two simple page layouts to practice practiced hand. The overall feeling is better tonight, not difficult.

Between debugging a bit of egg pain, really don't want to talk to ie.

Before you make the layout. I first put Win7 's calculator in the overall cut measured a bit, and then understand the approximate size. Then you draw a sketch (for example, the following). It's so ugly that I can't bear to see. I do not think it is like my style, it is too ugly. This way, for the overall grasp has played a very good role, at least the heart knows how to do.

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvd3pxbmxz/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70 /gravity/southeast ">

Define a good box first. Get the overall framework out. And then fix it in one.

Because FF and IE have different compatibility, some places need to be debugged.

In this instance. is the calculator the position of the three words need to adjust, used the method is not by common!important, we look at the clear.

Another problem is when you're laying out the keyboard. There are very many ways to lay out in detail. However, to improve the reusability of code, a class selector is defined. Cover all the keyboards with a box and note the gaps between the keyboards.

There are also two big buttons to make the appropriate adjustments.

The last note is that when you leave the text stream, you should also pay attention to the margin. That FF's firebug really is a good debugging tool. It's better to use it to find the problem. Listen to some friends said, the block right floating when IE will be a bug, I have met several times before, but this time basically no problem.

Not much to say, put the code directly up. I'll be a souvenir as well. For the novice to be a reference, but also only to be a participant, because when others do not guarantee that all pixels are the same.

HTML code:

CSS code:
#container {position:absolute;top:50%;left:50%;margin: -161px-114px;width:228px;height:322px;border:1px black Solid;background: #e6e6fa;} #title {width:100%;height:30px;background: #e6e6fa;} #image {float:left;width:14px;height:17px;margin-top:6px;margin-left:10px;background:url (image/image.png);} #word {margin-top:-8px!important;/* order do not make a mistake */margin-top:7px;/*< calculator > location debugging */margin-left:-4px;float:left; width:60px;height:20px;} #word P{font-size:14px;text-align:center;} #select {float:right;width:107px;height:20px;margin-right:8px;} #min {float:left;width:30px;height:20px;background:url (image/min.png);} #max {float:left;width:30px;height:20px;background:url (image/max.png);} #off {float:right;width:47px;height:20px;background:url (image/off.png);} #main {Width:212px;height:284px;margin-left:8px;overflow:hidden;} #menu {float:left;width:212px;height:20px;background: #dcdcdc; border:1px solid #dcdcdf;} #menu p{float:left;font-size:15px;margin-top:1px;margin-left:5px;}. block{float:left;width:15px;height:20px;} #Frame{float:left;width:190px;height:48px;margin-top:10px;margin-left:11px;background:url (image/frame.jpg);} #button {float:left;width:190px;height:180px;margin-left:11px;}. Smallbutton{float:left;width:34px;height:25px;margin-top:5px;background: #dcdcdc;}. Bigbuttony{float:right;width:34px;height:55px;background: #dcdcdc; margin-top:5px;}. Bigbuttonx{float:left;width:73px;height:25px;background: #dcdcdc; margin-top:5px;}. buttonblock{float:left;width:5px;height:25px;} #button p{text-align:center;margin-top:3px;}

English level is really limited, the definition of the style when the word thought that the use of that, English still need to work.
Finally put two FF and IE implementation diagram, basically the same, although not good-looking. But not too ugly, mainly that color really do not know how to tune to and Win7 with the same calculator.
Ff:
Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvd3pxbmxz/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70 /gravity/southeast ">
Ie:


-page Layout instance ——— win7 own small abacus