今天进行了系统的网页布局练习题。
<!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" content="text/html; charset=utf-8" /> <title>百度一下，你就知道</title> <link rel="shortcut icon" href="favicon.ico"> <style type="text/css"> #a{ float:left; height:30px; width:100px; line-height:30px; vertical-align:middle; text-indent:20px; font-weight:bold; font-family:微软雅黑; color:#333; } #a:hover { color:#FFF; background-color:#b3b6bb; border-top:2px solid #F39; } </style> </head> <body> <div style=" 100px; height:100px; "> <div style="border-top:100px solid #00F; border-bottom:100px solid transparent; border-left:100px solid transparent; border-right:100px solid transparent;"> </div> </div> <div style="border-bottom:5px solid #603; border-left:5px solid #603; 100px; height:100px; transform:rotate(45deg); margin:30px;"> </div> <div> 去掉页面自带边框剧中，字体微软雅黑，字的大小14px，给id叫content的div加属性属性为与外边距上20px、右0px，下0px，左300px，宽350px，高100px。外边框宽2px，实线、颜色#60F。超出部分隐藏。内容与单元格间距10px。外层是宽100px，高50px，与左边框距离是320px，超出部分隐藏与上边框距离是-2px。里面是一个一个倾斜45度、边长52px，粗2p颜色#60F的正方形边框，相对原来位置移动-27px，左右边距为0，背景色为白色。 </div> <div style="500px; height:30px; border:1px solid #e9e9e9;"> <div id="a">春节</div> <div id="a">元宵节</div> <div id="a">端午节</div> <div id="a">中秋节</div> <div id="a">国庆节</div> </div> <div>给需要随页面滚动还一直保持位置的div加position：fixed</div> </body> </html>