我的第一个HTML作品

我的第一个HTML作品

记录一下自己的成长过程！
这是自己学习了一个多月的成果，但是由于图片加载不出来（其实是不知道怎么把图片加进来），只有一部分的效果。

HTML部分

• 腾讯游戏排行榜
• 成长守护平台

• • 

• 集卡赢回城特效
• 世冠四强出炉
• 开赛季最后兑奖
• 高端局杨戬教学
• 世冠今日预报

• 热门 新闻 公告 活动 赛事 ...
• 
  

  ---

• 8月6日全服不停机公告
• 

css部分

• {
  margin: 0px;
  padding: 0px;
  }

#show {
position: fixed;
border: solid 3px sandybrown;
background-image: url(…/img/r_code.jpg);
top: 230px;
right: 50px;
width: 110px;
z-index: 10;
height: 110px;
}

#show_01 {
position: fixed;
border: 0px;
top: 348px;
right: 56px;
width: 110px;
z-index: 10;
height: 30px;
}

#show_02 {
position: fixed;
border: 0px;
top: 387px;
right: 56px;
width: 110px;
z-index: 10;
height: 30px;
}

#show_03 {
position: fixed;
border: 0px;
top: 105px;
right: 120px;
width: 110px;
z-index: 10;
height: 30px;
background-color: #FFFFFF;
}

#header {
position: relative;
background-repeat: repeat-x;
background-color: #fff;
color: #464646;
left: 0;
height: 40px;
width: 100%;
}

#header_01 {
position: absolute;
top: 10px;
float: left;
left: 790px;
}

#img_logo {
left: 160px;
position: relative;
}

#img {
position: relative;
left: 155px;
}

#img_01 {
height: 35px;
}

#li {
list-style-type: none;
float: right;
margin-top: 20px;
margin-right: 230px;
}

#li a:hover {
color: red;
}

#li a {
color: black;
text-decoration: none;
top: 8px;
position: absolute;
left: 170px;
}

#li_ {
list-style-type: none;
float: right;
margin-top: 20px;
margin-right: 20px;
}

#li_ a:hover {
color: red;
}

#li_ a {
color: black;
text-decoration: none;
top: 8px;
position: absolute;
left: 35px;
}

#main_01 {
background-color: white;
position: relative;
height: 959px;
background-repeat: no-repeat;
width: 100%;
}

.background {
left: 0px;
position: absolute;
z-index: 0;
}

#img_02 {
position: relative;
z-index: 11;
}

#pics {
z-index: 2;
position: absolute;
top: 350px;
left: 50px;
}

ul {
list-style-type: none;
position: relative;
}

.ul-btn {
position: absolute;
top: 730px;
height: 40px;
width: 605px;
background-color: #3D4253;
left: 49px;
}

.btn {
position: relative;
float: left;
left: 8px;
top: 12px;
margin-left: 11px;
color: white;
z-index: 1;
}

.btn:hover {
color: #f3c258;
}

#tab {
height: 338px;
width: 370px;
position: absolute;
left: 654px;
top: 433px;
font-size: 20px;
background-color: #3D4253;
}

.btn_ {
position: relative;
margin-left: 15px;
text-decoration: none;
color: white;
top: 15px;
}

.btn_:hover {
color: #f3c258;
text-decoration: underline;
}

#btn_01 {
color: #f3c258;
position: absolute;
top: 16px;
left: 55px;
font-size: 25px;
background-color: #323235;
text-decoration: none;
}

#btn_01:hover {
text-decoration: underline;
}

#btn_02 {
position: absolute;
top: 53px;
}

#download {
position: absolute;
height: 338px;
width: 200px;
top: 433px;
left: 1021px;
}

#foot {
position: absolute;
height: 118px;
width: 200px;
top: 800px;
left: 49px;
}

#foot_02 {
position: absolute;
height: 118px;
width: 200px;
top: 800px;
left: 356px;
}

#foot_03 {
position: absolute;
height: 118px;
width: 200px;
top: 800px;
left: 663px;
}

#foot_04 {
position: absolute;
height: 118px;
width: 200px;
top: 800px;
left: 969px;
}

.foot_:hover {
transform: scale(1.1);
transition: 0.7s;
}

#main_02 {
background-color: ;
height: 540px;
width: 100%;
}

.main_02_title {
position: absolute;
left: 75px;
}

.main_02_img {
position: absolute;
left: 45px;
}

.main_02_img01 {
position: absolute;
left: 870px;
}

.main_02_a {
position: relative;
left: -35px;
top: 45px;
font-size: 20px;
margin-left: 200px;
text-decoration: none;
color: #464646;
}

.main_02_a:hover {
color: #000000;
}

#main_02_img02 {
position: absolute;
top: 1070px;
left: 35px;
}

#main_02_img03 {
position: absolute;
right: 50px;
}

.main_03_title {
position: absolute;
left: 75px;
}

#main_03 {
height: 850px;
width: 100%;
}

#main_03_img01 {
position: absolute;
left: 45px;
}

.main_03_img01 {
position: absolute;
left: 870px;
}

#main_03_title_01 {
position: relative;
left: 55px;
top: 40px;
height: 30px;
width: 875px;
background-color: antiqueWhite;
}

.main_03_a {
float: left;
;
margin-left: 15px;
text-decoration: none;
color: #464646;
margin-top: 6px;
}

.main_03_a:hover {
color: orange;
text-decoration: underline;
}

#main_03_img_02 {
position: relative;
left: 18px;
top: -45px;
}

#main_03_img_03 {
position: relative;
right: -30px;
}

#main_03_img_04 {
position: relative;
left: 30px;
}

#footer {
background-color: ;
height: 300px;
width: 100%;
left: 10px;
}

js部分

//获取容器
var pics=document.getElementById(“pics”);
var n=1;
//设置时钟控件
setInterval(function(){if(n>5)n=1;pics.innerHTML="";n++;},4000);
//var icons=document.getElementById(“iconslist”).getElementsByTagName(“li”);

//function mOver1(this){this.innerHTML="";}