Heim > Web-Frontend > HTML-Tutorial > CSS快速制作图片轮播的焦点_html/css_WEB-ITnose

CSS快速制作图片轮播的焦点_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:56:46
Original
1272 Leute haben es durchsucht

来源:http://www.ido321.com/858.html

 

效果图:

演示地址:http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/

代码:

   1: <!DOCTYPE html>
Nach dem Login kopieren
   2: <html lang="en">
Nach dem Login kopieren
   3: <head>
Nach dem Login kopieren
   4:     <meta http-equiv="content-type" content="text/html;charset=utf-8">
Nach dem Login kopieren
   5:     <title>图片轮播的焦点</title>
Nach dem Login kopieren
   6:     <style type="text/css">
Nach dem Login kopieren
   7:         .div
Nach dem Login kopieren
   8:         {
Nach dem Login kopieren
   9:             width: 240px;
Nach dem Login kopieren
  10:             position: absolute;
Nach dem Login kopieren
  11:         }
Nach dem Login kopieren
  12:         ul
Nach dem Login kopieren
  13:         {
Nach dem Login kopieren
  14:             list-style: none;
Nach dem Login kopieren
  15:             margin-left: -50px;
Nach dem Login kopieren
  16:         }
Nach dem Login kopieren
  17:         ul li
Nach dem Login kopieren
  18:         {
Nach dem Login kopieren
  19:             width: 50px;
Nach dem Login kopieren
  20:             height: 50px;
Nach dem Login kopieren
  21:             margin-left: 10px;
Nach dem Login kopieren
  22:             float: left;
Nach dem Login kopieren
  23:             border: 1px solid #ccc;
Nach dem Login kopieren
  24:             background-color: #ccc;
Nach dem Login kopieren
  25:             border-radius:25px;
Nach dem Login kopieren
  26:             text-align: center;
Nach dem Login kopieren
  27:         }
Nach dem Login kopieren
  28:         li:hover
Nach dem Login kopieren
  29:         {
Nach dem Login kopieren
  30:             background-color: red;
Nach dem Login kopieren
  31:         }
Nach dem Login kopieren
  32:         span
Nach dem Login kopieren
  33:         {
Nach dem Login kopieren
  34:             font-size: 30px;
Nach dem Login kopieren
  35:             line-height: 50px;
Nach dem Login kopieren
  36:         }
Nach dem Login kopieren
  37:     </style>
Nach dem Login kopieren
  38: </head>
Nach dem Login kopieren
  39: <body>
Nach dem Login kopieren
  40:     <div class="div">
Nach dem Login kopieren
  41:         <ul>
Nach dem Login kopieren
  42:             <li><span>1</span></li>
Nach dem Login kopieren
  43:             <li><span>2</span></li>
Nach dem Login kopieren
  44:             <li><span>3</span></li>
Nach dem Login kopieren
  45:             <li><span>4</span></li>
Nach dem Login kopieren
  46:         </ul>
Nach dem Login kopieren
  47:     </div>
Nach dem Login kopieren
  48: </body>
Nach dem Login kopieren

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage