Process on首页制作

                                        Process  on首页制作

process on是专用绘图的软件。

学习前端巩固知识可以学着做做一些网站的首页，比如Process on、百度、gethub等。

今天先来了解下process on的首页制作

先来看下代码：

process on.html

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Process On.css" type="text/css">
<script src="jquery.js"></script>
<script src="Process On.js"></script>
</head>
<body>
<div class="div1">
<div class="div1_1">
    <img id="img1" src="1.png"></img>
</div>
<div class="div1_2">
    <ul id="ul1">
        <li class="li_1">小组</li>
        <li class="li_1" style="color:blue;">我的</li>
        <li class="li_1">推荐</li>
        <li class="li_1">模板</li>
    </ul>
</div>
<div class="div1_3">
    <input type="button" id="button1" value="升级到个人版">
</div>
<div class="div1_4" onclick="display2(this.firstChild.nextSibling.nextSibling.nextSibling)">
    <img id="img2" src="2.png"> </img>
    <div class="div1_4_1" id="div1_4_1">
        <div class="div1_4_2">我的文件</div>
        <div class="div1_4_2">账户中心</div>
        <div class="div1_4_2">个人主页</div>
        <div class="div1_4_2">偏好设置</div>
        <div class="div1_4_2">入门教程</div>
        <div class="div1_4_2">更新日志</div>
        <div class="div1_4_2">退出登录</div>
    </div>
</div>  
</div>
<div class="div2">
<div class="div2_1">
<div id="div2_1_1">
<button id="button2" value="new" onclick="display1()" onmouseover="changecursor()">新建</button>
<div id="meau">
<div class="div2_1_1_1">新建文件夹</div>
<div class="div2_1_1_1">导入</div>
<div class="div2_1_1_1" onclick="creatediv()">流程图</div>
<div class="div2_1_1_1">思维导图</div>
<div class="div2_1_1_1">UML</div>
<div class="div2_1_1_1">网络拓扑图</div>
<div class="div2_1_1_1">组织拓扑图</div>
<div class="div2_1_1_1">BMPN</div>
</div>
</div>
<div class="div2_1_2">
<a href="Process On.html"style="text-decoration:none;color:black;">我的文件</a>
</div>
<div class="div2_1_2">
最近修改
</div>
<div class="div2_1_2">
与我协作
</div>
<div class="div2_1_2">
我的收藏
</div>
<div id="div2_1_3" >
<a href="Process On Trash.html"style="text-decoration:none;color:black;">回收站</a>
</div>
</div>
<div class="div2_2" onclick="hidden1()">
<div class="div2_2_1">
<div><p>我的文件 <img id= "img3" src=3.png></img></p></div>
<div class="div2_2_2" id="div2_2_2">
    <div class="v1" id="d1_1" onmousemove="display2(this.firstChild.nextSibling)" onmouseout="hidden2(this.firstChild.nextSibling)">
        <div class="circle" id="circle" onclick="display3(this.firstChild.nextSibling)">list
            <div class="childs" id="childs">
                <div class="child" id="s0" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">浏览</div>
                <div class="child" id="s1" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">重命名</div>
                <div class="child" id="s2" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">协作</div>
                <div class="child" id="s3" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">发布和公开</div>
                <div class="child" id="s4" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">分享</div>
                <div class="child" id="s5" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">克隆</div>
                <div class="child" id="s6" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">下载</div>
                <div class="child" id="s7" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">复制和移动</div></var>
                <div class="child" id="del" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)" onclick="remove1(this.parentNode.parentNode.parentNode)">删除</div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>

process on.css

@charset "utf-8";
body{
    background-color: #f0f0f0
}
.div1{
    background-color: #fff;
	width:100%;
	height:40px;
}
.div1_1
{   
    float: left;
    width:160px;
    height:40px;
}
#img1{
    height:35px;
    width: 150px;
}
.div1_2{
    float: left;
    margin-left: 260px;
    height: 40px;
    width: 400px;
}
#ul1{
    list-style: none;
}
.li_1{
    margin-left: 30px;
    margin-top: -10px;
    float: left;
}
.div1_3{
    position: relative;
    float: left;
    height: 40px;
    width: 300px;
    margin-left: 70px;
}
#button1{
    margin-left: 200px;
    margin-top: 10px;
}
.div1_4{
    position: relative;
    float: left;
    width:40px;
}
#img2{margin-left:10px;}
.div1_4_1{
    display: none;
    position: absolute; 
    background: #f0f0f0;
    height:530px;
    width:140px;
    z-index: 3;
}
.div1_4_2{
    float: left; 
    margin-top: 2px;
    position: relative;
    background: #f0f0f0;
    height:30px;
    width:130px;
    z-index: 4;
    border:1p   x solid black;
}
.div2{
    margin-top: 10px;
    width:100%;
    height: 600px;
}
.div2_1{
    float: left;
    width:208px;
    height: 570px;
}
#div2_1_1{
    position: relative;
    height:45px;
    width:200px;

}
#meau{
    display: none;
}
.div2_1_1_1{
    text-align: center;
    line-height: 40px;
    width:150px;
    height:40px;
    background-color: #fff;
    margin-left: 18px;
    z-index: 3;
    border-radius: 5px;
}
#button2{
    border-radius: 4px;
    margin-left: 40px;
    margin-top: 10px;
    height:30px;
    width:100px;
    background: blue;
    color:white;

}
.div2_1_2{
    border-radius: 6px;
    background-color: aqua;
    margin-left: 20px;
    margin-top: 10px;
    padding:10px 0px 0px 40px;
    height:35px;
    width:100px;
}
#div2_1_3{
    border-radius: 6px;
    background-color: aqua;
    margin-left: 20px;
    margin-top: 10px;
    padding:10px 0px 0px 40px;
    height:35px;
    width:100px;
}
.div2_2{
    float: left;
    width: 1100px;
    height: 570px;
}
.div2_2_1{
    height:40px;
}
#img3{
    margin-top:-20px;
    margin-left: 1000px;
}
.div2_2_2{
    height:400px;
    width:100%;
}
.v1{
    position: relative;
    border-radius: 5px;
    float: left;
    margin-left: 40px;
    margin-top:20px;
    height:160px;
    width:165px;
    background: white;
}
.v2{
    display: none;
    position: relative;
    border-radius: 5px;
    float: left;
    margin-left: 40px;
    margin-top:20px;
    height:160px;
    width:165px;
    background: white;
}
.circle{
    display: none;
    position: absolute;
    width:24px;
    height: 24px;
    top:-10px;
    right: -10px;
    font-size:12px;
    cursor: pointer;
    z-index: 3;
}
.childs{
    display: none;
    z-index: 3;
    width:160px;
}
.child{
    background: white;
    line-height: 30px;
    text-align: center;
    z-index: 3;
    width:20px;
    height:30px;
    width:100px;
    border:  1px solid black;
}

process on.js

var display1=function(a){
	document.getElementById("meau").style.display="block";
}
function hidden1(a){
	document.getElementById("meau").style.display="none";
}
function display2(a){
	document.getElementById(a.id).style.display="block";
}
function hidden2(a){
	document.getElementById(a.id).style.display="none";
}
function display3(a){
	document.getElementById(a.id).style.display="block";
}
function disappear(a){
	var x=document.getElementById(a);
	x.style.display="none";
}
var changecursor=function(){
	var x=document.getElementById("meau");
	x.style.cursor="pointer";
}
function changeback(a){
	var x=document.getElementById(a);
	x.style.background="green";
}
function changeback2(a){
	var x=document.getElementById(a);
	x.style.background="white";
}
var y=2;
function creatediv(){
	var x='<div class="v1" id="d1_'+y+'" onmouseover="display2(this.firstChild)" onmouseout="hidden2(this.firstChild)">'+
		'<div class="circle" id="circle_'+y+'" onclick="display3(this.firstChild.nextSibling)">list'+
		'<div class="childs" id="childs_'+y+'">'+
		'<div class="child" id="s0_'+y+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">浏览</div>'+
		'<div class="child" id="s1_'+y+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">重命名</div>'+
		'<div class="child" id="s2_'+y+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">协作</div>'+
		'<div class="child" id="s3_'+y+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">发布和公开</div>'+
		'<div class="child" id="s4_'+y+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">分享</div>'+
		'<div class="child" id="s5_'+y+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">克隆</div>'+
		'<div class="child" id="s6_'+y+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">下载</div>'+
		'<div class="child" id="s7_'+y+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">复制和移动</div></var>'+
		'<div class="child" id="del_'+y+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)"onclick="remove1(this.parentNode.parentNode.parentNode)">删除</div>'+
		'</div></div></div>'
	y++;
	document.getElementById("div2_2_2").innerHTML+=x;
}
var z=1;
function creatediv1(){	
	var x='<div class="v2" id="d1_'+z+'" onmouseover="display2(this.firstChild)" onmouseout="hidden2(this.firstChild)">'+
		'<div class="circle" id="circle_'+z+'" onclick="display3(this.firstChild.nextSibling)">list'+
		'<div class="childs" id="childs_'+z+'">'+
		'<div class="child" id="s0_'+z+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">浏览</div>'+
		'<div class="child" id="s1_'+z+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">重命名</div>'+
		'<div class="child" id="s2_'+z+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">协作</div>'+
		'<div class="child" id="s3_'+z+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">发布和公开</div>'+
		'<div class="child" id="s4_'+z+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">分享</div>'+
		'<div class="child" id="s5_'+z+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">克隆</div>'+
		'<div class="child" id="s6_'+z+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">下载</div>'+
		'<div class="child" id="s7_'+z+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)">复制和移动</div></var>'+
		'<div class="child" id="del_'+z+'" onmouseover="changeback(this.id)" onmouseout="changeback2(this.id)"onclick="remove1(this.parentNode.parentNode.parentNode)">删除</div>'+
		'</div></div></div>'
	z++;
	document.getElementById("div2_2_2").innerHTML+=x;
}
function setcookie(name,value){
	var expiredate=new Date();
    expiredate.setMonth(expiredate.getMonth()+1);    //设置cookie的过期时间为一个月。
	document.cookie=name+"="+escape(value)+";expires="+expiredate.toGMTString()+";"         //设置cookie的key，value和过期的时间
	alert(name+"设置成功"+value);
}
function getcookie(name){
	var begin=document.cookie.indexOf(name);
    if(begin!=-1){
        begin+=name.length+1;                     //找到name的value的起始位置。
        end=document.cookie.indexOf(";",begin);   //找到name的value的结束位置。
        if(end==-1){
            end=document.cookie.length;
        }
    return unescape(document.cookie.substring(begin,end));
	}
	else{return ""};
}
function remove1(a){
	var x=a.id;
	var child=document.getElementById(a.id);
	child.style.display="none";
	setcookie(x,x);
}
function trash(x){
	if(x=="d1_1"){
		$("#d1_1").css("display","block");
	}
	if(x=="d1_2"){
		$("#d1_2").css("display","block");
	}
	if(x=="d1_3"){
		$("#d1_3").css("display","block");
	}
	if(x=="d1_4"){
		$("#d1_4").css("display","block");
	}
	if(x=="d1_5"){
		$("#d1_5").css("display","block");
	}
	if(x=="d1_6"){
		$("#d1_5").css("display","block");
	}
	if(x=="d1_6"){
		$("#d1_5").css("display","block");
	}
	if(x=="d1_7"){
		$("#d1_7").css("display","block");
	}
	if(x=="d1_8"){
		$("#d1_8").css("display","block");
	}
	if(x=="d1_9"){
		$("#d1_9").css("display","block");
	}
}

document.addEventListener('click',judje)
	function judje(a){
		if(a.target.id!="img2"){
			document.getElementById("div1_4_1").style.display="none";
		}
}

process on trash.html

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Process On.css" type="text/css">
<script src="jquery.js"></script>
<script src="Process On.js"></script>
</head>
<body>
<div class="div1">
<div class="div1_1">
    <img id="img1" src="1.png"></img>
</div>
<div class="div1_2">
    <ul id="ul1">
        <li class="li_1">小组</li>
        <li class="li_1"style="color:blue;">我的</li>
        <li class="li_1">推荐</li>
        <li class="li_1">模板</li>
    </ul>
</div>
<div class="div1_3">
    <input type="button" id="button1" value="升级到个人版">
</div>
<div class="div1_4">
    <img id="img2" src="2.png"> </img>
</div>  
</div>
<div class="div2">
<div class="div2_1">
<div id="div2_1_1">
<button id="button2" value="new" onclick="display1()" onmouseover="changecursor()">新建</button>
<div id="meau">
<div class="div2_1_1_1">新建文件夹</div>
<div class="div2_1_1_1">导入</div>
<div class="div2_1_1_1" onclick="creatediv()">流程图</div>
<div class="div2_1_1_1">思维导图</div>
<div class="div2_1_1_1">UML</div>
<div class="div2_1_1_1">网络拓扑图</div>
<div class="div2_1_1_1">组织拓扑图</div>
<div class="div2_1_1_1">BMPN</div>
</div>
</div>
<div class="div2_1_2">
<a href="Process On.html" style="text-decoration:none;color:black;">我的文件
</div>
<div class="div2_1_2">
最近修改
</div>
<div class="div2_1_2">
与我协作
</div>
<div class="div2_1_2">
我的收藏
</div>
<div id="div2_1_3">
<a href="Process On Trash.html"style="text-decoration:none;color:black;">回收站</a>
</div>
</div>
<div class="div2_2" onclick="hidden1()">
<div class="div2_2_1">
<div><p>我的文件 <img id= "img3" src=3.png></img></p></div>
<div class="div2_2_2" id="div2_2_2">
</div>
<script>
    var cookie="d1_";
    var  cnt=1;
    for(i=0;i<9;i++){
    onload=creatediv1();
    var cook=cookie+cnt;
    cnt++;
    var c=getcookie(cook);
    onload=trash(c);
}
</script>
</body>
</html>

Process on首页制作

总结：实现了这个页面的基本功能，不足的是当点击回收站到process on trash.html时，创建的div是本来存在的，只是设置了他的隐藏。

当删除process on这个页面的一个div时，会把div的id信息放在cookie里，切换到process on trash.html页面时getcookie来读取cookie，控制相应的div显示出来。

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode