html/css:简单网页

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
}

 展示：

posted on 2018-11-27 00:34  xiaobai小白  阅读(624)  评论(0)    收藏  举报

导航