div+css制作网页 一个页面多个选项卡 的JS 例子 要代码~谢啦~
tab标签生成：
首先用css定义一个框架；
然后用div调用出来css定义的这个框架；
js是用来实现tab切换效果的。
可以百度搜索一下tab素材或者选项卡素材。
有很多相关素材的，
js和css可以写在当前页面，也可以分开调用；
一般分开来会比较好管理一些。
例：
.tab{width:300px;0height:100px;}
内容
function{}
如下的html代码即可
Home
Profile
Messages
1、Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
2、Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
3、代码
可以对Bootstrap中所有的CSS变量进行修改，依据自己的需求裁剪代码。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body,div,ul,li{
margin:0 auto;
padding:0;
}
body{
font:12px "宋体";
text-align:center;
}
a:link{
color:#00F;
text-decoration:none;
}
a:visited {
color: #00F;
text-decoration:none;
}
a:hover {
color: #c00;
text-decoration:underline;
}
ul{
list-style:none;
}
.main{
clear:both;
padding:8px;
text-align:center;
}
/*第一种形式*/
#tabs0 {
height: 200px;
width: 400px;
border: 1px solid #cbcbcb;
background-color: #f2f6fb;
}
.menu0{
width: 400px;
}
.menu0 li{
display:block;
float: left;
padding: 4px 0;
width:100px;
text-align: center;
cursor:pointer;
background: #FFFFff;
}
.menu0 li.hover{
background: #f2f6fb;
}
#main0 ul{
display: none;
}
#main0 ul.block{
display: block;
}
/*第二种形式*/
#tabs1{
text-align:left;
width:400px;
}
.menu1box{
position:relative;
overflow:hidden;
height:22px;
width:400px;
text-align:left;
}
#menu1{
position:absolute;
top:0;
left:0;
z-index:1;
}
#menu1 li{
float:left;
display:block;
cursor:pointer;
width:72px;
text-align:center;
line-height:21px;
height:21px;
}
#menu1 li.hover{
background:#fff;
border-left:1px solid #333;
border-top:1px solid #333;
border-right:1px solid #333;
}
.main1box{
clear:both;
margin-top:-1px;
border:1px solid #333;
height:181px;
width:400px;
}
#main1 ul{
display: none;
}
#main1 ul.block{
display: block;
}
/*第三种形式*/
.menu2box{
position:relative;
overflow:hidden;
height:22px;
width:400px;
text-align:left;
background: #FFFFff;
}
#tabs2 {
height: 200px;
width: 400px;
border: 1px solid #cbcbcb;
background-color: #f2f6fb;
}
#tip2{
position:absolute;
top:0;
left:0;
height:22px;
line-height:22px;
z-index:0;
width:100px;
background: #f2f6fb;
}
#menu2{
position:absolute;
top:0;
left:0;
z-index:1;
}
#menu2 li{
display:block;
float: left;
padding: 4px 0;
width:100px;
text-align: center;
cursor:pointer;
}
-->
</style>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
/*第三种形式 利用一个背景层定位*/
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
function nowtab(m,n){
if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
document.getElementById("tip"+m).style.left=n*100+'px';
document.getElementById("main2").innerHTML=m3[n];
}
//-->
</script>
</head>
<body>
<br />
<br />
<!--第一种形式-->
<div id="tabs0">
<ul class="menu0" id="menu0">
<li onclick="setTab(0,0)" class="hover">新闻</li>
<li onclick="setTab(0,1)">评论</li>
<li onclick="setTab(0,2)">技术</li>
<li onclick="setTab(0,3)">点评</li>
</ul>
<div class="main" id="main0">
<ul class="block"><li>新闻列表</li></ul>
<ul><li>评论列表</li></ul>
<ul><li>技术列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
<br />
<br />
<!--第二种形式-->
<div id="tabs1">
<div class="menu1box">
<ul id="menu1">
<li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
<li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
<li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
<li onmouseover="setTab(1,3)"><a href="#">点评</a></li>
</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
<ul class="block"><li>新闻列表</li></ul>
<ul><li>评论列表</li></ul>
<ul><li>技术列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
</div>
<br />
<br />
<!--第三种形式-->
<div id="tabs2">
<div class="menu2box">
<div id="tip2"></div>
<ul id="menu2">
<li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
<li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
<li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
<li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
</ul>
</div>
<div class="main" id="main2">
新闻内容
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br /><p><a href="#" target="_blank">苏打绿</a></p>
<br />
</body>
</html>
不知道你要的是不是这个效果：
http://www.psufool.cn/effects/slide/
源码下载地址：http://www.psufool.cn/effects/slide/slide.rar
是这样，联系我啊
请在百度里输入 JS滑动门效果
网页设计需要学习哪些技术
要制作网页就需要架设服务器来调试你做出来的网页，有iis等很多种，可以在网上搜索得到。3、css语言 层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本...
网页用什么字体和大小网页用什么字体和大小有关
2.DIVCSS，这是一种前台网页布局的技术。使用这项技术，搜索引擎可以更好地抓取网页，加快用户打开页面的‘速度’；3.PHOTOSHOP，是平面设计师常用的工具。网页设计其实是平面设计的一种，但它不同于平面设计，因为它必须符合网页制作的一些规范。4.DREAMWEAVER这种专业的网页制作工具，用PHOTOSHOP设计一个...
网页用什么字体好网页用什么字体好看
2.DIVCSS,这是一种前台网页布局的技术。使用这项技术,搜索引擎可以更好地抓取网页,加快用户打开页面的‘速度’; 3.PHOTOSHOP,是平面设计师常用的工具。网页设计其实是平面设计的一种,但它不同于平面设计,因为它必须符合网页制作的一些规范。 4.DREAMWEAVER这种专业的网页制作工具,用PHOTOSHOP设计一个网页平面,只是一...
如何通过html和css完成下拉菜单的制作?
DOCTYPE HTML> 纯 CSS 多级菜单 .menu{} .menu ul,.menu li{margin:0; padding:0;list-style:none outside;} .menu>ul{overflow:auto; display:inline-block;} .menu a,.menu span{ cursor:default; height:30px; line-height:30px; padding:0 5px; display:block; ...
网页设计常用哪些字体
1,了解网页的程序实现,作为网页设计师,当然不必跟程序员一样会书写脚本代码,但是必须要了解网页的程序实现方式,因为现在互联网90%以上的网站都是动态网页,都是需要动态程序支持的,所以在做网页设计的时候需要考虑页面动态程序的实现; 2,DIV+CSS,这是一种网页前台排版布局的技术,利用这种技术可以更好的使搜索引擎爬行...
如何css控制div始终在整个页面最底部
document.write (''+ClosebuttonHtml+''+AdContentHtml+'');var Toppx = window.screen.height-AdDivH;document.getElementById("Javascript.LeftDiv").style.top=document.body.scrollTop+Toppx;} window.onscroll=scall;window.onresize=scall;window.onload=scall;...
HTML的有序列表设置成大写罗马数字,怎么让第一项从IV开始显示
li{ list-style-type: upper-roman;}
前端如果有成千上万的页面该如何处理
有一个办法是将几个图片合并成一个，合并之后的图像叫做一个sprite，这个功能在淘宝你也会发现，在CSS中改变背景层的位置，就能准确的把特定部分的图像显示出来。比如Twitter Bootstrap利用sprites来制作内部图标，访问http:\/\/getbootstrap.com\/2.3.2\/ 你会了解更多 在CSS中，你可以参照以下方式，显示你...
关于选用DOCTYPE及DOCTYPE对页面css及js的影响
调用不成功则说明你的代码不符合你上面定义所使用的dtd规范 DTD\/xhtml1-transitional.dtd 你可以删除试试
bootstrap轮播图模板-如何用Bootstrap制作轮播图
Bootstrap是Twitter推出的一个用于前端开发的开源工具包,并没有制作任何前端页面的功能。如果要实现轮播可以通过一下代码实现: __adding:0;_argin:0;_ist-style-type:_one;_body__ackground-color:#222222_a,_mg__order:0;_body__ont:12px\/180%_rial,_elvetica,_ans-serif,"新宋体";_\/*_em...
勤荷热淋： 是部分公用才对.比如所有页面的头部脚部一般是一样的,就放在一个公用css里如public.css,每个页面都要链接这个css.不一样的部分单独写一个,如主页就做一个index.,css,列表页就写一个list.css,所有列表页就可以链接这个css表,内容页也可以写一个content.css.按照以上做法,每个页都链接了两个css.其实一般还有一个重置标签的css要单独放一个reset.css,这个css你以后做其他网站就可以再用了.
惠来县17577665044： css+div 网页充满整个浏览器窗口 - ？
勤荷热淋： 可以在三个DIV的外面再加一个父级的DIV,然后设置这个DIV的高度为100%.不过直接设置高度为100%对于大多数浏览器无效.一个对象的高度是否可以使用百分比显示,取决于对象的父级对象.IE中认为父级对象为body FF等标准浏览器认为为HTML html,body{ margin:0px; height:100%; }#high{ background-color:#CCCCCC; border:2px solid #f00; width:300px; height:100%; }
惠来县17577665044： div+css大作业,只要做一个简单的网页就行,主题随意,非常感谢 - ？
勤荷热淋： 没明白你的意思..简单的? 那就插入一个DIV标签.在标签中输入文字..随便找什么文字啊.文章之类的.然后在文字最前面把鼠标停止在那里.然后再创建个DIV.插入一副图片.然后选中该DIV创建个CSS样式.这不就简单的网页出来了啊.
惠来县17577665044： 怎么实现CSS+DIV分页效果 - ？
勤荷热淋： css+div只能做分页的样式,就是页面效果,不能负责让分页实现,要实现至少需要运用到javascript脚本或其他的!你可以去查查xml的数据岛功能,一个html页面链接到一个xml数据,自动实现分页,很方便很好用,不过只有ie可以显示!
惠来县17577665044： 用div做一个时时添加新内容的网站,一个页面添加十个div后如何自动分页?这类动态网站该如何维护添 - ？
勤荷热淋： 没法给你帮助,涉及内容太多.分页通常有两种,一种的数据库字段查询分页,另外一种就是静态网页模拟.第一种:你的数据库有100条数据,每次读取10条显示出来存放在10个DIV中 这一页显示的数据库内容为1-10,第二页显示11-20,以此类推,这样的分页技术需要用动态代码对数据库进行操作,对没基础的人相对复杂.第二种:静态模拟,如果每页显示10条数据,总共有100条,就准备10个静态页,分别为1.html,2.html....10.html1.html存放1-10条数据,2.html存放11-20条数据.每一页都有一个公共的连接用来跳转到具体哪个页面.
惠来县17577665044： 怎么用div布局加css样式做网页 - ？
勤荷热淋： 在div里设置id或者class<div id=＂aaa＂></div><div class=＂bbb＂></div> 然后在css样式表里定义样式#aaa{ }.bbb{ }--------------- DIV+CSS通用样式布局实例代码 对于刚开始接触DIV+CSS的同学来说,记住那些对象属性以及对应的值就很困难了...
惠来县17577665044： 网站大体格式用div+css写的,写了一个页脚,如何实现多个页面同时调用这个页脚?给出代码,谢谢! - ？
勤荷热淋： 内置框架iframe挺方便的,如果只是单纯静态页,唯一办法就是iframe
惠来县17577665044： 怎么用css+div布局一个网页!具体的思路是怎么样的?先后顺序是怎么的? - ？
勤荷热淋： div+css怎么布局div+css布局现在是主流,能提高网页加载速度,提高后期代码维护效率.步骤阅读 方法/步骤 >01 div 所谓<div>标签我们可以理解为一个盒子. 例如:<div class=＂top＂ style='border:1px solid #000;background-color:#EEE'>...
惠来县17577665044： 怎么用div+css怎么制作网页,求过程 - ？
勤荷热淋： 您好,div+css.首先,您要先确定版面.也就是设计版面.然后用css和div编写.(也要有图片素材) 比如:规定一个宽度为1000像素,高度为500像素,背景颜色为黑色,而且居中的区域.先确定css.#tese{ background:#000;width:1000px;height:500px;margin:auto;} 接着就是div.希望能够帮到您,谢谢.
惠来县17577665044： 用DIV+CSS制作简单网页 - ？
勤荷热淋： 1、布局先把大框架确定,再逐步把内部的细节构建出来,从层级关系来看就是由外往内布局; 2、如果你对divcss不是很熟悉,那么你可以先以图片作为背景图片代替 3、如果对布局定位不是很熟练,那么可以暂时以绝对位置来布局 4、自己不...
