在线学习网站页面制作

• 确定页面的版心

/*版心*/
.w {
	width: 1200px;
	margin: auto;
}

• 制作header
  
  header高度：42px
  整个header分为四部分
  logo
  nav
  search
  user
  基本结构:

<!--header头部模块开始-->
		<div class="header w">
			<div class="logo">
				<!--这里是网页logo-->
				<!--<img src="img/logo.png" alt="" />-->
				LOGO
			</div>
			<div class="nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">课程</a></li>
					<li><a href="#">职业规划</a></li>
				</ul>
			</div>
			<div class="search">
				<input type="text" value="输入关键词"/>
				<button>搜索</button>
			</div>
			<div class="user">
				<!--用户头像-->
				<img src="img/user.jpg" alt="" width="30px" height="42px"/>
				用户名
			</div>
		</div>
		<!--header结束-->

改变此处更换logo图片

<!--<img src="img/logo.png" alt="" />-->

• 制作banner
  banner大盒子整体为一个通栏，只需要指定高度
  主要内容在页面版心显示，版心中又可分为左导航栏subnav,中间的图片以及右边的课程表，html的基本嵌套结构为

<!--banner部分开始-->
		<div class="banner">
			<div class="w">
				<!--左侧subnav-->
				<div class="subnav">
					<ul>
						<li><a href="#">语文<span>></span></a></li>
						<li><a href="#">数学<span>></span></a></li>
						<li><a href="#">英语<span>></span></a></li>
						<li><a href="#">政治<span>></span></a></li>
						<li><a href="#">历史<span>></span></a></li>
						<li><a href="#">地理<span>></span></a></li>
						<li><a href="#">生物<span>></span></a></li>
						<li><a href="#">体育<span>></span></a></li>
						<li><a href="#">音乐<span>></span></a></li>
					</ul>
				</div>
				<div class="course">
					<div class="course-hd">我的课程表</div>
					<div class="course-bd">
						<ul>
							<li>
								<h4>正在学习->八年级语文</h4>
								<p>继续学习</p>
							</li>
							<li>
								<h4>正在学习->八年级数学</h4>
								<p>继续学习</p>
							</li>
							<li>
								<h4>正在学习->八年级英语</h4>
								<p>继续学习</p>
							</li>
						</ul>
						<a href="#" class="all">全部课程</a>
					</div>
				</div>
			</div>
		</div>
		<!--banner部分结束-->