学生在线网课网页设计

• 网页知识点
• 网页作品介绍
• 网页代码展示
• 代码展示
• • 登录页面部分代码展示
  • 头部区域代码演示
  • 小导航代码演示
• 网页效果预览
• • 首页效果
  • 表单页面
• 详情页面
• 作品地址

网页知识点

DIV CSS布局、CSS3效果（阴影、圆角）、注册登录表单、鼠标经过菜单变色、JavaScript弹窗提示跳转等

网页作品介绍

网页设计作品主题为在线视频学习网校类主题，网页作品共11个页面，包括1个首页、1个注册页面、1个登录页面、8个课程介绍页面。课程介绍页面有课程视频（8个课程页面使用的同一个视频）。

网页作品整体页面宽度1200像素，使用CSS设置了浅色网页背景，整体使用了些CSS3效果，比如首页BANNER图圆角效果 及 课程列表的阴影效果及圆角效果。课程小导航区域使用CSS制作了鼠标经过变色效果。

网页作品制作了注册登录表单页面，点击注册按钮使用JavaScript制作了弹窗提示注册成功前往登录页面，点击登录按钮，提示登录成功前往首页。

网页代码展示

代码展示

登录页面部分代码展示

<div class="member">
	<div class="mbg">
		<div class="caidan"><li class="this"><a href="login.html" >登录</a></li><li><a href="register.html" >注册</a></li></div>
		<form style="margin-left:40px; margin-top:40px;">
		<input name='name' type='text' style='width:280px;height:40px; padding-left:20px;' placeholder="请输入用户名/手机/邮箱">
		<br><br>
		<input name='password' type="password"  style='width:280px;height:40px; padding-left:20px;' placeholder="请输入登录密码">
		<br><br>
		<input name="" style="width:300px;height:40px; border:0;background:#f0582f;color:#fff;" value='登录' type="button" onclick="login()"  /><br>
		</form>
	</div>
</div>

头部区域代码演示

<div class="head">
	<div class="logo"><a href="index.html"><img src="img/logo.jpg" style="height:60px;margin-top:20px;"></a></div>
	<div class="nav"><a href="register.html">注册</a> / <a href="login.html">登录</a></div>
</div>

小导航代码演示

<div class="menu">
	<ul>
		<li><a href="videof.html">Dreamweaver</a></li><li><a href="videog.html">Flash</a></li><li><a href="videoh.html">HTML5</a></li>
		<li><a href="videod.html">JavaScript</a></li><li><a href="videob.html">CSS</a></li><li><a href="videoc.html">CSS3</a></li>
		<li><a href="videog.html">ASP</a></li><li><a href="videoa.html">HTML</a><li><a href="videog.html">PS</a></li><li><a href="videog.html">PHP</a></li>
		<li><a href="videoe.html">jQuery</a></li>
		<li><a href="login.html" class="more">More</a></li>
	</ul>
</div>

网页效果预览

首页效果

表单页面

详情页面

作品地址

stu-works/html/qita/302.html