|
|
| Line 130: |
Line 130: |
| | ************************************************************************/ | | ************************************************************************/ |
| | | | |
| − | /*Basic style*/
| |
| − | body {
| |
| − | font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
| |
| − | background-color: #CCC;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | color: #000;
| |
| − | }
| |
| | | | |
| − |
| |
| − | ul, ol, dl {
| |
| − | padding: 0;
| |
| − | margin: 0;
| |
| − | }
| |
| − | h1, h2, h3, h4, h5, h6, p {
| |
| − | margin-top: 0;
| |
| − | padding-right: 15px;
| |
| − | padding-left: 15px;
| |
| − | }
| |
| − | a img {
| |
| − | border: none;
| |
| − | }
| |
| − | a:link {
| |
| − | color: #000;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | a:visited {
| |
| − | color: #000;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | a:hover, a:active, a:focus {
| |
| − | text-decoration: none;
| |
| − | color:#09F;
| |
| − | }
| |
| − |
| |
| − | .container {
| |
| − | width: 960px;
| |
| − | background-color: #FFF;
| |
| − | margin: 0 auto;
| |
| − | }
| |
| − | .content {
| |
| − | padding: 10px 0;
| |
| − | }
| |
| − | .fltrt {
| |
| − | float: right;
| |
| − | margin-left: 8px;
| |
| − | }
| |
| − | .fltlft {
| |
| − | float: left;
| |
| − | margin-right: 8px;
| |
| − | }
| |
| − | .clearfloat {
| |
| − | clear:both;
| |
| − | height:0;
| |
| − | font-size: 1px;
| |
| − | line-height: 0px;
| |
| − | }
| |
| − | /*Basic style*/
| |
| − |
| |
| − | /*menu style*/
| |
| − | .navcont{
| |
| − | width:960px;
| |
| − | margin:0 auto;
| |
| − | background:#fff;
| |
| − | height:45px;
| |
| − | }
| |
| − |
| |
| − | .nav {
| |
| − | height: 45px;
| |
| − | background: transparent url(http://i50.tinypic.com/bj0nm.png) center bottom no-repeat;
| |
| − | padding-bottom: 7px;
| |
| − | margin-bottom: 23px;
| |
| − | }
| |
| − |
| |
| − | .nav ul {
| |
| − | margin:0;
| |
| − | box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.4);
| |
| − | -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .nav ul li {
| |
| − | font: 13px Verdana, 'Lucida Grande';
| |
| − | cursor: pointer;
| |
| − | -webkit-transition: padding .05s linear;
| |
| − | -moz-transition: padding .05s linear;
| |
| − | -ms-transition: padding .05s linear;
| |
| − | -o-transition: padding .05s linear;
| |
| − | transition: padding .05s linear;
| |
| − | background: transparent url(http://i46.tinypic.com/21c5h93.png) left center no-repeat;
| |
| − | }
| |
| − | .nav li:first-child
| |
| − | {
| |
| − | background:none;
| |
| − | }
| |
| − | .nav ul li.drop {
| |
| − | position: relative;
| |
| − | }
| |
| − | .nav ul > li {
| |
| − | display: inline-block;
| |
| − | }
| |
| − | .nav ul li a {
| |
| − | line-height: 45px;
| |
| − | padding: 0 20px;
| |
| − | height: 45px;
| |
| − | color: #777;
| |
| − | }
| |
| − | .nav ul li a:hover {
| |
| − | color:#09F;
| |
| − | }
| |
| − |
| |
| − | .dropOut .triangle {
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | position: absolute;
| |
| − | border-left: 8px solid transparent;
| |
| − | border-right: 8px solid transparent;
| |
| − | border-bottom: 8px solid white;
| |
| − | top: -8px;
| |
| − | left: 50%;
| |
| − | margin-left: -8px;
| |
| − | }
| |
| − | .dropdownContain {
| |
| − | width: 200px;
| |
| − | position: absolute;
| |
| − | z-index: 2;
| |
| − | left: 60%;
| |
| − | margin-left: -100px; /* half of width */
| |
| − | top: -400px;
| |
| − | }
| |
| − | .dropOut {
| |
| − | width: 200px;
| |
| − | background: white;
| |
| − | float: left;
| |
| − | position: relative;
| |
| − | margin-top: 0px;
| |
| − | opacity: 0;
| |
| − | -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
| |
| − | -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
| |
| − | box-shadow: 0 1px 6px rgba(0,0,0,.15);
| |
| − | -webkit-transition: all .2s ease-out;
| |
| − | -moz-transition: all .2s ease-out;
| |
| − | -ms-transition: all .2s ease-out;
| |
| − | -o-transition: all .2s ease-out;
| |
| − | transition: all .2s ease-out;
| |
| − | }
| |
| − |
| |
| − | .dropOut ul {
| |
| − | float: left;
| |
| − | padding: 0 0;
| |
| − | }
| |
| − | .dropOut ul li {
| |
| − | text-align: left;
| |
| − | background: transparent url(http://i50.tinypic.com/303efm1.png) center top repeat-x;
| |
| − | float: left;
| |
| − | width: 155px;
| |
| − | padding: 12px 0 10px 15px;
| |
| − | margin: 0px 15px;
| |
| − | color: #777;
| |
| − | }
| |
| − | .dropOut li:first-child
| |
| − | {
| |
| − | background:none;
| |
| − | }
| |
| − |
| |
| − | .dropOut ul li:hover {
| |
| − | color:#09F;
| |
| − | -webkit-transition: all 200ms ease-in;
| |
| − | -o-transition: all 200ms ease-in;
| |
| − | -moz-transition: all 200ms ease-in;
| |
| − | }
| |
| − |
| |
| − | ul li:hover a { color:#09F;
| |
| − | -webkit-transition: all 200ms ease-in;
| |
| − | -o-transition: all 200ms ease-in;
| |
| − | -moz-transition: all 200ms ease-in;
| |
| − | }
| |
| − | ul li:hover .dropdownContain { top: 45px; }
| |
| − | ul li:hover .underline { border-bottom-color: #777; }
| |
| − | ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
| |
| − | /*menu style*/
| |
| | | | |
| | /************************************************************************ | | /************************************************************************ |
