最近很火的一个表白页

先保存下来,这么强势。说不定以后用得上

代码

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// JavaScript Document
var Dianji=0;
window.onload=function(){
	var buhao = document.getElementById("buhao");
	var hao = document.getElementById("hao");
	buhao.onclick=function(){
		Dianji++;
		if(Dianji==1){
	   			alert("小姐姐在考虑一下呗");
	   }else if(Dianji==2){
		   		alert("你是我见过的最帅气善良可爱的男孩");
 
	   }else if(Dianji==3){
		   		alert("一生一世爱你");
 
	   }else if(Dianji==4){
		   		alert("家务我全干");
 
	  }else if(Dianji==5){
		   		alert("不藏私房钱");
	  }else if(Dianji==6){
		   		alert("房子写你名");
	  }else if(Dianji==7){
		   		alert("工资全上交");
		  		Dianji=1;
	  }
 
	}
	hao.onclick=function(){
		alert("小姐姐终于同意了,我爱你");
	}
 
 
}

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
@charset "utf-8";
/* CSS Document */
 
 
 
/*电脑版本*/
@media screen and (min-width:501px){
.box{
		width: 600px;
		background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
		border-radius: 10px;
		margin: 0 auto;
		color: aliceblue;
		 margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
   	 	right: 0;
    	bottom: 0;
	}
	.box img{
		width: 200px;
		height: 200px;
		border-radius: 5px;
	}
	.box p{
		padding-top: 30px;
		font-weight: bold;
	}
	.bottom{
		margin-top:30px;
		width: 99%;
		height: 80px;
 
	}
	.left{
		display: inline-block;
		width: 150px;
		height: 40px;
		background-color: #5cb85c;
		border-color: #4cae4c;
		margin-right: 100px;
		border-radius: 5px;
		line-height: 40px;
		font-size: 18px;
		font-weight: bold;
		cursor: pointer;
	}
	.left:hover{
		background-color:#328732;
 
	}
		.right{
		cursor: pointer;
		display: inline-block;
		width: 150px;
		height: 40px;
		background-color: #c9302c;
		border-color: #ac2925;
		border-radius: 5px;
		line-height: 40px;
		font-size: 16px;
 
	}
	.right:hover{
		border-color:#B11C18;
	}
}
/*手机端*/
@media screen and (max-width:500px){
	.box{
		width: 100%;
		background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
 
		margin: 0 auto;
		color: aliceblue;
		 margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
   	 	right: 0;
    	bottom: 0;
	}
		.box img{
		width:150px;
		height: 150px;
		border-radius: 5px;
	}
	.box p{
		padding-top: 30px;
		font-weight: bold;
	}
	.bottom{
		margin-top:3%;
		width: 99%;
		height: 80px;
 
 
	}
	.left{
		display: inline-block;
		width: 40%;
		height: 40px;
		background-color: #5cb85c;
		border-color: #4cae4c;
		margin-right: 10%;
		border-radius: 5px;
		line-height: 40px;
		font-size: 18px;
		font-weight: bold;
		cursor: pointer;
	}
	.left:hover{
		background-color:#328732;
 
	}
		.right{
		cursor: pointer;
		display: inline-block;
		width: 40%;
		height: 40px;
		background-color: #c9302c;
		border-color: #ac2925;
		border-radius: 5px;
		line-height: 40px;
		font-size: 16px;
 
	}
	.right:hover{
		border-color:#B11C18;
	}
 
 
 
 
}

效果演示请移步——---http://blog.mlldxe.cn/gwcdx.html


>>原创文章,欢迎转载。转载请注明:转载自Mlldxe's Blog,谢谢!
>>原文链接地址:最近很火的一个表白页
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注