正文
html主页设计模板，html设计网页主题
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
html 初学者 网站模板
!DOCTYPE html
html
head
meta charset="UTF-8"
title/title
style
body{
height:500px;
background: linear-gradient(#A6CADE,#F8C6F8) no-repeat;
}
ul,li,div {
padding:0;margin:0;
}
.container{
width: 500px;
margin:0 auto;
}
#tab-con div{
display: none;
width:500px;
height:282px;
}
#tab-con div img{
width: 100%;
height:100%;
}
#tab-con div.active{
display: block;
}
#tab-list ul li{
float:left;
list-style: none;
}
#tab-list ul li a{
display: block;
width:70px;
text-align: center;
text-decoration: none;
color:#000;
background: #D6D6D1;
}
#tab-list ul li.active a{
color:#fff;
background:#f96302;
}
/style
/head
body
div class="container"
div id="tab-con"
div class="active"img src="img/test1.jpg"/div
divimg src="img/test2.jpg"/div
divimg src="img/test3.jpg"/div
div图片4/div
div图片5/div
div图片6/div
div图片7/div
/div
div id="tab-list"
ul
lia href="javascript:;"首页/a/li
lia href="javascript:;"美食/a/li
lia href="javascript:;"交通/a/li
lia href="javascript:;"图片4/a/li
lia href="javascript:;"图片5/a/li
lia href="javascript:;"图片6/a/li
lia href="javascript:;"图片7/a/li
/ul
/div
/div
script
var tablist = document.getElementById('tab-list').getElementsByTagName('li');
var tabcon = document.getElementById('tab-con').getElementsByTagName('div');
for(var i = 0; itablist.length; i++){
tablist[i].onclick = function(){
starttab(this);
};
};
function starttab(obj){
for(var i = 0; itablist.length; i++){
if(tablist[i] == obj){
tablist[i].className = "active";
tabcon[i].className = "active";
}else{
tablist[i].className = "";
tabcon[i].className = "";
};
};
};
/script
/body
/html
相关问答
Q1: 怎么样编辑网站首页html模板
如果你做的首页模板不需要调用cms的数据，那么随便弄一个html文件，首页可以设为跟cms不同默认静态页文件后缀不同即可，或者更改虚拟主机的默认首页名称和顺序，比如，你可以在你的虚拟主机上设你的首页为star.html，index.html，star.html排在最前就可以了
Q2: html个人主页模板
html个人网站模板现在有很多种类型，所以自己要懂得如何去辨别这些。凡科html个人主页模板是专业的技术员制作的，也不需要下载模板，直接可以在线操作，拖拉栏目，调整位置，在补充自己的idea和创意，一个属于自己的新网站出来了
关于html主页设计模板和html设计网页主题的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
