今天涉猎了 ps,以及做了一个顶部导航条固定,下面给一个效果图布局.利用得是 position:fixed
[html] %20<!DOCTYPE%20html%20PUBLIC%20"-//W3C//DTD%20XHTML%201.0%20Transitional//EN"%20"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html%20xmlns="http://www.w3.org/1999/xhtml"> <head> <meta%20http-equiv="Content-Type"%20content="text/html;%20charset=utf-8"%20/> <title>无标题文档</title> <link%20rel="stylesheet"%20type="text/css"%20href="css/in.css"%20/> </head> <body> <div%20id="head"> %20<div%20id="header"> %20<div%20class="nav"> %20<ul> %20<li><a%20>首页</a></li> %20<li><a%20>下载</a></li> %20<li><a%20>词库</a></li> %20<li><a%20>其他</a></li> %20<li><a%20>帮助</a></li> %20<li><a%20>官方论坛</a></li> %20</ul> %20</div> %20</div> </div> <div%20id="main"> a<br%20/> b<br%20/> c<br%20/> d<br%20/> e<br%20/> %20123456789<br%20/> %20123456789<br%20/> %20123456789<br%20/> %20123456789<br%20/> %20123456789<br%20/> %20123456789<br%20/> %20123456789<br%20/> %20123456789<br%20/> %20123456789<br%20/> %20123456789<br%20/> %20123456789<br%20/> %20123456789<br%20/> %20123456789<br%20/> %20123456789<br%20/> %20123456789<br%20/> </div> </body> </html>
<!DOCTYPE%20html%20PUBLIC%20"-//W3C//DTD%20XHTML%201.0%20Transitional//EN"%20"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html%20xmlns="http://www.w3.org/1999/xhtml"><head><meta%20http-equiv="Content-Type"%20content="text/html;%20charset=utf-8"%20/><title>无标题文档</title><link%20rel="stylesheet"%20type="text/css"%20href="css/in.css"%20/>
</head>
<body><div%20id="head"> <div%20id="header"> %20<div%20class="nav"> %20 <ul> %20 <li><a%20>首页</a></li> %20<li><a%20>下载</a></li> %20<li><a%20>词库</a></li> <li><a%20>其他</a></li> <li><a%20>帮助</a></li> %20<li><a%20>官方论坛</a></li> %20</ul> %20 %20</div> %20</div></div><div%20id="main">a<br%20/>b<br%20/>c<br%20/>d<br%20/>e<br%20/> 123456789<br%20/> 123456789<br%20/> 123456789<br%20/> 123456789<br%20/> 123456789<br%20/> 123456789<br%20/> 123456789<br%20/> 123456789<br%20/> 123456789<br%20/> 123456789<br%20/> 123456789<br%20/> 123456789<br%20/> 123456789<br%20/> 123456789<br%20/> 123456789<br%20/></div></body></html>css代码
[css] %20@charset%20"utf-8"; /*%20CSS%20Document%20*/ *{ %20margin:0px; %20padding:0px; %20font-size:14px; %20} body{ %20background-color:#ECECEC; %20} #head{ %20position:fixed; %20top:0px; %20background:#FAFAFA; %20width:100%; %20height:54px; %20border-bottom:%201px%20solid%20#E8E8E8; %20box-shadow:%200%201px%205px%20rgba(34,%2025,%2025,%200.2); %20z-index:100; } #header{ %20margin:0%20auto; %20width:960px; %20height:54px; %20} .nav{ %20float:%20left; %20height:%2054px; %20width:%20auto; %20} .nav%20ul%20,.nav%20li{ %20float:%20left; %20list-style:%20none%20outside%20none; } li%20a{ %20padding:%200%2015px; %20color:%20#585858; %20display:%20block; %20line-height:%2054px; %20border-right:%201px%20solid%20#E8E8E8; } #main{ %20position:relative; %20top:66px; %20margin:0%20auto; %20padding:10px; %20width:960px; %20background:%20none%20repeat%20scroll%200%200%20#FFFFFF; %20border:%201px%20solid%20#C7C7C7; %20}
@charset%20"utf-8";/*%20CSS%20Document%20*/*{ margin:0px; padding:0px; font-size:14px; }body{ background-color:#ECECEC; }#head{ position:fixed; top:0px; background:#FAFAFA; width:100%; height:54px; border-bottom:%201px%20solid%20#E8E8E8; box-shadow:%200%201px%205px%20rgba(34,%2025,%2025,%200.2); z-index:100; }
#header{ margin:0%20auto;
width:960px; height:54px; }.nav{ float:%20left; %20height:%2054px; %20width:%20auto; } .nav%20ul%20,.nav%20li{ float:%20left; %20list-style:%20none%20outside%20none;}
li%20a{ %20padding:%200%2015px; %20color:%20#585858; %20display:%20block; %20line-height:%2054px; border-right:%201px%20solid%20#E8E8E8;}
#main{ position:relative; top:66px; margin:0%20auto; padding:10px; width:960px; background:%20none%20repeat%20scroll%200%200%20#FFFFFF; %20border:%201px%20solid%20#C7C7C7; }
