- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a >
- body {
- font-size: 12px;
- }
- p.switch {
- width: 122px;
- height: 26px;
- margin-bottom: 15px;
- background: url(/jsCSS/demoimg/201008/switch_bg.gif) no-repeat;
- }
- a.switch_thumb {
- width: 34px;
- height: 26px;
- line-height: 26px;
- padding: 0;
- margin: 0 0 0 80px;
- display: block;
- background: url(/jscss/demoimg/201008/switch_btn.gif) no-repeat;
- outline: none;
- text-indent: -9999px;
- }
- a.swap {
- background-position: left bottom;
- }
- a:hover.switch_thumb {
- filter:alpha(opacity=75);
- opacity:.75;
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
- }
- ul.display {
- width: 744px;
- background: #222 none repeat scroll 0 0;
- border-right: 1px solid #333;
- border-top: 1px solid #333;
- margin: 0;
- padding: 0;
- overflow: hidden;
- clear: both;
- }
- ul.display li {
- width: 742px;
- float: left;
- margin: 0;
- padding: 10px 0;
- border: 1px solid;
- border-color: #111 #111 #333 #333;
- }
- ul.display li a {
- color: #DDD;
- text-decoration: none;
- font-size: 140%;
- }
- ul.display li .content_block {
- padding: 0 10px;
- }
- ul.display li .content_block h4 {
- margin: 0;
- padding: 5px;
- }
- ul.display li .content_block p {
- margin: 0;
- padding: 5px 5px 5px 241px;
- color: #CCC;
- }
- ul.display li .content_block a img{
- border: 5px solid #ccc;
- background: #fff;
- margin: 0 15px 0 0;
- float: left;
- }
- ul.thumb_view li {
- width: 246px;
- }
- ul.thumb_view li h4 {
- display: inline;
- }
- ul.thumb_view li p {
- display: none;
- }
- ul.thumb_view li .content_block a img {
- margin: 0 0 10px;
- }
- </style>
- <script type="text/javascript" src1="/ajaxjs/jquery-1.4.2.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("a.switch_thumb").toggle(function(){
- $(this).addClass("swap");
- $("ul.display").fadeOut("fast", function() {
- $(this).fadeIn("fast").addClass("thumb_view");
- });
- }, function () {
- $(this).removeClass("swap");
- $("ul.display").fadeOut("fast", function() {
- $(this).fadeIn("fast").removeClass("thumb_view");
- });
- });
- });
- </script>
- </head>
- <body>
- <ul class="display">
- <li>
- <div class="content_block">
- <a href="#"><img src1="/jscss/demoimg/201008/sample1.gif" alt="Sample"></a>
- <h4><a href="#">Sunflowa Media</a></h4>
- <p>Hey, I'm Airos Chou.</p>
- <p>I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
- </div>
- </li>
- <li>
- <div class="content_block">
- <a href="#"><img src1="/jscss/demoimg/201008/sample2.gif" alt="Sample"></a>
- <h4><a href="#">Sunflowa Media</a></h4>
- <p>Hey, I'm Airos Chou.</p>
- <p>I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
- </div>
- </li>
- <li>
- <div class="content_block">
- <a href="#"><img src1="/jscss/demoimg/201008/sample3.gif" alt="Sample"></a>
- <h4><a href="#">Sunflowa Media</a></h4>
- <p>Hey, I'm Airos Chou.</p>
- <p>I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p>
- </div>
- </li>
- </ul>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/140520133354.html
来源: http://www.codesnippet.cn/detail/140520133354.html