效果
实现
1.新建目录douyin
2.在其下新建css目录
3.在css目录下新建main.css
@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;
}
}4.再在css同级目录下新建js目录
js目录下新建yiqi.js
// 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("你终于同意了，小姐姐我爱你");
}
}5.在css同级目录下新建index.html
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name= "viewport"content="width=device-width, initial-scale=1">
<title>LOVE，小女神</title>
<link href="./css/main.css" rel="stylesheet">
<style>
</style></head>
<body>
<div class="box" align="center">
<p>我观察你很久了</p>
<h1>小姐姐做我对象好不好?</h1>
<img src="./images/1.jpg">
<div class="bottom">
<div class="left" id="hao">好</div>
<div class="right" id="buhao">不好</div>
</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="http://photosya.cn">返回主站</a>
</div>
<script type="text/javascript" src="./js/yiqi.js"></script>
</body>
</html>6.在css同级目录下新建image目录，在此目录下存放照片
源码下载
https://download.csdn.net/download/badao_liumang_qizhi/10930308