Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > Quickly create the focus of image carousels with CSS_html/css_WEB-ITnose

Quickly create the focus of image carousels with CSS_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:56:46
Original
1279 people have browsed it

Source: http://www.ido321.com/858.html

Rendering:

Demo address: http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/

Code: 

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

Related labels：
make picture fast focus Carousel
source：php.cn
Previous article：loading animation effect (collect it for later use)_html/css_WEB-ITnose Next article：:before和 :after_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1335
Regular expression to match words I have a script where I am trying to match new job names with existing job names in a data...
From 2024-04-06 21:24:04
0
1
606
Dynamically modify inline CSS styles in Javafx I'm trying to change the background image of a pane when the application is maximized. My ...
From 2024-04-06 20:57:16
0
1
487
Creating this specific design using a grid: a step-by-step guide I'm trying to create a layout similar to this image, I've tried using this grid but can't ...
From 2024-04-06 20:29:08
0
2
492
In mobile view, how can I close this navigation bar when the user clicks on the link? When the user clicks a link to browse the website, the navigation bar does not close? I've...
From 2024-04-06 19:23:03
0
1
411
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template