<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/mylove.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<title>我的主页</title>
<style type="text/css">
#content_right
{
width:700px;
height:900px;
float:left;
margin-top:10px;
}
#rizhi_content
{
width:650px;
height:600px;
margin-top:10px;
float:left;
}
#total_info
{
width:650px;
height:25px;
line-height:25px;
margin-top:10px;
float:left;
background:#ccc;
}
#tags {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 10px; WIDTH: 260px; PADDING-TOP: 0px; HEIGHT: 23px
}
#tags LI {
BACKGROUND: url(img/tagleft.gif) no-repeat left bottom; FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none; HEIGHT: 23px
}
#tags LI A {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(img/tagright.gif) no-repeat right bottom; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #999; LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px; TEXT-DECORATION: none
}
#tags LI.emptyTag {
BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 4px
}
#tags LI.selectTag {
BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 25px
}
#tags LI.selectTag A {
BACKGROUND-POSITION: right top; COLOR: #000; LINE-HEIGHT: 25px; HEIGHT: 25px
}
#tagContent {
BORDER-RIGHT: #aecbd4 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #aecbd4 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #aecbd4 1px solid; BACKGROUND-COLOR: #fff
}
.tagContent {
DISPLAY: none; PADDING-BOTTOM: 30px; WIDTH: 640px; COLOR: #474747; HEIGHT: 700px; float:left; margin-left:-5px;border:1px solid #CCC;
}
#tagContent DIV.selectTag {
DISPLAY: block
}
/* 隔行换色 */
.demo
{
width:340px;
height:700px;
float:left;
background:#fff;
padding-top:30px;
}
.demo ul
{
width:340px;
height:600px;
float:left;
margin:0;
padding-left:0px;
}
.demo ul li
{
width:300px;
height:25px;
line-height:25px;
margin:0;
padding-left:20px;
font-size:14px;
}
.demoOver{background:#ccc;}
.demoBg{background:#f1f1f1;}
.geci
{
width:250px;
height:600px;
float:left;
background:rgb(232,232,232);
font-size:12px;
}
/* 单行滚动 */
#scrollDiv{width:250px;
height:600px;
float:left;
padding-top:25px;
font-size:12px;
padding-left:30px;
overflow:hidden}
#scrollDiv ul{ margin:0; padding:0;}
#scrollDiv li{height:25px;padding-left:10px; margin:0; padding:0;}
</style>
<script type="text/javascript">
function sings(musicurl){
document.getElementById("b").src=musicurl;
document.getElementById("b").play();
//document.getElementById("b").autostart="true";
}
//歌词 单行滚动
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-25px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',3000)
});
</script>
</head>
<body>
<div id="content_right">
<div id="banner"><img src="img/rizhi_content_banner.gif" /></div>
<div id="total_info">我最喜欢的音乐收藏</div>
<div id="rizhi_content">
<ul id=tags>
<li class=selectTag>
<a onClick="selectTag('tagContent0',this)" href="javascript:void(0)">大陆歌手</a>
</li>
<li>
<a onClick="selectTag('tagContent1',this)" href="javascript:void(0)">港台歌手</a>
</li>
<li>
<a onClick="selectTag('tagContent2',this)" href="javascript:void(0)">网络歌曲</a>
</li>
</ul>
<div id=tagContent>
<div class="tagContent selectTag" id=tagContent0>
<div class="demo">
<span style="font-size:14px; color:#006; padding-left:10px;">提示:在试听音乐时请先关掉首页中的播放器!</span>
<span style="margin-top:0px; margin-left:10px; margin-bottom:10px;float:left; font-size:16px; color:#FFF; font-weight:bold;"><span style="float:left;">
<embed autostart="true" id="b" name="b" src="1.mp3" style="width:200px; height:20px;"></embed>
</span></span>
<ul>
<li>
<span style="width:20px; height:20px; float:left; line-height:20px;"><img src="img/bofang_button.png" style="margin-top:5px;*margin-top:0px;" /></span>
<a href="#" style="color:#03F;"><span onclick="sings('2.mp3')" style="width:120px; height:20px; float:left; line-height:20px;">人来人往</span></a></span>
<span style="float:right; font-style:italic; line-height:20px; width:50px; height:20px;"><a href="#" style="color: #999; text-decoration:none;">陈奕迅</a></span>
</li>
<li>
<span style="width:20px; height:20px; float:left; line-height:20px;"><img src="img/bofang_button.png" style="margin-top:5px;*margin-top:0px;" /></span>
<a href="#" style="color:#03F;"><span onclick="sings('1.mp3')" style="width:120px; height:20px; float:left; line-height:20px;">单车</span></a></span>
<span style="float:right; font-style:italic; line-height:20px; width:50px; height:20px;"><a href="#" style="color: #999; text-decoration:none;">陈奕迅</a></span>
</li>
<li>
<span style="width:20px; height:20px; float:left; line-height:20px;"><img src="img/bofang_button.png" style="margin-top:5px;*margin-top:0px;" /></span>
<a href="#" style="color:#03F;"><span onclick="sings('2.mp3')" style="width:120px; height:20px; float:left; line-height:20px;">人来人往</span></a></span>
<span style="float:right; font-style:italic; line-height:20px; width:50px; height:20px;"><a href="#" style="color: #999; text-decoration:none;">陈奕迅</a></span>
</li>
<li>
<span style="width:20px; height:20px; float:left; line-height:20px;"><img src="img/bofang_button.png" style="margin-top:5px;*margin-top:0px;" /></span>
<a href="#" style="color:#03F;"><span onclick="sings('1.mp3')" style="width:120px; height:20px; float:left; line-height:20px;">单车</span></a></span>
<span style="float:right; font-style:italic; line-height:20px; width:50px; height:20px;"><a href="#" style="color: #999; text-decoration:none;">陈奕迅</a></span>
</li>
<li>
<span style="width:20px; height:20px; float:left; line-height:20px;"><img src="img/bofang_button.png" style="margin-top:5px;*margin-top:0px;" /></span>
<a href="#" style="color:#03F;"><span onclick="sings('2.mp3')" style="width:120px; height:20px; float:left; line-height:20px;">人来人往</span></a></span>
<span style="float:right; font-style:italic; line-height:20px; width:50px; height:20px;"><a href="#" style="color: #999; text-decoration:none;">陈奕迅</a></span>
</li>
<li>
<span style="width:20px; height:20px; float:left; line-height:20px;"><img src="img/bofang_button.png" style="margin-top:5px;*margin-top:0px;" /></span>
<a href="#" style="color:#03F;"><span onclick="sings('1.mp3')" style="width:120px; height:20px; float:left; line-height:20px;">单车<
没有合适的资源?快使用搜索试试~ 我知道了~
Html+CSS +Javascript实现的一个很炫个人主页网页
共125个文件
gif:49个
png:29个
jpg:18个
5星 · 超过95%的资源 需积分: 42 171 下载量 104 浏览量
2014-04-22
19:40:06
上传
评论 7
收藏 18.38MB RAR 举报
温馨提示
Html+CSS +Javascript实现的人主页网页,纯属个人原创。支持Firefox、IE等各种浏览器。值得作业提交,其他的也可作为参考!
资源推荐
资源详情
资源评论
收起资源包目录
Html+CSS +Javascript实现的一个很炫个人主页网页 (125个子文件)
jquery-ui-1.8.2.custom.css 31KB
mylove.css 3KB
jquery.tzineClock.css 1KB
yuyan.css 1KB
clock.css 0B
Thumbs.db 162KB
Thumbs.db 37KB
Thumbs.db 33KB
head_bg.gif 159KB
bottom_bg.gif 52KB
content_bg.gif 45KB
rizhi_content_banner.gif 33KB
dontting.gif 22KB
login.gif 20KB
touxiang_bg.gif 19KB
info_banner.gif 15KB
http_imgload[1].gif 9KB
login_button.gif 7KB
article_banner2.gif 6KB
article_banner1.gif 6KB
zuopinzhanshi.gif 6KB
content_jianxi_bg.gif 3KB
qingchu.gif 3KB
tagleft.gif 3KB
guiling.gif 3KB
num_8.gif 2KB
num_9.gif 2KB
num_7.gif 2KB
chenghao.gif 2KB
num_5.gif 2KB
num_1.gif 2KB
chuhao.gif 2KB
dian.gif 2KB
jianhao.gif 2KB
num_2.gif 2KB
num_4.gif 2KB
num_3.gif 2KB
jiahao.gif 2KB
num_6.gif 2KB
denghao.gif 2KB
num_0.gif 2KB
content_top_bg.gif 2KB
content_left_bg.gif 2KB
ui-anim_basic_16x16.gif 2KB
dock-bg.gif 1KB
dock-bg2.gif 1KB
bg.gif 604B
remen_list_img.gif 528B
tagright.gif 381B
rizhi_shuo.gif 226B
rizhi_list_img.gif 135B
left.gif 123B
right.gif 122B
main-bg.gif 83B
blank.gif 43B
ontent_top_bg.gif 0B
ontent_left_bg.gif 0B
ontent_jianxi_bg.gifų 0B
music.html 54KB
rizhi1.html 35KB
rizhi.html 25KB
content_right.html 21KB
content_left.html 12KB
xiangce.html 5KB
gerenziliao.html 3KB
index.html 3KB
more.html 640B
我的主页_备份.jpg 146KB
我的主页111.jpg 146KB
v8.jpg 86KB
v4.jpg 84KB
v5.jpg 40KB
v9.jpg 40KB
v1.jpg 40KB
touxiang_bg.jpg 30KB
v2.jpg 28KB
next.jpg 11KB
prev.jpg 11KB
v3.jpg 9KB
v6.jpg 6KB
touxiang.jpg 3KB
fm_hover_pointer.jpg 463B
fm_hover_bg.jpg 419B
fm_menu_bg.jpg 352B
menu_002_h.jpg 339B
jquery-ui-1.8.2.custom.min.js 202KB
jquery-1.4.2.min.js 70KB
jquery.js 21KB
interface.js 12KB
jquery.tzineClock.js 4KB
jcarousellite.min.js 4KB
clock.js 142B
3.mp3 7.85MB
2.mp3 4.72MB
1.mp3 4.5MB
bofang.png 37KB
music.png 19KB
history.png 18KB
rss2.png 15KB
video.png 15KB
共 125 条
- 1
- 2
大喇叭
- 粉丝: 2
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于ThinkPHP的轻量级PHP开发框架设计源码
- 基于CSS的响应式鲜花网站全屏效果设计源码
- 基于JavaScript的访客预约系统设计源码
- 基于Vue和ECharts的工作租房数据可视化系统设计源码
- 1040g0cg310ravpiu6ibg5pg00tsipsln3ju2d0g 2
- 基于Python的SAR图像去噪CNN-NLM设计源码
- redhat6升级到redhat7,过程redhat6.x-> redhat6.10->rehat7.9 主版本最高版本
- 基于Django的流程引擎设计源码
- 基于Node.js的Express框架与MySQL的后台管理系统设计源码
- 基于Java的Flink流批一体数据处理快速集成开发框架设计源码
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页