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; 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{ 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 }