-- 作者:admin
-- 发布时间:2010/12/9 16:44:38
-- [推荐]第八部分课堂讲稿——CSS样式与网页布局
1、基本使用 1、1 三种定义CSS的方法 mystyle.css文件为: body { background: #666666; }
#div1 { background: #FFF55F; }
.div2 { background: #F4455F; }
index.html文件为: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c /> <title>无标题文档</title></head> <link rel="stylesheet" href="mystyle.css" type="text/css" /> <body> <div id="div1">Hello!</div> <div class="div2">Hello!</div> </body> </html>
也可以合二为一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c /> <title>无标题文档</title></head> <style type="text/css"> body { background: #666666; }
#div1 { background: #FFF55F; }
.div2 { background: #F4455F; } </style> <body> <div id="div1">Hello!</div> <div class="div2">Hello!</div> </body> </html>
甚至可以和标签合并: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c /> <title>无标题文档</title></head> <body style="background: #666666;"> <div id="div1" style="background: #FFF55F;">Hello!</div> <div class="div2" style="background: #F4455F;">Hello!</div> </body> </html>
更为复杂的样式: index.html文件为: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c /> <title>无标题文档</title></head> <link rel="stylesheet" href="mystyle.css" type="text/css" /> <body> <div id="div1">Hello!</div> </body> </html>
mystyle.css文件为: #div1 { float:right; background-color:#00FF33; margin-top:100px; margin-right:20px; margin-bottom:10px; text-align:center; line-height:200%; width:50%; }
body { background: #666666; }
可以利用validator.w3.org验证代码是否严格遵守XHTML
1、2 表格排版 <table width="100%" border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCCC"> <tr> <td height="100" colspan="2"> </td> </tr> <tr> <td width="200" height="400"> </td> <td valign="top"><table width="100%" border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCCC"> <tr> <td width="100" height="120"></td> <td> </td> </tr> </table> <table width="100%" border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCCC"> <tr> <td height="85"> </td> </tr> <tr> <td height="85"> </td> </tr> <tr> <td height="85"> </td> </tr> </table></td> </tr> </table>
注意 1) cellpadding:单元格内文字与四周单元格边框之间的间距 cellspacing:单元格之间的彼此间距 2)自动排版使用“命令”——“应用源格式”
2、网页布局 2、1 居中 1)使用auto边距 index.html文件为: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c /> <title>无标题文档</title></head> <link rel="stylesheet" href="mystyle.css" type="text/css" /> <body> <div id="div1"> <p>Hello!</p> </div> </body> </html>
mystyle.css文件为: #div1 { background-color:#00FF33; height:300px; width:50%; margin:auto; }
body { background: #666666; }
2)使用负数浮动设置方式 #div1 { background-color:#00FF33; height:300px; width:50%; position:relative; left:50%; margin-left:-25%; }
body { background: #666666; }
2、2 两列基于浮动的网页布局 index.html文件为: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c /> <title>无标题文档</title></head> <link rel="stylesheet" href="mystyle.css" type="text/css" /> <body> <div id="box"> <div id="banner"></div> <div id="left"></div> <div id="main"></div> <div id="bottom"></div> </div> </body> </html>
mystyle.css文件为: #box { background-color:#00FF33; height:700px; width:75%; margin:0 auto; text-align:left; padding:10px; }
#banner { background-color:#CCFF33; height:100px; border:solid 1px #FF0000; }
#left { background-color:#CCAAAA; width:25%; float:left; height:500px; border:solid 1px #0000FF; margin-top:10px; }
#main { background-color:#CCA12A; width:70%; float:right; height:500px; border:solid 1px #0000FF; margin-top:10px; }
#bottom { clear:both; background-color:#23A12A; height:10px; border:solid 1px #0000FF; margin-top:10px; }
body { background: #666666; }
注意;clear:both是消除两旁的float对象,确保另起一行
2、3 三列基于浮动的网页布局 index.html文件为: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c /> <title>无标题文档</title> </head> <link rel="stylesheet" href="mystyle.css" type="text/css" /> <body> <div id="box"> <div id="banner"></div> <div id="left"></div> <div id="main"> <div id="left-main"></div> <div id="right-main"></div> </div> <div id="bottom"></div> </div> </body> </html>
增加mystyle.css文件为: #left-main { background-color:#453122; width:70%; float:left; height:480px; border:solid 1px #0000FF; margin-top:10px; margin-left:10px; }
#right-main { background-color:#876543; width:20%; float:right; height:480px; border:solid 1px #0000FF; margin-top:10px; margin-right:10px; }
2、4 弹性布局 可以随着字体的大小呈现等比例的边框放大和缩小 #box { background-color:#00FF33; height:700px; width:72em; margin:0 auto; text-align:left; padding:10px; }
#banner { background-color:#CCFF33; height:100px; border:solid 1px #FF0000; }
#left { background-color:#CCAAAA; width:18em; float:left; height:500px; border:solid 1px #0000FF; margin-top:10px; }
#main { background-color:#CCA12A; width:52em; float:right; height:500px; border:solid 1px #0000FF; margin-top:10px; }
#bottom { clear:both; background-color:#23A12A; height:10px; border:solid 1px #0000FF; margin-top:10px; }
#left-main { background-color:#453122; width:32em; float:left; height:480px; border:solid 1px #0000FF; margin-top:10px; margin-left:10px; }
#right-main { background-color:#876543; width:16em; float:right; height:480px; border:solid 1px #0000FF; margin-top:10px; margin-right:10px; }
body { background: #666666; font-size:62.5%; }
注意: 1) em:当前文本的尺寸。例如:{ font-size:2em}是指文字大小为原来的2倍。 ex:当前字母“x”的高度,一般为字体尺寸的一半。 %:是以当前文本的百分比定义尺寸。例如:{ font-size:300%}是指文字大小为原来的3倍。 2) 还可以使用max-width:100%;来限制最大尺寸,但是IE6不支持
|