HTML & CSS
:
<html>
<head>
<title> </title>
<style type="text/css">
div#block {width:600px; margin:0 auto; background-color:#dddddd}
div.header {width:600px; height:100px; background-color:#717dc9}
div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9}
div.right_col {width:450px; float:left}
div.footer {width:600px; height:70px; background-color:#717dc9; clear:both}
</style>
</head>
<body>
<div id="block">
<div class="header"><h1 align="center"> </h1></div>
<div class="left_col"><p align="center"></p></div>
<div class="right_col">
<h2 align="center">CSS </h2>
<h4 align="center"> </h4>
</div>
<div class="footer"><p> 2010</p></div>
</div>
</body>
</html>
: CSS
background-color: .
margin:0 auto .
width: .
height: .
float:left .
border-right: .
clear:both .
, - . margin. , margin-bottom:-15px ( ).
HTML & CSS
:
<html>
<head>
<title> </title>
<style type="text/css">
div#block {width:750px; margin:0 auto; background-color:#dddddd}
div.header {width:750px; height:100px; background-color:#717dc9}
div.left_col {width:148px; height:350px; float:left; border-right:2px dashed #717dc9; margin-bottom:-15px}
div.center_col {width:450px; float:left}
div.right_col {width:148px; height:350px; float:left; border-left:2px dashed #717dc9; margin-bottom:-15px}
div.footer {width:750px; height:70px; background-color:#717dc9; clear:both}
</style>
</head>
<body>
<div id="block">
<div class="header"><h1 align="center"> </h1></div>
<div class="left_col"><p align="center"></p></div>
<div class="center_col">
<h2 align="center">CSS </h2>
<h4 align="center"> </h4>
</div>
<div class="right_col"><p align="center"></p></div>
<div class="footer"><p> 2010</p></div>
</div>
</body>
</html>
|
|
|
: CSS
. . margin, padding, float, clear.
, float , , , web- .
HTML & CSS
:
<html>
<head>
<title> </title>
<style type="text/css">
div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}
div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left}
div.right_col {background-color:#dddddd; height:400px; min-width:380px; max-width:3800px;margin-left:200px; padding-left:20px}
</style>
</head>
<body>
<div class="header"><h1 align="center"> </h1></div>
<div class="left_col"><p align="center"></p></div>
<div class="right_col">
<h2>CSS </h2>
<h4> </h4>
</div>
</body>
</html>
: CSS
, ⇒ div.right_col margin-top:-20px.
: HTML & CSS
padding-left: .
margin-top: .
margin-left: .
min-width: .
max-width: .
float:left , . , margin-left:200px , . , min-width max-width.
padding, , .
+ HTML & CSS
CSS :
<html>
<head>
<title> CSS </title>
<style type="text/css">
div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}
div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left; padding:10px}
div.right_col {background-color:#dddddd; width:500px; height:400px; float:left; padding:10px; }
div.footer {background-color:#717dc9; min-width:600px; max-width:4000px; height:60px; clear:left}
</style>
</head>
<body>
<div class="header"><h1 align="center"> </h1></div>
<div class="left_col"><p align="center"></p></div>
<div class="right_col">
<h2>CSS </h2>
<h4> </h4>
</div>
<div class="footer"><p> 2010</p></div>
</body>
</html>
|
|
|
: + CSS
<div id="block"></div>. margin:0 auto. margin-bottom:-16px.
<html>
<head>
<title> CSS </title>
<style type="text/css">
#block {width:740px; height:420px; margin:0 auto; margin-bottom:-16px}
div.header {background-color:#717dc9; min-width:600px; max-width:4000px; height:100px}
div.left_col {background-color:#dddddd; border-right:2px dashed #717dc9; width:198px; height:400px; float:left; padding:10px}
div.right_col {background-color:#dddddd; width:500px; height:400px; float:left; padding:10px; }
div.footer {background-color:#717dc9; min-width:600px; max-width:4000px; height:60px; clear:left}
</style>
</head>
<body>
<div class="header"><h1 align="center"> </h1></div>
<div id="block">
<div class="left_col"><p align="center"></p></div>
<div class="right_col">
<h2>CSS </h2>
<h4> </h4>
</div>
</div>
<div class="footer"><p> 2010</p></div>
</body>
</html>
: + CSS
padding:10px 10 , <div id="block"></div> 420 , 16 .
