以下是 jQuery UI工具风格主题js特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery UI���߷������ </title>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
// Autocomplete
var countryList = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"];
$("#countries").autocomplete({
source: countryList
});
// Accordion
$("#accordion").accordion({ header: "h3" });
// Buttons
$(".buttons").button();
// Button Set
$("#radio1").buttonset();
// Tabs
$('#tabs').tabs();
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
modal: true,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
// Datepicker
$('#datepicker').datepicker({
inline: true
});
// Slider
$('.slider').slider({
range: true,
values: [17, 67]
});
// Progressbar
$(".progressbar").progressbar({
value: 20
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<link type="text/css" href="css/ui-selene/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<link rel="stylesheet" href="site/css/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="container">
<div class="content">
<header>
<div class="color-line">
</div>
</header>
<div class="space">
<h2>Selene: jQuery UI Theme</h2>
<p>This page demonstrates all available components of the jQuery UI.</p>
</div>
<div class="component">
<!-- Slider -->
<h2 class="demoHeaders">Slider</h2>
<div class="slider"></div>
<div class="slider blue"></div>
<div class="slider red"></div>
<div class="slider yellow"></div>
<div class="slider orange"></div>
<div class="slider violet"></div>
</div><!-- .component -->
<div class="component">
<!-- Button -->
<h2 class="demoHeaders">UI Button</h2>
<p>
<a class="buttons"id="linkButton" href="#"><A href="#"> Button</a>
<input class="buttons" type="button" id="inputButton" value="Input Button" />
<input class="buttons" type="submit" id="submitButton" value="Submit Button" />
</p>
<p>
<a class="buttons ui-button-blue"id="linkButton" href="#"><A href="#"> Button</a>
<input class="buttons ui-button-blue" type="button" id="inputButton" value="Input Button" />
<input class="buttons ui-button-blue" type="submit" id="submitButton" value="Submit Button" />
</p>
<p>
<a class="buttons ui-button-green"id="linkButton" href="#"><A href="#"> Button</a>
<input class="buttons ui-button-green" type="button" id="inputButton" value="Input Button" />
<input class="buttons ui-button-green" type="submit" id="submitButton" value="Submit Button" />
</p>
</div><!-- .component -->
<div class="clear"></div>
<div class="component" style="height: 400px">
<!-- Datepicker -->
<h2 class="demoHeaders">Datepicker</h2>
<div id="datepicker"></div>
</div><!-- .component -->
<div class="component">
<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
<h2 class="demoHeaders">Dialog</h2>
<p><a href="#" id="dialog_link" class="ui-button ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div><!-- .component -->
<div class="component">
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
<!-- .accordion -->
</div><!-- .component -->
<div class="clear">
</div>
<div class="component" style="width: 94%">
<!-- Progressbar -->
<h2 class="demoHeaders">Progressbar</h2>
<p><div class="progressbar"></div></p>
<p><div class="progressbar blue"></div></p>
</div><!-- .component -->
<div class="clear">
</div>
<div class="component">
<h2 class="demoHeaders">Button Toggle</h2>
<div id="radio1">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</div><!-- .component -->
<div class="component">
<!-- Autocompleter -->
<h2 class="demoHeaders">Autocompleter</h2>
<input type="text" class="text" id="countries" />
</div>
<div class="clear">
</div>
<div class="component">
<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
</div><!-- .component -->
<div class="component">
<!-- Highlight / Error -->
<h2 class="demoHeaders">Highlight / Error</h2>
<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all">
<p><span class="ui-icon ui-icon-info"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.</p>
</div>
</div>
<br/>
<div class="ui-widget">
<div class="ui-state-error ui-corner-all">
<p><span class="ui-icon ui-icon-alert"></span>
<strong>Alert:</strong> Sample ui-state-error style.</p>
</div>
</div>
</div><!-- .component -->
<div class="clear">
</div>
<div class="component">
<h2 class="demoHeaders">Framework Icons (content color preview)</h2>
<ul id="icons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-n"><span class="ui-icon ui-icon-carat-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-ne"><span class="ui-icon ui-icon-carat-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-e"><span class="ui-icon ui-icon-carat-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-se"><span class="ui-icon ui-icon-carat-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-s"><span class="ui-icon ui-icon-carat-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-sw"><span class="ui-icon ui-icon-carat-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-w"><span class="ui-icon ui-icon-carat-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-1-nw"><span class="ui-icon ui-icon-carat-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-n-s"><span class="ui-icon ui-icon-carat-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-carat-2-e-w"><span class="ui-icon ui-icon-carat-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li>
</ul>
</div><!-- .component -->
<div class="component">
<h2 class="demoHeaders">Overlay and Shadow Classes</h2>
<div style="position: relative; height: 440px; padding:1% 4%; overflow:hidden;" class="fakewindowcontain">
<p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p>
<!-- ui-dialog -->
<div class="ui-overlay"><div class="ui-widget-overlay"></div><div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 152px; position: absolute; left: 50px; top: 130px;"></div></div>
<div style="position: absolute; width: 280px; height: 130px;left: 50px; top: 130px; padding: 10px;" class="ui-widget ui-widget-content ui-corner-all">
<div class="ui-dialog-content ui-widget-content" style="background: none; border: 0;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>
</div>
</div><!-- .component -->
</div><!-- .content -->
</div>
<!-- .container -->
</body>
</html>
JS代码(html5.js):
/*! HTML5 Shiv vpre3.6 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed Uncompressed source:https://github.com/aFarkas/html5shiv */
(function(a,b){
function h(a,b){
var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;
return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}
function i(){
var a=l.elements;
return typeof a=="string"?a.split(" "):a}
function j(a){
var b={
}
,c=a.createElement,f=a.createDocumentFragment,g=f();
a.createElement=function(a){
if(!l.shivMethods)return c(a);
var f;
return b[a]?f=b[a].cloneNode():e.test(a)?f=(b[a]=c(a)).cloneNode():f=c(a),f.canHaveChildren&&!d.test(a)?g.appendChild(f):f}
,a.createDocumentFragment=Function("h,f","return function(){
var n=f.cloneNode(),c=n.createElement;
h.shivMethods&&("+i().join().replace(/\w+/g,function(a){
return c(a),g.createElement(a),'c("'+a+'")'}
)+");
return n}
")(l,g)}
function k(a){
var b;
return a.documentShived?a:(l.shivCSS&&!f&&(b=!!h(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
display:block}
audio{
display:none}
canvas,video{
display:inline-block;
*display:inline;
*zoom:1}
[hidden]{
display:none}
audio[controls]{
display:inline-block;
*display:inline;
*zoom:1}
mark{
background:#FF0;
color:#000}
")),g||(b=!j(a)),b&&(a.documentShived=b),a)}
var c=a.html5||{
}
,d=/^<|^(?:button|form|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i,f,g;
(function(){
var c=b.createElement("a");
c.innerHTML="<xyz></xyz>",f="hidden"in c,f&&typeof injectElementWithStyles=="function"&&injectElementWithStyles("#modernizr{
}
",function(b){
b.hidden=!0,f=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle).display=="none"}
),g=c.childNodes.length==1||function(){
try{
b.createElement("a")}
catch(a){
return!0}
var c=b.createDocumentFragment();
return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}
()}
)();
var l={
elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:k}
;
a.html5=l,k(b)}
)(this,document)CSS代码(master.css):
html{-webkit-font-smoothing:antialiased;}
body{font:12px "Helvetica Neue",Helvetica,Arial,sans-serif;background:#919191;color:#666;margin:0;}
p{line-height:22px}
a{color:#333;font-weight:bold;text-decoration:underline;}
a:hover{text-decoration:underline;}
.container{width:820px;margin:auto;box-shadow:0 2px 2px black}
.content{background:white;display:block;overflow:hidden;padding-bottom:2%;}
.color-line{width:100%;background:#26E6A0;background-image:-webkit-gradient(linear,0 0,458 0,from(#4d6fbc),color-stop(0.004,#4d6fbc),color-stop(0.004,#4f6ebc),color-stop(0.01,#4f6eba),color-stop(0.01,#516dba),color-stop(0.019,#536bb5),color-stop(0.028,#5769b4),color-stop(0.03,#576ab2),color-stop(0.045,#5c64ae),color-stop(0.045,#5f63ac),color-stop(0.056,#6261a7),color-stop(0.056,#6560a5),color-stop(0.063,#665ea4),color-stop(0.063,#685da2),color-stop(0.067,#695c9f),color-stop(0.074,#70599e),color-stop(0.078,#70589b),color-stop(0.085,#735696),color-stop(0.087,#765496),color-stop(0.111,#864888),color-stop(0.12,#8a4682),color-stop(0.133,#944079),color-stop(0.137,#964077),color-stop(0.146,#9d3a70),color-stop(0.148,#9e3a70),color-stop(0.159,#a63767),color-stop(0.165,#aa3565),color-stop(0.168,#ad3362),color-stop(0.172,#af3361),color-stop(0.183,#b62f59),color-stop(0.185,#b82d56),color-stop(0.218,#cb2843),color-stop(0.246,#db2536),color-stop(0.406,#f03026),color-stop(0.46,#f33824),color-stop(0.462,#f13924),color-stop(0.515,#f24124),color-stop(0.604,#f35322),color-stop(0.604,#f1541f),color-stop(0.615,#f25520),color-stop(0.615,#f2571e),color-stop(0.622,#f2571e),color-stop(0.622,#f1591f),color-stop(0.641,#f25b20),color-stop(0.641,#f15c1d),color-stop(0.655,#f35e1f),color-stop(0.655,#f15f1c),color-stop(0.7,#f36a18),color-stop(0.703,#f26c19),color-stop(0.762,#f27714),color-stop(0.762,#f27910),color-stop(0.772,#f37a12),color-stop(0.772,#f27b14),color-stop(0.79,#f27d10),color-stop(0.79,#f2800d),color-stop(0.803,#f3810f),color-stop(0.803,#f2830b),color-stop(0.814,#f3840d),color-stop(0.814,#f28506),color-stop(0.855,#f48b05),color-stop(0.855,#f28c04),color-stop(0.888,#f39200),color-stop(0.914,#f49700),color-stop(0.914,#f29800),color-stop(0.93,#f39900),color-stop(0.93,#f39b00),color-stop(0.951,#f39f00),color-stop(0.995,#f4a300),color-stop(0.995,#f2a400),to(#f2a400));background-image:-webkit-linear-gradient(360deg,#4d6fbc,#4d6fbc 0.4%,#4f6ebc 0.4%,#4f6eba 1%,#516dba 1%,#536bb5 1.9%,#5769b4 2.8%,#576ab2 3%,#5c64ae 4.5%,#5f63ac 4.5%,#6261a7 5.6%,#6560a5 5.6%,#665ea4 6.3%,#685da2 6.3%,#695c9f 6.7%,#70599e 7.4%,#70589b 7.8%,#735696 8.5%,#765496 8.7%,#864888 11.1%,#8a4682 12%,#944079 13.3%,#964077 13.7%,#9d3a70 14.6%,#9e3a70 14.8%,#a63767 15.9%,#aa3565 16.5%,#ad3362 16.8%,#af3361 17.2%,#b62f59 18.3%,#b82d56 18.5%,#cb2843 21.8%,#db2536 24.6%,#f03026 40.6%,#f33824 46%,#f13924 46.2%,#f24124 51.5%,#f35322 60.4%,#f1541f 60.4%,#f25520 61.5%,#f2571e 61.5%,#f2571e 62.2%,#f1591f 62.2%,#f25b20 64.1%,#f15c1d 64.1%,#f35e1f 65.5%,#f15f1c 65.5%,#f36a18 70%,#f26c19 70.3%,#f27714 76.2%,#f27910 76.2%,#f37a12 77.2%,#f27b14 77.2%,#f27d10 79%,#f2800d 79%,#f3810f 80.3%,#f2830b 80.3%,#f3840d 81.4%,#f28506 81.4%,#f48b05 85.5%,#f28c04 85.5%,#f39200 88.8%,#f49700 91.4%,#f29800 91.4%,#f39900 93%,#f39b00 93%,#f39f00 95.1%,#f4a300 99.5%,#f2a400 99.5%,#f2a400);background-image:-moz-linear-gradient(360deg,#4d6fbc,#4d6fbc 0.4%,#4f6ebc 0.4%,#4f6eba 1%,#516dba 1%,#536bb5 1.9%,#5769b4 2.8%,#576ab2 3%,#5c64ae 4.5%,#5f63ac 4.5%,#6261a7 5.6%,#6560a5 5.6%,#665ea4 6.3%,#685da2 6.3%,#695c9f 6.7%,#70599e 7.4%,#70589b 7.8%,#735696 8.5%,#765496 8.7%,#864888 11.1%,#8a4682 12%,#944079 13.3%,#964077 13.7%,#9d3a70 14.6%,#9e3a70 14.8%,#a63767 15.9%,#aa3565 16.5%,#ad3362 16.8%,#af3361 17.2%,#b62f59 18.3%,#b82d56 18.5%,#cb2843 21.8%,#db2536 24.6%,#f03026 40.6%,#f33824 46%,#f13924 46.2%,#f24124 51.5%,#f35322 60.4%,#f1541f 60.4%,#f25520 61.5%,#f2571e 61.5%,#f2571e 62.2%,#f1591f 62.2%,#f25b20 64.1%,#f15c1d 64.1%,#f35e1f 65.5%,#f15f1c 65.5%,#f36a18 70%,#f26c19 70.3%,#f27714 76.2%,#f27910 76.2%,#f37a12 77.2%,#f27b14 77.2%,#f27d10 79%,#f2800d 79%,#f3810f 80.3%,#f2830b 80.3%,#f3840d 81.4%,#f28506 81.4%,#f48b05 85.5%,#f28c04 85.5%,#f39200 88.8%,#f49700 91.4%,#f29800 91.4%,#f39900 93%,#f39b00 93%,#f39f00 95.1%,#f4a300 99.5%,#f2a400 99.5%,#f2a400);background-image:-o-linear-gradient(360deg,#4d6fbc,#4d6fbc 0.4%,#4f6ebc 0.4%,#4f6eba 1%,#516dba 1%,#536bb5 1.9%,#5769b4 2.8%,#576ab2 3%,#5c64ae 4.5%,#5f63ac 4.5%,#6261a7 5.6%,#6560a5 5.6%,#665ea4 6.3%,#685da2 6.3%,#695c9f 6.7%,#70599e 7.4%,#70589b 7.8%,#735696 8.5%,#765496 8.7%,#864888 11.1%,#8a4682 12%,#944079 13.3%,#964077 13.7%,#9d3a70 14.6%,#9e3a70 14.8%,#a63767 15.9%,#aa3565 16.5%,#ad3362 16.8%,#af3361 17.2%,#b62f59 18.3%,#b82d56 18.5%,#cb2843 21.8%,#db2536 24.6%,#f03026 40.6%,#f33824 46%,#f13924 46.2%,#f24124 51.5%,#f35322 60.4%,#f1541f 60.4%,#f25520 61.5%,#f2571e 61.5%,#f2571e 62.2%,#f1591f 62.2%,#f25b20 64.1%,#f15c1d 64.1%,#f35e1f 65.5%,#f15f1c 65.5%,#f36a18 70%,#f26c19 70.3%,#f27714 76.2%,#f27910 76.2%,#f37a12 77.2%,#f27b14 77.2%,#f27d10 79%,#f2800d 79%,#f3810f 80.3%,#f2830b 80.3%,#f3840d 81.4%,#f28506 81.4%,#f48b05 85.5%,#f28c04 85.5%,#f39200 88.8%,#f49700 91.4%,#f29800 91.4%,#f39900 93%,#f39b00 93%,#f39f00 95.1%,#f4a300 99.5%,#f2a400 99.5%,#f2a400);background-image:-webkit-linear-gradient(360deg,#FA4D3D,#f96c42);background-image:-moz-linear-gradient(360deg,#FA4D3D,#f96c42);background-image:-o-linear-gradient(360deg,#FA4D3D,#f96c42);height:2px;display:block;top:0;z-index:10000;}
header{background:black;display:block;background-image:-webkit-gradient(linear,0 0,0 48,color-stop(0.104,#2e2e2e),to(#000));background-image:-webkit-linear-gradient(#2e2e2e 10.4%,#000);background-image:-moz-linear-gradient(#2e2e2e 10.4%,#000);background-image:-o-linear-gradient(#2e2e2e 10.4%,#000);box-shadow:0 2px 2px rgba(0,0,0,.4);z-index:1000;overflow:hidden;}
header h1{margin:0;padding:0;margin-left:2%}
header h1 a{background:url('http://gravityonmars.com/wp-content/themes/gom3/images/images.png') no-repeat 0 0;width:126px;height:18px;float:left;display:inline-block;text-indent:-1000em;margin:20px auto 20px auto;padding:0;}
header .follow-us{float:right;color:white;font-weight:bold;font-size:10px;text-transform:uppercase;background:#000;color:#fff;border-radius:5px;padding:0 10px 0 6px;margin-top:12px;display:inline-block;margin-right:10px;text-decoration:none;background-image:-webkit-gradient(linear,0 0,0 48,color-stop(0.104,#666),to(#444));background-image:-webkit-linear-gradient(#666 10.4%,#444);background-image:-moz-linear-gradient(#666 10.4%,#444);background-image:-o-linear-gradient(#666 10.4%,#444);border:1px solid black;box-shadow:0 2px 2px black,0 1px 0 rgba(255,255,255,.2) inset;text-shadow:0 -1px 1px black;line-height:30px;}
header .follow-us:hover{background-image:-webkit-gradient(linear,0 0,0 48,color-stop(0.104,#666),to(#333));background-image:-webkit-linear-gradient(#666 10.4%,#333);background-image:-moz-linear-gradient(#666 10.4%,#333);background-image:-o-linear-gradient(#666 10.4%,#333);}
header .follow-us:active{background-image:-webkit-gradient(linear,0 0,0 48,color-stop(0.104,#333),to(#666));background-image:-webkit-linear-gradient(#333 10.4%,#666);background-image:-moz-linear-gradient(#333 10.4%,#666);background-image:-o-linear-gradient(#333 10.4%,#666);}
header .follow-us i{display:inline-block;background:url('../images/twitter.png') no-repeat 0 0;width:18px;height:18px;margin-top:6px;float:left;margin-right:8px;padding-right:6px;border-right:1px solid #444;box-shadow:1px 0 0 rgba(255,255,255,.1);}
header .follow-us strong{color:#38caff;}
header .follow-us.github i{background:url('../images/github.png') no-repeat 0 0;width:11px;height:18px;padding-right:4px;margin-right:6px;}
header .follow-us.github strong{color:#fec19b;}
.demoHeaders{border-bottom:1px solid #f1f1f1;margin:40px 0 20px 0;padding-bottom:10px;text-transform:uppercase;font-size:12px;}
.space{padding:1% 2% 0 2%;}
input.text{min-width:300px}
#dialog_link{padding-left:1.8em;text-decoration:none;position:relative;}
#dialog_link span.ui-icon{margin:0 5px 0 0;position:absolute;left:.3em;top:50%;margin-top:-8px;}
ul#icons{margin:0;padding:0;}
ul#icons li{margin:2px;position:relative;padding:4px 0;cursor:pointer;float:left;list-style:none;}
ul#icons span.ui-icon{float:left;margin:0 4px;}
.left,.right{width:46%;float:left;margin:0 2% 2% 2%}
.slider{margin-bottom:20px}
.component{float:left;width:46%;margin:0 2%}
.clear{display:block;clear:both}
分享到QQ
分享到微博
微信扫一扫
