前端教学案例七
一、index.html源码内容
<!DOCTYPE html>
<html>
<head>
<title>Home - Home Page | Hosting - Free Website Template from Templates.com</title>
<meta name="description" content="Place your description here">
<meta name="keywords" content="put, your, keyword, here">
<meta name="author" content="Templates.com - website templates provider">
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/maxheight.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>
<script type="text/javascript" src="js/jquery.faded.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
$(function(){
$("#faded").faded({
speed: 500,
crossfade: true,
autoplay: 10000,
autopagination:false
});
$('#domain-form').jqTransform({imgPath:'jqtransformplugin/img/'});
});
</script>
<!--[if lt IE 7]>
<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body id="page1" onLoad="new ElementMaxHeight();">
<div>
<!-- header -->
<header>
<div>
<div>
<div>
<div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="hosting.html">Hosting</a></li>
<li><a href="solutions.html">Solutions</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="contacts.html">Contacts</a></li>
</ul>
</nav>
<h1><a href="index.html"><span>Smart</span>Net</a></h1>
</div>
</div>
</div>
<span>24/7 Sales & Support + 1 800 234 5678 l <a href="#">Hot Deals</a> l <a href="#">Search</a></span>
<form action="" id="login-form">
<fieldset>
<span>
<input type="text" value="Username" onFocus="if(this.value=='Username'){this.value=''}" onBlur="if(this.value==''){this.value='Username'}">
</span>
<span>
<input type="password" value="Password" onFocus="if(this.value=='Password'){this.value=''}" onBlur="if(this.value==''){this.value='Password'}">
</span>
<a href="#" onClick="document.getElementById('login-form').submit()"><span><span>Login</span></span></a>
<span><a href="#">Forgot Password?</a><br/><a href="#">Register</a></span>
</fieldset>
</form>
</div>
</header>
<!-- content -->
<section id="content">
<div>
<div id="faded">
<ul>
<li><img src="images/slide-title1.gif"><a href="#"><span><span>Learn More</span></span></a></li>
<li><img src="images/slide-title4.gif"><a href="#"><span><span>Learn More</span></span></a></li>
<li><img src="images/slide-title3.gif"><a href="#"><span><span>Learn More</span></span></a></li>
<li><img src="images/slide-title2.gif"><a href="#"><span><span>Learn More</span></span></a></li>
</ul>
<ul>
<li><a href="#" rel="0"><span>Web Hosting</span><small>Get more information</small></a></li>
<li><a href="#" rel="1"><span>Broadband</span><small>Get more information</small></a></li>
<li><a href="#" rel="2"><span>Email Hosting</span><small>Get more information</small></a></li>
<li><a href="#" rel="3"><span>Dedicated</span><small>Get more information</small></a></li>
</ul>
</div>
<div>
<div class="wrapper row-1">
<div class="box col-1 maxheight">
<div class="border-right maxheight">
<div class="border-bot maxheight">
<div class="border-left maxheight">
<div class="left-top-corner maxheight">
<div class="right-top-corner maxheight">
<div class="right-bot-corner maxheight">
<div class="left-bot-corner maxheight">
<div>
<h3>Basic Plan</h3>
<ul>
<li><span>Disk space</span>300 Gb</li>
<li><span>Monthly transfer</span>3000 Gb</li>
<li><span>FTP accounts</span>25</li>
<li><span>Email boxes</span>1000</li>
<li><span>Free domains</span>1</li>
</ul>
<span>$ 9.95 p/m</span>
<div><a href="#"><span><span>Learn More</span></span></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box col-2 maxheight">
<div class="border-right maxheight">
<div class="border-bot maxheight">
<div class="border-left maxheight">
<div class="left-top-corner maxheight">
<div class="right-top-corner maxheight">
<div class="right-bot-corner maxheight">
<div class="left-bot-corner maxheight">
<div>
<h3>Economy Plan</h3>
<ul>
<li><span>Disk space</span>500 Gb</li>
<li><span>Monthly transfer</span>5000 Gb</li>
<li><span>FTP accounts</span>50</li>
<li><span>Email boxes</span>2500</li>
<li><span>Free domains</span>2</li>
</ul>
<span>$ 14.95 p/m</span>
<div><a href="#"><span><span>Learn More</span></span></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box col-3 maxheight">
<div class="border-right maxheight">
<div class="border-bot maxheight">
<div class="border-left maxheight">
<div class="left-top-corner maxheight">
<div class="right-top-corner maxheight">
<div class="right-bot-corner maxheight">
<div class="left-bot-corner maxheight">
<div>
<h3>Deluxe Plan</h3>
<ul>
<li><span>Disk space</span>800 Gb</li>
<li><span>Monthly transfer</span>8000 Gb</li>
<li><span>FTP accounts</span>70</li>
<li><span>Email boxes</span>3000</li>
<li><span>Free domains</span>3</li>
</ul>
<span>$ 19.95 p/m</span>
<div><a href="#"><span><span>Learn More</span></span></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box col-4 maxheight">
<div class="border-right maxheight">
<div class="border-bot maxheight">
<div class="border-left maxheight">
<div class="left-top-corner maxheight">
<div class="right-top-corner maxheight">
<div class="right-bot-corner maxheight">
<div class="left-bot-corner maxheight">
<div>
<h3>Unlimited Plan</h3>
<ul>
<li><span>Disk space</span>Unlimited</li>
<li><span>Monthly transfer</span>Unlimited</li>
<li><span>FTP accounts</span>Unlimited</li>
<li><span>Email boxes</span>Unlimited</li>
<li><span>Free domains</span>Unlimited</li>
</ul>
<span>$ 24.95 p/m</span>
<div><a href="#"><span><span>Learn More</span></span></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="wrap row-2">
<article>
<h2>Solutions</h2>
<ul>
<li><img src="images/icon1.gif"><p>Quickly and easily create a Web Page</p><a href="#"><b>Read More</b></a></li>
<li><img src="images/icon2.gif"><p>Share documents any time, any where</p><a href="#"><b>Read More</b></a></li>
<li><img src="images/icon3.gif"><p>24/7 Real Person Customer Support</p><a href="#"><b>Read More</b></a></li>
<li><img src="images/icon4.gif"><p>Online Account Management Tools</p><a href="#"><b>Read More</b></a></li>
</ul>
</article>
<article>
<h2>Register Domain Name</h2>
<form action="" id="domain-form">
<div><img src="images/1page-img.jpg">
<div>
<fieldset>
<span>
<input type="text" value="enter domain name" onFocus="if(this.value=='enter domain name'){this.value=''}" onBlur="if(this.value==''){this.value='enter domain name'}">
</span>
<ul class="checkboxes wrapper">
<li><input type="checkbox"><label>.mx</label></li>
<li><input type="checkbox"><label>.net</label></li>
<li><input type="checkbox"><label>.com</label></li>
<li><input type="checkbox"><label>.eu</label></li>
<li><input type="checkbox"><label>.us.com</label></li>
<li><input type="checkbox"><label>.us.com</label></li>
<li><input type="checkbox"><label>.info</label></li>
<li><input type="checkbox"><label>.mobi</label></li>
<li><input type="checkbox"><label>.co.uk</label></li>
<li><input type="checkbox"><label>.tv</label></li>
</ul>
</fieldset>
</div>
</div>
<div>
<a href="#" class="link2 fleft" onClick="document.getElementById('domain-form').submit()"><span><span>Check Domain</span></span></a>
<ul class="links fleft">
<li><a href="#">Renew a domain</a></li>
<li><a href="#">Transfer a domain</a></li>
<li><a href="#">WHOIS</a></li>
</ul>
</div>
</form>
<h2>Your Domain Name Helps the World to Find You</h2>
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet.</p>
<p>Voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
<a href="#"><span><span>Read More</span></span></a>
</article>
<div></div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- aside -->
<aside>
<div>
<div>
<div>
<div>
<div>
<div class="wrapper line-ver4">
<ul class="list col-1">
<li>Account Manager</li>
<li><a href="#">My Account</a></li>
<li><a href="#">My Renewals</a></li>
<li><a href="#">My Upgrades</a></li>
<li><a href="#">Account Settings</a></li>
<li><a href="#">Customer Information</a></li>
<li><a href="#">Order History</a></li>
</ul>
<ul class="list col-2">
<li>Shopping</li>
<li><a href="#">Offer Disclaimers</a></li>
<li><a href="#">Domain Search</a></li>
<li><a href="#">Product Catalog</a></li>
<li><a href="#">Producr Advisor</a></li>
<li><a href="#">Gift Cards</a></li>
<li><a href="#">Mobile</a></li>
</ul>
<ul class="list col-3">
<li>Resources</li>
<li><a href="#">Webmail</a></li>
<li><a href="#">WHOIS search</a></li>
<li><a href="#">ICANN Confirmation</a></li>
<li><a href="#">Affiliates</a></li>
<li><a href="#">Connect with Us</a></li>
<li><a href="#">Gadgets / Widgets</a></li>
</ul>
<ul class="list col-4">
<li>Help and Support</li>
<li><a href="#">Support & Sales</a></li>
<li><a href="#">Billing Support</a></li>
<li><a href="#">Email Our Support Team</a></li>
<li><a href="#">FAQ’s</a></li>
<li><a href="#">User’s Guides</a></li>
<li><a href="#">Report Spam</a></li>
</ul>
<ul class="list col-5">
<li>About</li>
<li><a href="#">Careers</a></li>
<li><a href="#">Security Center</a></li>
<li><a href="#">Company Info</a></li>
<li><a href="#">News Center</a></li>
<li><a href="#">Customer Testimonials</a></li>
<li><a href="#">What’s New</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
<!-- footer -->
<footer>
<div>
<div>
<a href="http://www.templatemonster.com">Website template</a> designed by TemplateMonster.com<br>
<a href="http://www.templates.com/product/3d-models/">3D Models</a> provided by Templates.com
</div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
二、style.css源码内容：
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
mark, rp, rt, ruby, summary, time {display:inline}
/* Global properties */
body {background:#fff;font-family:Arial, Helvetica, sans-serif;font-size:100%;line-height:1em;color:#464646}
html {min-width:980px}
html, body {height:100%}
/* Global Structure = */
.container {margin:0 auto;width:990px;font-size:.75em}
/* Header */
header .container {height:131px;overflow:hidden;position:relative}
/* Sidebar */
aside {background:url(../images/aside-tail.gif) repeat-x left top #131313;min-width:980px}
/* Footer */
footer .container {text-align:center;line-height:1.667em;padding:26px 0}
/* Left & Right alignment */
.fleft {float:left}
.fright {float:right}
.clear {clear:both}
.col-1, .col-2, .col-3, .col-4, .col-5 {float:left}
.alignright {text-align:right}
.aligncenter {text-align:center}
.wrapper {width:100%;overflow:hidden}
.wrap {width:100%}
/* tailings */
.tail-top, .tail-top1, .tail-top2, .tail-top3 {background-repeat:repeat-x;background-color:#f2f2f2;background-position:left top;min-width:980px}
.tail-top {background-image:url(../images/tail-top.gif)}
.tail-top1 {background-image:url(../images/tail-top1.gif)}
.tail-top2 {background-image:url(../images/tail-top2.gif)}
.tail-top3 {background-image:url(../images/tail-top3.gif)}
/* form defaults */
input, select, textarea {font-family:Arial, Helvetica, sans-serif;font-size:1em;vertical-align:middle;font-weight:normal;color:#393939;margin:0;padding:0}
fieldset {border:0}
/* lists */
.info-list {padding-bottom:5px}
.info-list li {text-align:right;width:100%;overflow:hidden;vertical-align:top;border-bottom:1px solid #dfdfdf;padding:0 0 6px 5px;margin:0 0 6px -5px}
.info-list li span {float:left}
.info-list1 {padding-bottom:5px}
.info-list1 li {width:100%;overflow:hidden;vertical-align:top;border-top:1px solid #dfdfdf;padding:6px 0 0 5px;margin:6px 0 0 -5px}
.info-list1 li:first-child {border:none;padding-top:0;margin-top:0}
.info-list1.alt li {text-align:center}
.solutions li {width:100%;overflow:hidden;vertical-align:top;margin:18px 0 0 -8px;background:url(../images/divider1.gif) repeat-x left top;padding-top:20px}
.solutions li:first-child {background:none;padding-top:0;margin-top:0}
.solutions li img {float:left;margin-right:9px}
.solutions li p {margin-bottom:10px}
.list li {line-height:1.667em}
.list li:first-child {font-weight:bold}
.list li,
.list li a {color:#e5e5e5}
.list li a {text-decoration:none}
.list li a:hover {color:#6fa803}
.list1 {padding-bottom:11px}
.list1 li {padding:0 0 15px 10px;height:1%;background:url(../images/marker.gif) no-repeat left 4px}
.banners {padding:12px 0 0 0}
.banners li {float:left;font-size:26px;line-height:2.4em;letter-spacing:-1px;margin-left:6px}
.banners li:first-child {margin-left:0}
.banners li a {width:242px;display:block;height:65px;background:url(../images/banner-bg.gif) no-repeat left top;text-align:center;color:#fff;text-decoration:none}
/* other */
.img-indent {margin:0 20px 0 0;float:left}
.img-box {width:100%;overflow:hidden;padding-bottom:12px;line-height:1.667em}
.img-box img {float:left;margin:0 20px 0 -1px}
.extra-wrap {overflow:hidden}
p {margin-bottom:10px;line-height:1.667em}
.p0 {margin:0}
.p1 {margin-bottom:18px}
.price {text-align:center;display:block;font-size:30px;line-height:1.2em;letter-spacing:-1px;padding-bottom:10px}
#slogan {background:url(../images/slogan-bg.jpg) no-repeat left top;width:980px;height:220px;margin:12px 0 0 0;position:relative;left:3px;color:#fff;text-shadow:1px 1px #3e7901;position:relative}
#slogan h2 {font-size:26px;text-transform:uppercase;color:#fff}
#slogan h2 span {color:#262626}
#slogan .inside {position:absolute;left:360px;top:50px;width:576px}
address {font-style:normal;line-height:1.667em;display:block;padding-bottom:20px}
address b {float:left;width:73px}
/* txt, links, lines, titles */
a {color:#428301;outline:none}
a:hover {text-decoration:none}
h1 {padding:17px 0 0 44px;font-size:36px;line-height:1.2em}
h1 a {text-decoration:none}
h2 {color:#464646;font-size:30px;line-height:1.2em;margin-bottom:15px;letter-spacing:-1px}
h2.extra {padding:30px 0 0 43px}
h3 {font-size:26px;line-height:1.2em;color:#fff;margin-bottom:30px}
h4 {font-size:20px;line-height:1.2em;color:#fff;margin-bottom:27px;letter-spacing:-1px}
h4.extra {margin-bottom:12px}
h5 {font-size:1em;line-height:1.667em;margin-bottom:10px}
.link1 {display:inline-block;color:#fff;font-size:15px;line-height:1.2em;text-decoration:none;background:url(../images/link1-right.png) no-repeat right top;padding-right:7px;letter-spacing:-1px;text-transform:uppercase}
.link1:hover {color:#82b704}
.link1 span {display:block;background:url(../images/link1-left.png) no-repeat left top;padding-left:7px}
.link1 span span {background:url(../images/link1-bgd.png) left top repeat-x;padding:12px 14px}
.link2 {display:inline-block;color:#fff;font-size:15px;line-height:1.2em;text-decoration:none;background:url(../images/link2-bgd.gif) left top repeat-x;letter-spacing:-1px;text-transform:uppercase}
.link2:hover {color:#000}
.link2 span {display:block;background:url(../images/link2-left.gif) no-repeat left top}
.link2 span span {background:url(../images/link2-right.gif) no-repeat right top;padding:10px 22px}
.link3 {display:inline-block;color:#fff;font-size:15px;line-height:1.2em;text-decoration:none;background:url(../images/link3-bgd.gif) left top repeat-x;letter-spacing:-1px;text-transform:uppercase}
.link3:hover {color:#82b704}
.link3 span {display:block;background:url(../images/link3-left.gif) no-repeat left top}
.link3 span span {background:url(../images/link3-right.gif) no-repeat right top;padding:8px 19px}
.link4 {display:inline-block;color:#fff;font-size:15px;line-height:1.2em;text-decoration:none;background:url(../images/link4-bgd.gif) left top repeat-x;letter-spacing:-1px;text-transform:uppercase}
.link4:hover {color:#82b704}
.link4 span {display:block;background:url(../images/link4-left.gif) no-repeat left top}
.link4 span span {background:url(../images/link4-right.gif) no-repeat right top;padding:10px 22px}
.line-ver1 {background-image:url(../images/line-ver1.gif);background-repeat:repeat-y;background-position:336px 0;width:100%}
.line-ver2 {background-image:url(../images/line-ver1.gif);background-repeat:repeat-y;background-position:457px 0;width:100%}
.line-ver3 {background-image:url(../images/line-ver1.gif);background-repeat:repeat-y;background-position:617px 0;width:100%}
.line-ver4 {background-image:url(../images/line-ver1.gif);background-repeat:repeat-y;background-position:777px 0;width:100%}
/* boxes */
.header-box {width:100%;background:url(../images/header-box-tail.gif) repeat-x left top;position:relative;top:50px}
.header-box .left {background:url(../images/header-box-left.gif) no-repeat left top}
.header-box .right {background:url(../images/header-box-right.gif) no-repeat right top;height:81px}
.box {background:url(../images/box-tail.gif) repeat-x left top #fff;width:100%}
.box .border-bot {background:url(../images/border-bot.gif) repeat-x left bottom}
.box .border-left {background:url(../images/border-left.gif) repeat-y left top}
.box .border-right {background:url(../images/border-right.gif) repeat-y right top}
.box .left-top-corner {background:url(../images/left-top-corner.gif) no-repeat left top}
.box .right-top-corner {background:url(../images/right-top-corner.gif) no-repeat right top}
.box .left-top-corner1 {background:url(../images/left-top-corner1.gif) no-repeat left top}
.box .right-top-corner1 {background:url(../images/right-top-corner1.gif) no-repeat right top}
.box .left-bot-corner {background:url(../images/left-bot-corner.gif) no-repeat left bottom;width:100%}
.box .right-bot-corner {background:url(../images/right-bot-corner.gif) no-repeat right bottom}
.box .inner {padding:15px 38px 26px 43px}
.box.extra {background-image:url(../images/box-tail1.gif);background-repeat:repeat-x;width:100%}
.box.extra .inner {padding:4px 4px 1px 4px}
.box .border-top {background-image:url(../images/box-tail2.gif);background-repeat:repeat-x;width:100%}
.box .inner1 {padding:7px 0 0 0}
/* header */
header nav {float:right;padding:13px 24px 0 0}
header nav li {float:left;font-size:18px;line-height:3em;text-transform:uppercase;padding-left:21px;margin-left:19px;background:url(../images/divider.gif) repeat-y left top}
header nav li:first-child {background:none;padding-left:0;margin-left:0}
header nav li a {color:#fff;text-decoration:none}
header nav li.current a, header nav li a:hover {color:#82b704}
header .top-info {position:absolute;left:45px;top:17px}
/* content */
#content .inside {padding:0 2px}
#content .inside1 {padding:40px 0 48px 42px}
#content .left-indent {padding-left:39px}
#content .bot-indent {padding-bottom:54px}
#content .bot-indent1 {padding-bottom:12px}
#content .indent {padding:7px 0 18px 0}
#content .indent1 {padding:17px 0 18px 0}
/* Sidebar */
aside .inside {padding:35px 40px 35px 44px}
aside .line-ver1 {background-image:url(../images/line-ver.gif);background-repeat:repeat-y;background-position:162px 0;width:100%}
aside .line-ver2 {background-image:url(../images/line-ver.gif);background-repeat:repeat-y;background-position:354px 0;width:100%}
aside .line-ver3 {background-image:url(../images/line-ver.gif);background-repeat:repeat-y;background-position:547px 0;width:100%}
aside .line-ver4 {background-image:url(../images/line-ver.gif);background-repeat:repeat-y;background-position:742px 0;width:100%}
#login-form fieldset {position:absolute;right:45px;top:15px}
#login-form span.text {float:left;width:104px;height:23px;margin-left:5px;background:url(../images/input-bg1.gif) no-repeat left top}
#login-form input {border:none;background:none;padding:4px 10px;vertical-align:top;color:#9b9b9b;width:84px}
*+ html #login-form input {padding-top:3px}
#login-form a.login {color:#fff;text-decoration:none;text-shadow:1px 1px #295c01;float:left;background:url(../images/button-tail1.gif) repeat-x left top;position:relative;top:-2px;margin-left:3px}
#login-form a.login span {display:block;background:url(../images/button-left1.gif) no-repeat left top}
#login-form a.login span span {padding:5px 22px 6px 22px;background:url(../images/button-right1.gif) no-repeat right top}
#login-form span.links {font-size:.923em;line-height:1.2em;float:left;padding-left:8px;position:relative;top:-2px}
#login-form span.links a {color:#464646}#domain-form {padding-bottom:35px}
#domain-form span.text {display:block;background:url(../images/input-bg2.gif) no-repeat left top;width:217px;height:21px;margin:11px 0 13px 0}
#domain-form label {margin-left:6px;padding-top:0;float:left}
#domain-form span.text input {background:none;border:none;color:#9b9b9b;vertical-align:top;width:197px !important;padding:3px 10px}
#domain-form ul.checkboxes li {float:left;width:100px;padding-bottom:13px}
#domain-form ul.checkboxes li.alt {width:auto}
#domain-form ul.links {padding:9px 0 0 33px}
#domain-form ul.links li {float:left;line-height:1.2em;border-left:1px solid #464646;padding-left:11px;margin-left:11px}
#domain-form ul.links li:first-child {border:none;padding:0;margin:0}
#contacts-form .field {width:100%;overflow:hidden}
#contacts-form .field.text {height:30px}
#contacts-form label {float:left;width:94px}
#contacts-form input,
#contacts-form textarea { border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;behavior:url(js/PIE.htc);position:relative; border:1px solid #cbcbcb; background-color:#fff;float:left; color:#464646}
#contacts-form input {width:300px;padding:3px 3px}
#contacts-form textarea {width:549px;height:293px;padding:3px 3px;overflow:auto;margin-bottom:17px}
#contacts-form a {margin-left:6px}
/* slider */
#faded {width:990px;height:350px;margin:7px 0;background:url(../images/slider-bg.jpg) no-repeat 25px 5px}
#faded ul {list-style:none;padding:0;margin:0}
#faded ul.pagination {list-style:none;padding:0;margin:0;width:246px;height:350px;background:url(../images/pagination-bg.jpg) no-repeat left top}
#faded ul.pagination li {padding:5px 0 0 5px;margin-bottom:-5px}
#faded ul.pagination li a {width:270px;height:85px;background-repeat:no-repeat;background-position:left -85px;background-image:url(../images/thumb-sprite.png);text-decoration:none;display:block;color:#464646}
#faded ul.pagination li.current a {background-position:left top;color:#fff}
#faded ul.pagination li a span {font-size:30px;line-height:1.2em;display:block;padding:14px 0 0 0}
#faded ul.pagination li a small {display:inline-block;color:#428301;background-repeat:no-repeat;background-position:right -80px;background-image:url(../images/arrows.gif);padding:0 17px 0 0}
#faded ul.pagination li a span,
#faded ul.pagination li a small {padding-left:40px}
#faded ul.pagination li.current a small {color:#82b704;background-position:right 5px}
#faded ul.slides li {position:relative;width:100%}
#faded ul.slides li img {position:absolute;top:71px;right:35px}
#faded ul.slides li a {color:#fff;text-transform:uppercase;text-decoration:none;position:absolute;right:43px;top:217px;font-size:18px;line-height:1.2em;padding-left:8px;background:url(../images/button-left.png) no-repeat left top;letter-spacing:-1px}
#faded ul.slides li a:hover {color:#8ab805}
#faded ul.slides li a span {display:block;padding-right:8px;background:url(../images/button-right.png) no-repeat right top}
#faded ul.slides li a span span {background:url(../images/button-tail.png) repeat-x left top;padding:15px 14px 17px 14px}
a {outline:0;border:0}
/* custom forms */
/* Checkboxes */
span.jqTransformCheckboxWrapper {display:block;float:left}
a.jqTransformCheckbox {background:transparent url(../images/checkbox.gif) no-repeat left -30px;vertical-align:middle;height:17px;width:17px;display:block;/*display:-moz-inline-block;*/}
/* Checked - Used for both Radio and Checkbox */
a.jqTransformChecked {background-position:left top}
/* Hidden - used to hide the original form elements */
.jqTransformHidden {display:none}
您可能感兴趣的文章
- 05-19DOM的元素获取
- 05-13精灵图
- 05-13flex布局
- 05-10HTML表格标签
- 05-07border属性 :规定围绕表格的边框的宽度。
- 05-07innerText和innerHTML的区别
- 05-05Css样式的三种引用方式
- 05-05JavaScript的基本变量应用格式
- 05-05css盒子模型详解
- 05-05flex布局中，align-content和align-items居中的区别
阅读排行
推荐教程
- 09-12js的数组和二维数组教程
- 08-25网页交互开发高级第八章课后习题及答案
- 10-06transform-origin详解
- 04-14利用数学函数随机生成六位数验证码
- 08-25网页交互开发高级第十四章课后习题及答案
- 09-11animation打字效果案例
- 09-04css如何实现文字分散对齐
- 07-28前端教学案例六
- 05-05Css样式的三种引用方式
- 05-05JavaScript的基本变量应用格式