DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> HTML和CSS做網頁實例教程:邊框1像素缺口鼠標變色
HTML和CSS做網頁實例教程:邊框1像素缺口鼠標變色
編輯:CSS進階教程     

本貼代碼實現的是鼠標移動至按鈕時變色,及邊框交點處的1個像素缺口(視覺上營造一種轉角效果)


僅供新手參考學習,歡迎大家提出更多的實現方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>google analytics buttons</title>
   <style type="text/css"> /* default stuff */
    body { padding:20px; font-family:arial; text-align:center; } p, li { font-size: 12px; line-height:18px; } h3 { margin-bottom:6px; }
   .examplesGoHere { text-align:left; margin:0 auto; }
   .letsGiveItAFixedWidthOf200Pixels { width:200px; } ul { list-style:none; margin-left:0; padding-left:0; margin-top:0; } ul li { margin-bottom:8px; margin-left:0; padding-left:0; }
                                 /*---- notched effect for links in the unordered list ------*/
   .notchedListItems a { display:block; border: solid #666; border-width: 0 1px; text-decoration: none; outline:none; color: #000; background: #e4e4e4; }
    .notchedListItems a b { display: block; position:relative; top: -1px; left: 0; border:solid #666; border-width:1px 0 0; font-weight:normal; } .notchedListItems a b b { border-width:0 0 1px; top: 2px; padding:1px 6px; }
    .notchedListItems a:hover, .notchedListItems a:hover b { background:#666; color:white; }
    .feature { border:solid #647aae; border-width:0 1px; background:#b0c0e6; }
    .feature div { position:relative; top: -1px; left: 0; border:solid #647aae; border-width:1px 0 0; } .feature div div { top: 2px; border-width:0 0 1px; padding: 0px 6px; }
  </style>
</head>
<body>
<div class="examplesGoHere letsGiveItAFixedWidthOf200Pixels">
   <h3>A list</h3>
   <ul class="notchedListItems">
     <li><a href="#"><b><b>About</b></b></a></li>
     <li><a href="#"><b><b>Contact</b></b></a></li>
     <li><a href="#"><b><b>Cssrain</b></b></a></li>
   </ul>
   <h3>A div</h3>
   <div class="feature">
     <div>
       <div>
         <p>This is an example of the notched corners as applied to a div container.</p>
         <p>This is an example of the notched corners as applied to a div container.</p>
         <p>This is an example of the notched corners as applied to a div container.</p>
       </div>
     </div>
   </div>
   <ul class="notchedListItems">
       <li>
       <a href="#"><b><b>CSS設計</b></b></a>
       </li>
   </ul>
</div>
<!-- end .examplesGoHere -->
</body>
</html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved