|
|
(13 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <html>
| |
- | <style type="text/css">
| |
| | | |
- | .wrapper1{
| |
- | color: #44433f;
| |
- | font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
| |
- | margin: 0;
| |
- | padding: 4px 0 0;
| |
- | }
| |
- |
| |
- | .wrapper1 a{
| |
- | color: #E5F2FB;
| |
- | text-decoration: none;
| |
- |
| |
- | }
| |
- |
| |
- | .wrapper1 a:hover {
| |
- | color: #09548B;
| |
- | }
| |
- |
| |
- | .wrapper1 p {
| |
- | margin: 0 0 17px;
| |
- | padding: 0;
| |
- | line-height: 18px;
| |
- |
| |
- | }
| |
- |
| |
- | .wrapper {
| |
- |
| |
- | /*width: 710px;*/
| |
- |
| |
- | margin: 20px auto;
| |
- |
| |
- | }
| |
- |
| |
- | .nav {
| |
- |
| |
- | background: #fff url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmFxQxnOI/AAAAAAAAAHo/WeNb4h2lTcY/s1600/nav_bg.png) repeat-x;
| |
- |
| |
- | float: left;
| |
- |
| |
- | }
| |
- |
| |
- | .nev-wrapper {
| |
- |
| |
- | clear: both;
| |
- |
| |
- | float: left;
| |
- |
| |
- | }
| |
- |
| |
- | .nav-left {
| |
- |
| |
- | background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmHgvXrfI/AAAAAAAAAHs/0C36haanf_o/s1600/nav_left.png) no-repeat top left;
| |
- |
| |
- | float: left;
| |
- |
| |
- | width: 11px;
| |
- |
| |
- | height: 41px;
| |
- |
| |
- | }
| |
- |
| |
- | .nav-right {
| |
- |
| |
- | background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmIzag1WI/AAAAAAAAAHw/qNqgaojq4OI/s1600/nav_right.png) no-repeat top right;
| |
- |
| |
- | float: left;
| |
- |
| |
- | width: 11px;
| |
- |
| |
- | height: 41px;
| |
- |
| |
- | }
| |
- |
| |
- | .nav ul {
| |
- |
| |
- | /*width: 648px;*/
| |
- |
| |
- | height: 38px;
| |
- |
| |
- | float: left;
| |
- |
| |
- | margin: 0;
| |
- |
| |
- | padding-top: 3px;
| |
- |
| |
- | list-style: none;
| |
- |
| |
- | font-size: 15px;
| |
- |
| |
- | }
| |
- |
| |
- | .nav li {
| |
- |
| |
- | float: left;
| |
- |
| |
- | padding: 0 7px;
| |
- |
| |
- | background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmP8wgFmI/AAAAAAAAAIA/wdf4DZhsFKg/s1600/split.png) no-repeat right center;
| |
- |
| |
- | position: relative;
| |
- |
| |
- | z-index: 1;
| |
- |
| |
- | }
| |
- |
| |
- | .nav li.last {
| |
- |
| |
- | background:none;
| |
- |
| |
- | }
| |
- |
| |
- | .nav li:hover {
| |
- |
| |
- | z-index:2;
| |
- |
| |
- | }
| |
- |
| |
- | .nav li a {
| |
- |
| |
- | display: block;
| |
- |
| |
- | line-height: 38px;
| |
- |
| |
- | overflow: hidden;
| |
- |
| |
- | float: left;
| |
- |
| |
- | }
| |
- |
| |
- | a .menu-left {
| |
- |
| |
- | background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsl3yDJRkI/AAAAAAAAAHQ/hZkoiBamxso/s1600/menu_left.gif) no-repeat left top;
| |
- |
| |
- | width: 8px;
| |
- |
| |
- | height: 32px;
| |
- |
| |
- | line-height: 35px;
| |
- |
| |
- | display: block;
| |
- |
| |
- | float: left;
| |
- |
| |
- | }
| |
- |
| |
- | a .menu-mid {
| |
- |
| |
- | background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsl7c8ppBI/AAAAAAAAAHY/hxR8ObxBYmo/s1600/menu_mid.gif) repeat-x top left;
| |
- |
| |
- | height: 32px;
| |
- |
| |
- | line-height: 35px;
| |
- |
| |
- | display: block;
| |
- |
| |
- | float: left;
| |
- |
| |
- | }
| |
- |
| |
- | a .menu-right {
| |
- |
| |
- | background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmCJ3D5iI/AAAAAAAAAHg/0y7-Wpz4C2o/s1600/menu_right.gif) no-repeat top left;
| |
- |
| |
- | width: 8px;
| |
- |
| |
- | height: 32px;
| |
- |
| |
- | line-height: 35px;
| |
- |
| |
- | display: block;
| |
- |
| |
- | float: left;
| |
- |
| |
- | }
| |
- |
| |
- | .nav li a:hover .menu-left,
| |
- |
| |
- | .nav li.active a .menu-left,
| |
- |
| |
- | .nav li:hover a .menu-left,
| |
- |
| |
- | .nav li a:hover .menu-mid,
| |
- |
| |
- | .nav li.active a .menu-mid,
| |
- |
| |
- | .nav li:hover a .menu-mid,
| |
- |
| |
- | .nav li a:hover .menu-right,
| |
- |
| |
- | .nav li.active a .menu-right,
| |
- |
| |
- | .nav li:hover a .menu-right {
| |
- |
| |
- | background-position: 0 -37px;
| |
- |
| |
- | line-height: 35px;
| |
- |
| |
- | }
| |
- |
| |
- | .nav li a:hover,
| |
- |
| |
- | .nav li.active a,
| |
- |
| |
- | .nav li.hover a,
| |
- |
| |
- | .nav li:hover a {
| |
- |
| |
- | color: #09548B;
| |
- |
| |
- | }
| |
- |
| |
- | .nav li:hover .sub,
| |
- |
| |
- | .nav li.hover .sub {
| |
- |
| |
- | display:block;
| |
- |
| |
- | }
| |
- |
| |
- | .nav li .sub {
| |
- |
| |
- | display: none;
| |
- |
| |
- | position: absolute;
| |
- |
| |
- | top: 27px;
| |
- |
| |
- | left: 6px;
| |
- |
| |
- | background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmUJr-yhI/AAAAAAAAAIM/OihvjAeTyG8/s1600/submenu_top.png) no-repeat;
| |
- |
| |
- | width: 186px;
| |
- |
| |
- | padding-top: 9px;
| |
- |
| |
- | }
| |
- |
| |
- | .nav li ul {
| |
- |
| |
- | background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmRpDHDsI/AAAAAAAAAIE/ADndeR5TGu8/s1600/submenu_bg.png) repeat-y;
| |
- |
| |
- | width: 162px;
| |
- |
| |
- | height: auto;
| |
- |
| |
- | margin: 0;
| |
- |
| |
- | padding: 0 12px 10px;
| |
- |
| |
- | list-style: none;
| |
- |
| |
- | font-size: 14px;
| |
- |
| |
- | }
| |
- |
| |
- |
| |
- |
| |
- | .nav li:hover li,
| |
- |
| |
- | .nav li.active li {
| |
- |
| |
- | width: 100%;
| |
- |
| |
- | padding: 1px 0 2px;
| |
- |
| |
- | border-bottom: 1px #C1D9F0 dashed;
| |
- |
| |
- | background: none !important;
| |
- |
| |
- | }
| |
- |
| |
- | .nav li:hover li a,
| |
- |
| |
- | .nav li.active li a {
| |
- |
| |
- | color: #09548B;
| |
- |
| |
- | background: none !important;
| |
- |
| |
- | line-height: normal;
| |
- |
| |
- | width: 156px;
| |
- |
| |
- | padding: 8px 3px 3px;
| |
- |
| |
- | text-indent: 1px;
| |
- |
| |
- | }
| |
- |
| |
- | .nav li:hover li a:hover,
| |
- |
| |
- | .nav li.active li a:hover {
| |
- |
| |
- | color: #fff;
| |
- |
| |
- | background: #165B9F !important;
| |
- |
| |
- | text-decoration: none;
| |
- |
| |
- | line-height: normal;
| |
- |
| |
- | }
| |
- |
| |
- | /*IE*/
| |
- |
| |
- | .nav li li a:hover,
| |
- |
| |
- | .nav li li a:hover {
| |
- |
| |
- | color: #fff;
| |
- |
| |
- | background: #165B9F !important;
| |
- |
| |
- | text-decoration: none;
| |
- |
| |
- | line-height: normal;
| |
- |
| |
- | }
| |
- |
| |
- | /**/
| |
- |
| |
- | .nav .btm-bg {
| |
- |
| |
- | background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmS3dJfYI/AAAAAAAAAII/h8j3-QE6ElE/s1600/submenu_bottom.png) no-repeat;
| |
- |
| |
- | width: 205px;
| |
- |
| |
- | height: 9px;
| |
- |
| |
- | overflow: hidden;
| |
- |
| |
- | clear: both;
| |
- |
| |
- | }
| |
- |
| |
- | .content {
| |
- |
| |
- | width: 670px;
| |
- |
| |
- | background: transparent url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQslwVgdWcI/AAAAAAAAAHA/hPtWaiguCKQ/s1600/content_bg.png) repeat-y;
| |
- |
| |
- | float: left;
| |
- |
| |
- | padding: 10px 20px;
| |
- |
| |
- | }
| |
- |
| |
- | .content h1 {
| |
- |
| |
- | color: #333;
| |
- |
| |
- | font-weight: 400;
| |
- |
| |
- | text-transform: uppercase;
| |
- |
| |
- | font-size: 18px;
| |
- |
| |
- | border-bottom: 1px dashed #C1D9F0;
| |
- |
| |
- | }
| |
- |
| |
- | .content h2 {
| |
- |
| |
- | font-weight: 400;
| |
- |
| |
- | text-transform: uppercase;
| |
- |
| |
- | font-size: 14px;
| |
- |
| |
- | padding-left: 10px;
| |
- |
| |
- | margin-bottom: -5px;
| |
- |
| |
- | }
| |
- |
| |
- | .content p {
| |
- |
| |
- | padding: 0 15px;
| |
- |
| |
- | text-align: justify;
| |
- |
| |
- | }
| |
- |
| |
- | .content-bottom {
| |
- |
| |
- | width: 710px;
| |
- |
| |
- | background: transparent url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQslyLtUh4I/AAAAAAAAAHE/KjmSaXhHWuw/s1600/content_bottom.png) no-repeat;
| |
- |
| |
- | height: 13px;
| |
- |
| |
- | float: left;
| |
- |
| |
- | }
| |
- | </style>
| |
- |
| |
- | <div class="wrapper1">
| |
- |
| |
- | <div class="wrapper">
| |
- |
| |
- | <div class="nav-wrapper">
| |
- |
| |
- | <div class="nav-left"></div>
| |
- |
| |
- | <div class="nav">
| |
- |
| |
- | <ul id="navigation">
| |
- |
| |
- | <li class="active">
| |
- |
| |
- | <a href="#">
| |
- |
| |
- | <span class="menu-left"></span>
| |
- |
| |
- | <span class="menu-mid">Home</span>
| |
- |
| |
- | <span class="menu-right"></span>
| |
- |
| |
- | </a>
| |
- |
| |
- | </li>
| |
- |
| |
- | <li class="">
| |
- |
| |
- | <a href="#">
| |
- |
| |
- | <span class="menu-left"></span>
| |
- |
| |
- | <span class="menu-mid">Blog</span>
| |
- |
| |
- | <span class="menu-right"></span>
| |
- |
| |
- | </a>
| |
- |
| |
- | <div class="sub">
| |
- |
| |
- | <ul>
| |
- |
| |
- | <li>
| |
- |
| |
- | <a href="#">Archives</a>
| |
- |
| |
- | </li>
| |
- |
| |
- | <li>
| |
- |
| |
- | <a href="#">Categories</a>
| |
- |
| |
- | </li>
| |
- |
| |
- | <li>
| |
- |
| |
- | <a href="#">Top-rated Posts</a>
| |
- |
| |
- | </li>
| |
- |
| |
- | <li>
| |
- |
| |
- | <a href="#">Most-viewed Entries</a>
| |
- |
| |
- | </li>
| |
- |
| |
- | </ul>
| |
- |
| |
- | <div class="btm-bg"></div>
| |
- |
| |
- | </div>
| |
- |
| |
- | </li>
| |
- |
| |
- | <li class="">
| |
- |
| |
- | <a href="#">
| |
- |
| |
- | <span class="menu-left"></span>
| |
- |
| |
- | <span class="menu-mid">Development</span>
| |
- |
| |
- | <span class="menu-right"></span>
| |
- |
| |
- | </a>
| |
- |
| |
- | <div class="sub">
| |
- |
| |
- | <ul>
| |
- |
| |
- | <li>
| |
- |
| |
- | <a href="#">Wordpress Themes</a>
| |
- |
| |
- | </li>
| |
- |
| |
- | <li>
| |
- |
| |
- | <a href="#">Wordpress Plugins</a>
| |
- |
| |
- | </li>
| |
- |
| |
- | <li>
| |
- |
| |
- | <a href="#">Mac OS X</a>
| |
- |
| |
- | </li>
| |
- |
| |
- | </ul>
| |
- |
| |
- | <div class="btm-bg"></div>
| |
- |
| |
- | </div>
| |
- |
| |
- | </li>
| |
- |
| |
- | <li class="">
| |
- |
| |
- | <a href="#">
| |
- |
| |
- | <span class="menu-left"></span>
| |
- |
| |
- | <span class="menu-mid">Tutorials</span>
| |
- |
| |
- | <span class="menu-right"></span>
| |
- |
| |
- | </a>
| |
- |
| |
- | <div class="sub">
| |
- |
| |
- | <ul>
| |
- |
| |
- | <li>
| |
- |
| |
- | <a href="#">Photoshop</a>
| |
- |
| |
- | </li>
| |
- |
| |
- | <li>
| |
- |
| |
- | <a href="#">Illustrator</a>
| |
- |
| |
- | </li>
| |
- |
| |
- | <li>
| |
- |
| |
- | <a href="#">Css, Html</a>
| |
- |
| |
- | </li>
| |
- |
| |
- | <li>
| |
- |
| |
- | <a href="#">Post Your Tutorial!</a>
| |
- |
| |
- | </li>
| |
- |
| |
- | </ul>
| |
- |
| |
- | <div class="btm-bg"></div>
| |
- |
| |
- | </div>
| |
- |
| |
- | </li>
| |
- |
| |
- | <li class="">
| |
- |
| |
- | <a href="#">
| |
- |
| |
- | <span class="menu-left"></span>
| |
- |
| |
- | <span class="menu-mid">Gallery</span>
| |
- |
| |
- | <span class="menu-right"></span>
| |
- |
| |
- | </a>
| |
- |
| |
- | <div class="sub">
| |
- |
| |
- | <ul>
| |
- |
| |
- | <li>
| |
- |
| |
- | <a href="#">Personal Photos</a>
| |
- |
| |
- | </li>
| |
- |
| |
- | <li>
| |
- |
| |
- | <a href="#">My Friends</a>
| |
- |
| |
- | </li>
| |
- |
| |
- | </html>
| |