网页知识点
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.com/html/qita/302.html