网页界面如下：
主要功能：由于我们的主旨是记录（Record you own）你的生活，对于注册个体用户，可以
（1）当把鼠标放到第一排第一列的li标签时，（因为CSS设置了li:hover）出现了下图，用来添加图片
（2）同理（1），其他li标签，可以添加视频，添加日志，添加网站，添加音乐，添加好友
（3）导航栏，“私人定制”这一栏是可以给用户自定义样式的，例如颜色，字体....
(4)用户选择 “登录”这栏，点击跳转:
对应代码：
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>登陆界面</title>
<link rel="stylesheet" href="../css/login1.css"/>
</head>
<body>
<div class="container">
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">链接三</a></li>
<li><a href="#">链接二</a></li>
<li><a href="#">链接一</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>
<!-- 主体内容 （登陆界面）-->
<div class="main">
<!-- 左侧信息栏 -->
<header id="main" data-anijs="if: mouseover, do: swing animated" >
<div class="sideleft">
<h1>沃伦记录 对生活采访</h1>
<h4>数据结合生活 让大数据发挥大价值</h4>
<br><br><br>
<p>精准营销、数据化管理，提升管理水平</p>
<p>打造线上线下数字一体化</p>
<p>闲忙之间，学会放松生活，随时随时记录生活</p>
<p>服务市场，为各层年龄段提供对应的服务</p>
</div>
</header>
<!-- 右侧登陆界面 -->
<div class="sideright">
<div class="index">
<form action="#" method="get">
<p class="headline">用户登陆</p>
<p class="astyle">用户名：</p>
<input type="text" value="请输入您的手机号">
<p class="astyle">密码：</p>
<input type="text" value="请输入密码">
<input type="submit" value="登陆" name="login" >
</br>
<p class="bstyle"><input type="checkbox" name="rempas" /> 记住密码</p>
<p class="cstyle">忘记密码</p>
</br></br>
<p class="cstyle">没有账号？<a href="../css/zhuce.html">立即注册</a></p>
</form>
</div>
</div>
</div>
<!-- 尾部 -->
<div class="footer">
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">诚聘人才</a></li>
<li><a href="#">联系商家</a></li>
<li><a href="#">广告服务</a></li>
</ul>
</div>
</div>
<!-- The scrollreveal helper-->
</body>
</html>
(5)无账号，点击注册
（6）运用JS的画布canvas，绘画主题页面
对应代码：
<script>
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var ct=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(185,110,125,90,650,700);
grd.addColorStop(0,"darkorange");
grd.addColorStop(1,"bisque");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(0,0,900,300);
//在canvas元素中插入字体，和图片
ct.font = '25px 宋体';
ct.fillStyle = 'darkslategray';
ct.fillText("沃伦记录", 390, 255);
ctx.font = ' 37px Gabriola';
ctx.fillStyle = '#66cdaa';
ctx.fillText("Record you own, be smiled", 320, 290);
function drawBeauty(beauty){
var myctx = c.getContext("2d");
myctx.drawImage(beauty, 620, 260);
}
function load(){
var beauty = new Image();
beauty.src = "smile1.PNG";
if(beauty.complete){
drawBeauty(beauty);
}else{
beauty.onload = function(){
drawBeauty(beauty);
};
beauty.onerror = function(){
window.alert('图片加载失败，请重试');
};
};
}
if (document.all) {
window.attachEvent('onload', load);
}else {
window.addEventListener('load', load, false);
}
}
</script>
（7）主页面
代码：
主界面：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>沃伦Record--record you own</title>
<link class="" rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="id"></div>
<div class="header">
<div class="top">
<div class="wp">
<div class="z"><strong>沃伦<span class="z1">Record</span></strong>
<span class="zz">(:</span><span class="zzz">Record you own, be smiled</span>
</div>
<div class="y">
<span class="mr_1"><a href=""><strong>收藏</strong></a></span>
<span class="mr_0"><a href="Header链接/Login.html"><strong>登录</strong></a></span>
<span class="mr_2"><a href=""><strong>消息</strong></a></span>
<span id="mr_3"><a href=""><strong>私人定制</strong></a></span>
<span id="mr_4"><a href=""><strong>交际圈</strong></a></span>
<span id="mr_5"><a href=""><strong></strong></a></span><!-- 用于清除多余的hover板块-->
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="middle">
<canvas id="myCanvas" width="900" height="300" style="border: 2px solid darkslategrey">
您的浏览器不支持HTML5 canvas 标签
</canvas>
<div id="main" data-anijs="if: click, do: flipInY animated">
<div class="cp_c">
<ul>
<li><a href=""><img src="green.PNG" alt=""/><span> 添加图片<input type="file" title="添加图片" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/></span></a></li>
<li><a href=""><img src="orange.PNG" alt=""/><span>添加视频<input type="file" title="添加视频" accept="video/*"/></span></a></li>
<li><a href=""><img src="green.PNG" alt=""/><span>添加日记</span></a></li>
<li class="mr_0"><a href=""><img src="orange.PNG" alt=""/><span>添加网站</span></a></li>
</ul>
<br>
<br>
<br>
<br>
<br>
<br>
<ul>
<li><img src="orange.PNG" alt=""/><span>添加好友</span>/li>
<li><a href=""><img src="green.PNG" alt=""/><span>添加书籍</span></a></li>
<li ><a href=""><img src="orange.PNG" alt=""/><span>添加音乐</span></a></li>
<li class="mr_0"><a href=""><img src="green.PNG" alt=""/><span>提醒与备忘录</span></a></li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div class="footer">
<div class="wp">
<div class="foot_top">
<span class="zzzz"><a href="index.html">关于我们</a> |
<a href="index.html">联系方式</a> |
<a href="index.html">给我留言</a> |
<a href="index.html">加入我们 </a>
</span>
<span class="yyy">@2018 LDP
</span>
</div>
<div class="clear"></div>
<div class="foot_bottom">
<p>
友情链接：<a href="https://www.bilibili.com/" target="_blank">bilibili </a> <a href="http://www.maiziedu.com" target="_blank">教育部</a>
<a href="https://www.csdn.net" target="_blank">CSDN </a>
<a href="https://anijs.github.io" target="_blank">CSS动画anijs </a>
<a href="https://sports.qq.com/nba/" target="_blank">腾讯体育 </a>
<span class="yy"><a href="#id">返回顶部</a></span>
</div>
</div>
</div>
</body>
</html>
CSS略
扫一扫
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
