学生在线网课网页设计
- 网页知识点
- 网页作品介绍
- 网页代码展示
- 代码展示
- 登录页面部分代码展示
- 头部区域代码演示
- 小导航代码演示
- 网页效果预览
- 首页效果
- 表单页面
- 详情页面
- 作品地址
网页知识点
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
更多推荐
学生网课网页设计成品 在线视频学习类网页制作 三层结构网页模板 静态HTML注册登录网页模板 学生毕业设计网页制作作品 网校类网页代制做
发布评论