一个能记录个人生活的网站思想(初步构思)--沃伦Record

网页界面如下:

主要功能:由于我们的主旨是记录(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略

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值