<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>Tabs带图形按钮选项卡切换 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/color.css">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/font-awesome-ie7.min.css" />
<![endif]-->
<!--[if lte IE 9]>
<style type="text/css">
.container .label{
top: 15px;
}
.label#l2{
top: 70px;
}
.label#l3{
top: 125px;
}
.label#l4{
top:180px;
}
</style>
<![endif]-->
</head>
<body>
<br>
<!-- Start Tabs -->
<div class="tabs">
<!-- Start Container tab1 -->
<div id="tab1" class="container">
<div class="label" id="l1">
<h5><a href="#tab1" id="a1"><i class="icon-dashboard" id="i1"></i>Tab One</a></h5>
</div>
<div class="content left" id="content1">
<h4>Animated Tabs</h4>
<p>1-CSS3 is, like HTML5, a new standard for web designers. It promises many new formatting controls to make web pages look beautiful, including drop shadows for text, rounded corners on boxes, background gradients,borders made of graphics, and even animated transitions from one set of CSS properties to another. Dreamweaver CS6 includes code-hinting for CSS3 and adds many CSS3 properties to the CSS Styles panel. Dreamweaver CS6 also adds helpful tools for some of CSS3’s most exciting offerings: the new web fonts manager frees you from the boredom
of the same limited set of fonts (Arial, Helvetica, and Times New Roman, for example) that web designers have been using for years.</p>
<h6><i class="icon-quote-left"></i>HTML used to be the only language you needed to create web pages. You could build them with colorful text and graphics, and make words jump out using different fonts, font sizes, and font colors. But today, you can’t add much visual stimulation to a site without CSS. CSS is a formatting language that lets you design pages with sophisticated layouts and enhanced text.<i class="icon-quote-right"></i></h6>
</div>
</div>
<!-- End Container tab1 -->
<!-- Start Container tab2 -->
<div id="tab2" class="container">
<div class="label" id="l2">
<h5><a href="#tab2" id="a2"><i class="icon-leaf" id="i2"></i>Tab Two</a></h5>
</div>
<div class="content" id="content2">
<h4>Animated Tabs</h4>
<p>2-CSS3 is, like HTML5, a new standard for web designers. It promises many new formatting controls to make web pages look beautiful, including drop shadows for text, rounded corners on boxes, background gradients,borders made of graphics, and even animated transitions from one set of CSS properties to another. Dreamweaver CS6 includes code-hinting for CSS3 and adds many CSS3 properties to the CSS Styles panel. Dreamweaver CS6 also adds helpful tools for some of CSS3’s most exciting offerings: the new web fonts manager frees you from the boredom
of the same limited set of fonts (Arial, Helvetica, and Times New Roman, for example) that web designers have been using for years.</p>
<h6><i class="icon-quote-left"></i>HTML used to be the only language you needed to create web pages. You could build them with colorful text and graphics, and make words jump out using different fonts, font sizes, and font colors. But today, you can’t add much visual stimulation to a site without CSS. CSS is a formatting language that lets you design pages with sophisticated layouts and enhanced text.<i class="icon-quote-right"></i></h6>
</div>
</div>
<!-- End Container tab2 -->
<!-- Start Container tab3 -->
<div id="tab3" class="container">
<div class="label" id="l3">
<h5><a href="#tab3"><i class="icon-trophy" id="i3"></i>Tab Three</a></h5>
</div>
<div class="content" id="content3">
<h4>Animated Tabs</h4>
<p>3-CSS3 is, like HTML5, a new standard for web designers. It promises many new formatting controls to make web pages look beautiful, including drop shadows for text, rounded corners on boxes, background gradients,borders made of graphics, and even animated transitions from one set of CSS properties to another. Dreamweaver CS6 includes code-hinting for CSS3 and adds many CSS3 properties to the CSS Styles panel. Dreamweaver CS6 also adds helpful tools for some of CSS3’s most exciting offerings: the new web fonts manager frees you from the boredom
of the same limited set of fonts (Arial, Helvetica, and Times New Roman, for example) that web designers have been using for years.</p>
<h6><i class="icon-quote-left"></i>HTML used to be the only language you needed to create web pages. You could build them with colorful text and graphics, and make words jump out using different fonts, font sizes, and font colors. But today, you can’t add much visual stimulation to a site without CSS. CSS is a formatting language that lets you design pages with sophisticated layouts and enhanced text.<i class="icon-quote-right"></i></h6>
</div>
</div>
<!-- End Container tab2 -->
<!-- Start Container tab4 -->
<div id="tab4" class="container">
<div class="label" id="l4">
<h5><a href="#tab4"><i class="icon-gift" id="i4"></i>Tab Four</a></h5>
</div>
<div class="content" id="content4">
<h4>Animated Tabs</h4>
<p>4-CSS3 is, like HTML5, a new standard for web designers. It promises many new formatting controls to make web pages look beautiful, including drop shadows for text, rounded corners on boxes, background gradients,borders made of graphics, and even animated transitions from one set of CSS properties to another. Dreamweaver CS6 includes code-hinting for CSS3 and adds many CSS3 properties to the CSS Styles panel. Dreamweaver CS6 also adds helpful tools for some of CSS3’s most exciting offerings: the new web fonts manager frees you from the boredom
of the same limited set of fonts (Arial, Helvetica, and Times New Roman, for example) that web designers have been using for years.</p>
<h6><i class="icon-quote-left"></i>HTML used to be the only language you needed to create web pages. You could build them with colorful text and graphics, and make words jump out using different fonts, font sizes, and font colors. But today, you can’t add much visual stimulation to a site without CSS. CSS is a formatting language that lets you design pages with sophisticated layouts and enhanced text.<i class="icon-quote-right"></i></h6>
</div>
</div>
<!-- End Container tab4 -->
</div>
<!-- End Tabs -->
<div style="text-align:center;clear:both">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、世界之窗。</p><br>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
Tabs带图形按钮选项卡切换.zip
版权申诉
79 浏览量
2022-11-25
10:21:47
上传
评论
收藏 422KB ZIP 举报
Tabs带图形按钮选项卡切换.zip （17个子文件） 
Tabs带图形按钮选项卡切换 
Tabs带图形按钮选项卡切换.jpg 87KB jiaoben1685 css 
color.css 2KB reset.css 654B stylesheet.css 879B font fontawesome-webfont.eot 25KB exo-demibold.eot 36KB fontawesome-webfont.woff 29KB
exo-demibold.svg 244KB exo-demibold.ttf 98KB exo-demibold.woff 44KB fontawesome-webfont.ttf 54KB font-awesome.min.css 15KB style.css 2KB images 
back.png 7KB
index.html 7KB js jquery-1.9.1.js 262KB tabs.js 694B资源评论
