html：
<!DOCTYPE html> <html> <head> <meta http-equiv=“content-type” content=“text/html;charset=utf-8”/> <title>第一个页面</title> <link rel='stylesheet' type='text/css' href='c.css' /> </head> <body> <div class='pg-header'> <div class='logo'>ZhangShun</div> </div> <div class='pg-body'> <div class='menu'> <ul> <li>菜单1</li> <li>菜单2</li> <li>菜单3</li> <li>菜单4</li> <li>菜单5</li> <li>菜单6</li> <li> <a href='#test'>查找test</a> </li> <li>菜单8</li> <li>菜单9</li> <li>菜单10</li> <li>菜单11</li> <li>菜单12</li> <li>菜单13</li> <li>菜单14</li> <li>菜单15</li> <li>菜单16</li> <li>菜单17</li> <li>菜单18</li> <li>菜单19</li> <li>菜单20</li> <li>菜单21</li> <li>菜单22</li> <li>菜单23</li> <li>菜单24</li> <li>菜单25</li> <li>菜单26</li> <li>菜单27</li> <li>菜单28</li> <li>菜单29</li> <li>菜单30</li> <li>菜单31</li> <li>菜单32</li> <li>菜单33</li> <li>菜单34</li> <li>菜单35</li> </ul> </div> <div class='content'> <div style='height:1000px;background-color:#BEC14B;'> <div style='height:700px'></div> <div id='test'> <h1>test</h1> </div> </div> </div> </div> </body> </html>
css：
body{
margin:0px auto;
}
.pg-header{
background-color:#999;
height:50px;
position:fixed;
top:0px;
width:100%;
}
.pg-header .logo{
font-size:30px; #字体大小
line-height:50px;
margin-left:30px;
font-family:fantasy; #字体形式
color:white;
}
.pg-body{
background-color:#4296DC;
min-height:500px;
}
.pg-body .menu{
width:250px;
background-color:#D3F9D8;
position:fixed; #固定
top:50px; #上边距、下边距、下拉框
bottom:5px;
overflow:auto;
}
.pg-body .menu ul{
margin:0px auto; #上边距 0px 对齐
}
.pg-body .menu ul li{
padding:3px;
}
.pg-body .content {
margin-left:260px; #左边距 260px
margin-top:50px; #上边距 50px
}
展示：
