html/css:簡單網頁
阿新 • • 發佈:2018-11-27
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 }