zoukankan      html  css  js  c++  java
  • xhtml实现的竖向鼠标滑过触发内容切换的代码

    代码简介:

    老外弄的,并且还带了圆角,很流畅,当鼠标经过触发内容切换,很不错的,您试试。

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>xhtml+css实现的竖向鼠标滑过触发内容切换的代码_网页代码站(www.webdm.cn)</title>
    </head>
    <style type="text/css">
     /* common styling */
    
     /* Set up the default font and ovrall size to include image */
     body {
    	background: #fff;
    	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
    	font-size: 12px;
    }
    
    #info {font-family:font-family:"trebuchet ms", trebuchet, arial, sans-serif; font-size:1em;}
    #menu {
      margin:0; 
      padding:0; 
      height:32.5em; 
      overflow:hidden; 
      background:#f0f0f0;
      }
    #menu li {
      list-style-type:none; 
      float:left; 
      display:block; 
      100%;
      }
    #menu li a {
      display:block; 
      text-decoration:none; 
      color:#00b; 
      margin:0; 
      100%;
      }
    #menu li a span {
      display:none; 
      color:#000;
      }
    #menu li a.one span {
      display:block; 
      height:15em; 
      margin:0 10px;
      }
    #menu li a:hover {
      background:#f1f1f1;
      }
    #menu li a:hover span {
      display:block; 
      height:15em; 
      margin:0 10px; 
      cursor:pointer;
      }
    #menu .h2 {
      margin:0 5px; 
      padding:0; 
      color:#808; 
      font-variant:small-caps; 
      font-size:1.5em; 
      border:0;
      }
    #menu .h3 {
      margin:0 5px; 
      padding:0; 
      font-size:1.1em; 
      color:#00b;
      }
    #menu img {
      margin:5px 5px 5px 0; 
      border:1px solid #000; 
      float:left;
      }
    .curved {
      21em;
      margin:0 auto;
      }
    .curved .b1, .curved .b2, .curved .b3, .curved .b4  {
      font-size:1px; 
      display:block; 
      background:#88c;
    /* hide overflow:hidden from IE5/Mac */ 
    /* \*/ 
    overflow: hidden; 
    /* */ 
    }
    .curved .b1, .curved .b2, .curved .b3 {
      height:1px;
      }
    .curved .b2, .curved .b3, .curved .b4 {
      background:#f0f0f0; 
      border-left:1px solid #88c; 
      border-right:1px solid #88c;
      }
    .curved .b1 {
      margin:0 4px; 
      background:#88c;
      }
    .curved .b2 {
      margin:0 2px; 
      border-0 2px;
      }
    .curved .b3 {
      margin:0 1px;
      }
    .curved .b4 {
      height:2px; 
      margin:0;
      }
    .curved .c1 {
      margin:0 5px; 
      background:#88c;
      }
    .curved .c2 {
      margin:0 3px; 
      border-0 2px;
      }
    .curved .c3 {
      margin:0 2px;
      }
    .curved .c4 {
      height:2px; 
      margin: 0 1px;
      }
    .curved .boxcontent {
      display:block; 
      background:transparent; 
      border-left:1px solid #88c; 
      border-right:1px solid #88c; 
      font-size:0.9em; 
      text-align:justify;
      }
    </style>
    <body>
    
    <div class="curved">
     <b class="b1 c1"></b>
     <b class="b2 c2"></b>
     <b class="b3 c3"></b>
     <b class="b4 c4"></b>
      <div class="boxcontent">
       <ul id="menu">
        <li>
         <a class="m5 five" href="#nogo">
          <b class="h2">Paul Cézanne</b><br />
          <b class="h3">(1839-1906)</b>
          <span>
           <img src="http://www.webdm.cn/images/20091030/cezanne.jpg" alt="painting" title="painting" />
           The French painter who exhibited little in his lifetime and pursued 
           his interests increasingly in artistic isolation, is regarded today 
           as one of the great forerunners of modern painting.
          </span>
         </a>
        </li>
        <li>
         <a href="#nogo">
          <b class="b1"></b>
          <b class="b2"></b>
          <b class="b3"></b>
          <b class="b4"></b>
          <b class="h2">Henri Matisse</b><br />
          <b class="h3">(1869-1954)</b>
          <span>
           <img src="http://www.webdm.cn/images/20091030/matisse.jpg" alt="painting" title="painting" />
           Initially planned a career as a lawyer. However, he began to paint 
           after an acute attack of appendicitis and then proceeded to become 
           a leader in many art circles.
          </span>
         </a>
        </li>
        <li>
         <a href="#nogo">
          <b class="b1"></b>
          <b class="b2"></b>
          <b class="b3"></b>
          <b class="b4"></b>
          <b class="h2">William Turner</b><br />
          <b class="h3">(1775-1851)</b>
          <span>
           <img src="http://www.webdm.cn/images/20091030/turner.jpg" alt="painting" title="painting" />
           This English painter was one of the greatest romantic interpreters 
           of nature in the history of Western art and is still unrivaled in 
           the virtuosity of his painting of light.
          </span>
         </a>
        </li>
        <li>
         <a href="#nogo">
          <b class="b1"></b>
          <b class="b2"></b>
          <b class="b3"></b>
          <b class="b4"></b>
          <b class="h2">John Constable</b><br />
          <b class="h3">(1776-1837)</b>
          <span>
           <img src="http://www.webdm.cn/images/20091030/constable.jpg" alt="painting" title="painting" />
           Tried to capture informally the effects of changing light and the 
           patterns of clouds moving across the country sky. He loved the 
           countryside, and his best work was of outdoor scenes in his native 
           Suffolk.
          </span>
         </a>
        </li>
        <li>
         <a class="one" href="#nogo">
          <b class="b1"></b>
          <b class="b2"></b>
          <b class="b3"></b>
          <b class="b4"></b>
          <b class="h2">Claude Monet</b><br />
          <b class="h3">(1840-1926)</b>
          <span>
           <img src="http://www.webdm.cn/images/20091030/monet.jpg" alt="painting" title="painting" />
           Monet's concern was to reflect the influence of light on a subject. 
           He never abandoned his Impressionist painting style until his death 
           in 1926 when Fauvism and Cubism were en vogue and when abstract 
           painting came into existence.
          </span>
         </a>
        </li>
       </ul>
      </div>
     <b class="b4 c4"></b>
     <b class="b3 c3"></b>
     <b class="b2 c2"></b>
     <b class="b1 c1"></b>
    </div>
    
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/79b71f31-f55c-499c-b58a-34bbacb55c6e.html

  • 相关阅读:
    CSS强制英文、中文换行与不换行 强制英文换行
    vue 解决IE不能用的问题
    mysql 删除所有表
    sql server 删除所有表
    MySQL通过Navicat实现远程连接的过程
    php升级版本
    linux下与windows下的换行符 [转载]
    linux 的mysql数据库 数据库的路径的软连接
    并查集学习
    Mariadb开机自启动
  • 原文地址:https://www.cnblogs.com/webdm/p/2033754.html
Copyright © 2011-2022 走看看