冒险村物语
英雄无敌3塔防
驾考家园手游

php实战第十九天

2014-09-05

今天涉猎了 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;

}

（免责声明：文章内容如涉及作品内容、版权和其它问题，请及时与我们联系，我们将在第一时间删除内容，文章内容仅供参考）