这是一个为我爱豆,王源。所做的一个简单的软件。
其中,每一张照片都可以点,相对应的是其网址。
学习的快乐就是把学习的东西变成一切自己喜欢的样子。
主页代码:
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
<title></title> | |
<base target="content" /> | |
<script type="text/javascript" src="js/jquery.min.js"></script> | |
<link rel="shortcut icon" href="favicon.ico"> | |
<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet"> | |
<link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet"> | |
<style> | |
body{ | |
margin: 0; | |
padding: 0; | |
overflow: hidden; | |
} | |
.page{ | |
position: absolute; | |
/*left: 300px;*/ | |
width: 100%; | |
height: 100%; | |
background-color: lavender; | |
} | |
.top{ | |
position: fixed; | |
width: 100%; | |
height: 60px; | |
background-color: #308E76; | |
z-index: 500; | |
} | |
.mybtn{ | |
margin-top: 5px; | |
margin-left: 15px; | |
color: #FFFFFF; | |
font-size: 28px; | |
width: 50px; | |
border-radius: 50%; | |
} | |
.mybtn:hover{ | |
cursor: pointer; | |
} | |
.backimg{ | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
z-index: 1000; | |
background-color: black; | |
opacity: 0.3; | |
display: none; | |
} | |
.right-dh{ | |
border: 1px solid #000000; | |
position: absolute; | |
left: -300px; | |
background:url(img/123.jpg) center; | |
width: 300px; | |
height: 100%; | |
z-index: -10; | |
} | |
.right-dh-tx{ | |
text-align: center; | |
} | |
.right-dh-tx img{ | |
display: block; | |
width: 110px; | |
border-radius: 50%; | |
border: 3px solid #FFFFFF; | |
margin: 100px auto 30px; | |
} | |
.right-dh-tx span{ | |
color: #FFFFFF; | |
} | |
.cont iframe{ | |
position: absolute; | |
top: 65px; | |
width: 100%; | |
height: 100%; | |
border: 0px; | |
/*background-color: brown;*/ | |
} | |
.dh-btn{ | |
margin-top: 50px; | |
/*border-top: 1px solid gray;*/ | |
} | |
.dh-btn a{ | |
display: block; | |
color:black; | |
text-decoration: none; | |
/*border-bottom: 1px solid gray;*/ | |
height: 60px; | |
line-height: 60px; | |
text-indent: 20px; | |
} | |
hr{ | |
width: 200px; | |
color: gainsboro; | |
opacity: 0.3; | |
margin-top: 50px; | |
} | |
</style> | |
<script> | |
$(document).ready(function(){ | |
//侧滑按钮点击事件 | |
$(".mybtn").click(function(){ | |
//页面整体侧滑 | |
$(".page").animate({ | |
left:'300px' | |
}); | |
//显示透明度div层 | |
$(".backimg").css({ | |
"display":"block" | |
}); | |
//左侧导航右滑 | |
$(".right-dh").animate({ | |
left:'0px' | |
}); | |
}); | |
//还原点击事件 | |
$(".backimg").click(function(){ | |
//页面整体左滑动 | |
$(".page").animate({ | |
left:'0px' | |
}); | |
//显示透明度div层隐藏 | |
$(".backimg").css({ | |
"display":"none" | |
}); | |
//左侧导航右滑 | |
$(".right-dh").animate({ | |
left:'-300px' | |
}); | |
}); | |
//栏目选择事件 | |
$(".dh-btn a").click(function(){ | |
//页面整体左滑动 | |
$(".page").animate({ | |
left:'0px' | |
}); | |
//显示透明度div层隐藏 | |
$(".backimg").css({ | |
"display":"none" | |
}); | |
//左侧导航右滑 | |
$(".right-dh").animate({ | |
left:'-300px' | |
}); | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<!--左侧导航--> | |
<div class="right-dh"> | |
<!--左侧导航头像--> | |
<div class="right-dh-tx"> | |
<img src="img/5.png" /> | |
<a href="#"> | |
<span style="color: green;font-size: 36px;">王源</span> | |
</a> | |
</div> | |
<hr /> | |
<!--导航栏--> | |
<div class="dh-btn"> | |
<a class="dj" href="zhuye.html"> | |
<i class="fa fa-bars"></i> 个人资料 | |
</a> | |
<a href="zpzs.html"> | |
<i class="fa fa-bank"></i> 作品展示 | |
</a> | |
<a href="ysxz.html"> | |
<i class="fa fa-beer"></i> 艺术写真 | |
</a> | |
<a href="yyjl.html"> | |
<i class="fa fa-bold"></i> 演绎经历 | |
</a> | |
</div> | |
</div> | |
<!--右侧界面--> | |
<div class="page"> | |
<div class="backimg"></div> | |
<div class="top"> | |
<!--向右滑动按钮--> | |
<!--<i class="mybtn fa fa-user"></i>--> | |
<img class="mybtn" src="img/04.jpg"/> | |
</div> | |
<!--主要内容--> | |
<div class="cont"> | |
<iframe name="content" src="right.html"></iframe> | |
</div> | |
</div> | |
</body> | |
</html> |
第一页代码:
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style> | |
body{ | |
height: 50px; | |
width: 100%; | |
background-color: #E0ECDC; | |
} | |
.r p{ | |
height: 100px; | |
width: 220px; | |
margin-top: -110px; | |
} | |
.r img{ | |
width: 150px; | |
margin-left:230px ; | |
margin-top: -90px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="r" > | |
<a href="http://baike.so.com/doc/5512432-5748212.html"> | |
<h2 style="margin-left: 30px;color: #000000;">王源</h2> | |
</a> | |
<h3 style="margin-left: 30px;">TFBOYS成员</h3> | |
<img src="img/17.png" /> | |
<p>2013年8月6日以TFBOYS组合形式出道。2015年11月8日钢琴弹唱14岁完成的首支自己作词作曲的单曲《因为遇见你》,后凭此曲获第9届城市至尊音乐榜年度听众最爱新人... >>></p> | |
</div><br /> | |
<hr style="width: 90%;align: center;"/> | |
<div class="r1" > | |
<h2>明星关系</h2> | |
<a href="http://baike.so.com/doc/7015646-7238535.html"> | |
<img style="height: 128px;" src="img/08.jpg"/> | |
</a> | |
<a href="http://baike.so.com/doc/5469870-5707782.html"> | |
<img style="height: 128px;" src="img/111.jpg"/> | |
</a> | |
<a href="http://baike.so.com/doc/5578914-5792282.html"></a> | |
<img style="height: 128px;" src="img/13.jpg"/> | |
</div><br /> | |
<hr style="width: 90%;align: center;"/> | |
<div class="r1" > | |
<h2>影视作品</h2> | |
<a href="http://www.360kan.com/tv/QLFqb07kTG4tNn.html"> | |
<img style="height: 180px;" src="img/bbd341f53463c98affb143da6df95e29_dy_712d824020ec953be230b4c0649ff1ba.jpg"/> | |
</a> | |
<a href="http://baike.so.com/doc/24207762-24794679.html"> | |
<img style="height: 180px;" src="img/c34cb4c4c779a66f8c2bdc09beb32568_t015b2e1762ac725af9.jpg"/> | |
</a> | |
<a href="http://www.so.com/s?ie=utf-8&src=hao_360so_suggest_b&shb=1&hsid=fe3da5bfcc593ef3&q=tfboys%E8%A7%82%E5%AF%9F%E6%97%A5%E8%AE%B0%E7%88%B1%E5%A5%87%E8%89%BA"> | |
<img style="height: 180px;" src="img/c9b16150c882a1c53c930263942d10c4_dy_9954d9037089578449d8f4b85db8a3ea.jpg"/> | |
</a> | |
</div><br /> | |
<hr style="width: 90%;align: center;"/> | |
</body> | |
</html> | |
第二页代码:
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
<title></title> | |
<link rel="shortcut icon" href="favicon.ico"> | |
<link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet"> | |
<link rel="stylesheet" href="css/bootstrap.min.css" /> | |
<script type="text/javascript" src="js/jquery.min.js"></script> | |
<style> | |
.top{ | |
top: 0px; | |
position: absolute; | |
height: 35%; | |
width: 100%; | |
overflow: hidden; | |
} | |
.top-img-back img{ | |
position: absolute; | |
width: 100%; | |
} | |
.top-img-back{ | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
background: linear-gradient(45deg, #0055B2 , #ffffff); | |
z-index: -1000; | |
opacity: 0.5; | |
} | |
.top-font{ | |
position: absolute; | |
bottom: 0; | |
height: 100%; | |
width: 100%; | |
color:orange; | |
z-index: 1000; | |
font-family: "微软雅黑"; | |
font-size: 18px; | |
text-indent: 20px; | |
} | |
.roy{ | |
text-indent: 50px; | |
color:green; | |
font-size:30px ; | |
} | |
.rwxg img{ | |
width: 40px; | |
border-radius: 50%; | |
border: 2px solid #FFFFFF; | |
margin: auto 5px; | |
} | |
/*.foot{ | |
position:fixed; | |
border: 2px solid black; | |
width: 100%; | |
height: 50px; | |
background-color: #FFFFFF; | |
z-index: 500; | |
}*/ | |
.myCont-center{ | |
margin-top: 62%; | |
margin-bottom: 13%; | |
} | |
.xgrw img{ | |
width: 40px; | |
border-radius: 50%; | |
border: 2px solid #FFFFFF; | |
margin: auto 5px; | |
} | |
.row img{ | |
margin: 5px auto; | |
} | |
.foot a{ | |
color: #7F7F7F; | |
text-align: center; | |
line-height: 50px; | |
} | |
</style> | |
<script type="text/javascript"> | |
$(document).ready(function(){ | |
$(".foot a").click(function(){ | |
//改变当前被点击的元素样式 | |
$(this).css({ | |
"color":"#0062FA" | |
}); | |
//还原同胞元素 | |
$(this).siblings().css({ | |
"color":"#7F7F7F" | |
}); | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<!--顶部图片信息--> | |
<div class="top"> | |
<div class="top-font"> | |
<p class="roy">王源</p> | |
<p>TFBOYS成员</p> | |
<p>主要身份:原创型歌手、</p> | |
<p>演员、主持人</p> | |
<p style="color: #0055B2;"> | |
<a href="http://map.baidu.com/"> | |
<i class="fa fa-map-marker"></i> 中国 · 重庆 | |
</a> | |
</p> | |
<hr style="width: 90%;" /> | |
<p style="color: #000000;">相关人物</p> | |
<div class="rwxg" style="float: right;margin-top: -45px;"> | |
<img src="img/5.png" /> | |
<img src="img/3.png" /> | |
<img src="img/4.png" /> | |
<i class="fa fa-chevron-right"></i> | |
</div> | |
</div> | |
<!--背景图片--> | |
<div class="top-img-back"> | |
<img src="img/18.jpg" /> | |
</div> | |
</div> | |
<!--内容部分--> | |
<div class="myCont-center container"> | |
<h3 style="text-align: center;">作品展示</h1> | |
<div class="row"> | |
<img class="col-xs-6 img-thumbnail" src="img/17.png"/> | |
<img class="col-xs-6 img-thumbnail" src="img/17.jpg"/> | |
<img class="col-xs-6 img-thumbnail" src="img/01.jpeg"/> | |
<img class="col-xs-6 img-thumbnail" src="img/01.jpeg"/> | |
<img class="col-xs-6 img-thumbnail" src="img/03.jpeg"/> | |
<img class="col-xs-6 img-thumbnail" src="img/11.jpg"/> | |
<img class="col-xs-6 img-thumbnail" src="img/05.jpeg"/> | |
<img class="col-xs-6 img-thumbnail" src="img/05.jpeg"/> | |
<img class="col-xs-6 img-thumbnail" src="img/16.jpg"/> | |
<img class="col-xs-6 img-thumbnail" src="img/02.jpg"/> | |
<img class="col-xs-6 img-thumbnail" src="img/19.jpg"/> | |
<img class="col-xs-6 img-thumbnail" src="img/04.jpg"/> | |
</div> | |
</div> | |
<!--底部导航--> | |
<div class="foot"> | |
<a class="col-xs-4" href="javascript:;"> | |
<i class="fa fa-book"></i>最新作品 | |
</a> | |
<a class="col-xs-4" href="javascript:;"> | |
<i class="fa fa-gg"></i>娱乐八卦 | |
</a> | |
<a class="col-xs-4" href="javascript:;"> | |
<i class="fa fa-calendar-o"></i>相关人物 | |
</a> | |
</div> | |
</body> | |
</html> |
第三页代码:
第四页代码:
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style> | |
body{ | |
height: 50px; | |
width: 100%; | |
background-color: #E0ECDC; | |
} | |
.q{ | |
height: 100px; | |
width: 220px; | |
margin-top: -110px; | |
line-height: 30px; | |
} | |
.r1{ | |
height: 100px; | |
width: 400px; | |
margin-top: 20px; | |
line-height: 30px; | |
} | |
.r img{ | |
width: 150px; | |
margin-left:230px ; | |
margin-top: -110px; | |
} | |
.r1 img{ | |
margin-top: 550px; | |
width: 470px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="r" > | |
<h1 style="margin-left: 30px;color: green;">王源</h1> | |
<h2 style="margin-left: 30px;color: green;">演艺经历</h2> | |
<img src="img/9df5b9917d78f58c86e982bc8bf4d70b_t01c4a32af041d31fa7.jpg" /> | |
<p class="q">2011年底,王源加入TF家族,成为家族练习生[1]。2012年3月,王源开始《TF家族面对面》、《TF家族新闻播报》等</p> | |
<p class="r1"style="width: 470px;">TF家族自制综艺节目录制。7月15日,与王俊凯翻唱《一个像夏天一个像秋天》,至9月网络总视频点击超过500万次,且9月24日时被范玮琪转发[38]。8月23日,与王俊凯合唱家族原创歌曲《我们曾在一起》发布。9月17日,王源在地下通道翻唱的《旋木》被优酷网首页推荐[5]。10月,与王俊凯录制安徽卫视《黄金年代》。11月,与王俊凯发行EP《青蛙也会变王子》。 | |
2013年1月,王源开始主持《TF家族新闻发布会》和代班主持《TF家族新闻播报》。2月,与王俊凯翻唱歌曲《到不了》。2月23日,王源主持的脱口秀节目《源来这样讲》在TF家族自制综艺中播出。3月,与王俊凯做客《56红人馆》[2]。4月1日,与王俊凯翻唱《当爱已成往事》,视频于4月4日在优酷、56等视频网站点击量突破40万[39]。5月17日,与王俊凯合唱原创歌曲《街舞少年》发布。5月31日,与王俊凯及TFBand合作翻唱《洋葱》,视频被五月天阿信、刘若英转载,该视频点击率超过3000万[40]。6月4日,王源、王俊凯版《洋葱》被台湾《中天新闻》报道[38]。人气直升7月筹备出道,与王俊凯、易烊千玺组成组合。8月6日,由王源、王俊凯、易烊千玺三人组成的内地青春励志组合TFBOYS正式出道[1]。10月4日,TFBOYS《Heart梦·出发》首唱会于重庆渝中区日月光中心举行[19]。11月8日,与王俊凯翻唱《董小姐》发布。11月,王源开始主持家族综艺《TF少年GO》,节目包含《源文在哪》、《源来这样讲》、游戏环节和LIVE秀模块[18]。12月24日,与王俊凯参加重庆日月光中心举办的平安夜活动[19]。</p> | |
</div> | |
<div class="r1"> | |
<img src="img/a91dc0a8d1e12f5d97064f9d8a965700_t01067491df628f4df2.jpg" /> | |
<p class="w" style="width: 470px;"> | |
2014年2月14日,王源主演TF家族自制网络剧《男生学院自习室》播出,饰演马思远,此剧是TFBOYS人气激增的一个转变点,收获众多固定死忠粉[41]。4月15日,第二届音悦V榜年度盛典在北京举行,TFBOYS通过粉丝投票获得“内地最具人气歌手”奖和“音悦直播人气歌手”奖,这是TFBOYS首次亮相中国国内颁奖典礼[19]。5月2日,和易烊千玺参与EP《魔法城堡》首签活动;同日,接受《中国娱乐报道》专访,并应邀担任《土豆最音乐》嘉宾主持[42]。5月20日,与组合成员录制湖南卫视《快乐大本营》,王源小秀主持[3]。6月27日,王源两年前翻唱的未发布版《天使的翅膀》发布,视频被原唱安琥转发。7月4日,与组合成员献唱电影《我就是我》第二弹主题曲《想唱就唱》[43];同日,献唱动画电影《洛克王国3:圣龙的守护》主题曲《魔法城堡》[44]。7月24日,《青春修炼手册》正式发布,2天内点击量即破千万[45],MV发行后一周内便打破音悦台5项V榜吉尼斯[46],后成为“神曲”之一 [20]。8月21日,与组合成员录制中央电视台公益节目《开学第一课》演唱主题曲《开学第一课》[47]。8月26日,代班主持《我爱大牌》[5]。9月8日,与组合成员不仅在中央电视台中秋晚会直播现场登台表演,而且提前录播亮相湖南卫视中秋晚会上[48]。9月13日,中国首档偶像全纪录节目《TFBOYS偶像手记》首播,王源在节目中担任主持[5]。12月31日,与组合成员录制江苏卫视新年演唱会。 | |
</p> | |
</div> | |
</body> | |
</html> | |