2 Days to harness div+css! First lesson

Source: Internet
Author: User
Tags add
When you finish the tutorial, you will certainly say XHTML+CSS is so simple! easy!

1 width and height are 200 pixels;
2) The color is red #900;
Do it yourself and see if you can make it? Do not look at my code, if really do not come out, download down, followed by my next step-by-step changes.
Here's My Code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Example 1</title>
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>

<div id= "Redblock" ></div>

/* CSS Document * *
#redBlock {
Background: #900;
The effects shown in IE6 and FF are as follows:

How, easier it ~, but you have not found that the red area from the top of the browser and the left side of the margin IE6 and FF are not the same, have you found? In this way, we made the page browser is not compatible, the effect is not the same? Why is that?
This is because each browser has a built-in CSS file, when you do not have a label on the property settings, the browser will apply the built-in CSS file, how to achieve browser compatibility? No hurry, you only need in the CSS file, will we currently apply to the tag body and Div 0 on OK, code so write
body,div{padding:0; margin:0;}
When you add this sentence, is not the two browser to show the same effect of the bar ~ the following figure

All right, let's move on, we're going to add one more condition.
Allow the red area to be 20 pixels from the top and left of the browser;
How, there is no train of thought? No idea okay, keep looking down
We just need to set the outer margin of the Red Square to add the following CSS code:
The effect of the following figure

This causes the red area to be positioned at page coordinates (20,20), with 20 pixels to the top and left margins of the browser.
But the above wording can be simplified as
margin:20px 0 0 20px;
The numerical order is: upper right and lower left.
and margin:20px 0 and margin:20px 0 20px 0; is equivalent yo ~ just more streamlined, so write CSS load faster.
We then extend the problem, how to make the red area horizontally positioned in the middle of the browser, regardless of the size of the browser window, the size of the display resolution.
Also very simple, just add the two words "margin-top:20px;margin-left:20px;" Amended to
margin:0 Auto;
How, interesting, the red area is located in the middle of the browser ~

Good ~!. Is it easy or simple to end the first class here!!! Kwoojan can guarantee that the following course is very simple, when you read the tutorial, will certainly say XHTML+CSS is so simple! easy!
If you do not understand, hurriedly click on the top of the course keyword, as long as you read these keywords, I believe you can definitely understand!
This article comes from www.cssxuexi.cn* respect others Labor achievement, reprint please consciously indicate the source!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.