guagua </p> <p> body {/* padding:0; margin : 0;*/} </p> <p> #head {</p> <p>/* Margin: 0; Height: 99px; </p> <p> Background-Image: URL ("Images/Guagua_01.jpg" ); </p> <p> background-repeat:no-repeat; </p> <p>background-position:center center; margin from the left, margin from the top </p> <p> */</p> <p> /*background:url("images/guagua_01.jpg") left bottom no-repeat; Another way of writing*/ </p> <p> /*background-color:#F00; Red</p> <p> float:left; </p> <p>*/ </p> <p> } </p> <p>div > border :1px solid #ccc; width:50px; height:50px; </p> <p> */ </p> <p> }</p> <p> #container </p> <p> { </p> <p> width:560px; </p> <p>padding:5px; </p> <p> margin:0 auto;/* Centered (a very common function), but it must be used in conjunction with the two statements above the Html tag, and like < ;Center>This function is rarely used anymore*/ >{ width:100px; height:100px; border:1px solid #ccc; } </p> <p>#left { float:left; width:400px; } </p> > #right { float:right; } <p> </p>.clear{clear:both;} /* Because of the floating relationship, it needs to be added, otherwise other DIVs will be separated from the Container DIV. All websites are solved in this way. */. <p> </p>< /style> <p> </p></head> <p> </p><body> <p> </p><!-- <p> </p><div id="head"> ; Head </div> <p> </p> <div> Navigation bar </div> --><p> </p> <div id="container"> <p> </p><div id="left"> Left side </div><p> </p> <div id="right"> Right side </div><p> </p> <div class="clear"> </div> <p> </p></div> > <p></p>
