<!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>