Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > body text

CSS layout of a beautiful slider_Typical special effects

WBOY

Release： 2016-05-16 18:45:32

Original

1037 people have browsed it

Take a good look at the code, I believe it will help you a lot.
CSS layout of a beautiful slider_Typical special effects

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS layout for a beautiful slider</title>
<style type="text/css"> 
dl { 
margin: 0; 
padding: 0; 
} 
dt { 
position: relative; 
clear: both; 
display: block; 
float: left; 
width: 104px; 
height: 20px; 
line-height: 20px; 
margin-right: 17px; 
font-size: .75em; 
text-align: right; 
} 
dd { 
position: relative; 
display: block; 
float: left; 
width: 197px; 
height: 20px; 
margin: 0 0 15px; 
background: url("/upload/20091006163826471.jpg"); 
} 
* html dd { float: none; } 
dd div { 
position: relative; 
background: url("/upload/20091006163826679.jpg"); 
height: 20px; 
width: 75%; 
text-align:right; 
} 
dd div strong { 
position: absolute; 
right: -5px; 
top: -2px; 
display: block; 
background: url("/upload/20091006163826537.gif"); 
height: 24px; 
width: 9px; 
text-align: left; 
text-indent: -9999px; 
overflow: hidden; 
} 
</style>

<dl>
<dt>Life satisfaction: </dt>
<dd>
<div style="width:95%;"><strong>63%</strong></div>
</dd>
<dt>Job Satisfaction: </dt>
<dd>
<div style="width:55%;"><strong>38%</strong></div>
</dd>
<dt>Love satisfaction: </dt>
<dd>
<div style="width:75%;"><strong>86%</strong></div>
</dd>
</dl>

Related labels：

css slider

source：php.cn

Previous article：The sum of several attributes of a JS gadget cannot exceed a specific value._javascript tips Next article：javascript String split method misoperation_javascript skills

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

What is a NullPointerException, and how do I fix it?

2024-10-22 09:46:29
From Novice to Coder: Your Journey Begins with C Fundamentals

2024-10-13 13:53:41
Unlocking Web Development with PHP: A Beginner's Guide

2024-10-12 12:15:51
Demystifying C: A Clear and Simple Path for New Programmers

2024-10-11 22:47:31
Unlock Your Coding Potential: C Programming for Absolute Beginners

2024-10-11 19:36:51
Unleash Your Inner Programmer: C for Absolute Beginners

2024-10-11 15:50:41
Automate Your Life with C: Scripts and Tools for Beginners

2024-10-11 15:07:41
PHP Made Easy: Your First Steps in Web Development

2024-10-11 14:21:21
Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity

2024-10-11 12:59:11
The Key to Coding: Unlocking the Power of Python for Beginners

2024-10-11 12:17:31

Latest Issues

Where is the courseware about CSS mind mapping? Courseware

From 2024-04-16 10:10:18

0

0

1335

The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...

From 2024-04-06 21:58:04

0

1

800

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

How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...

From 2024-04-06 20:45:26

0

2

386

Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...

From 2024-04-06 20:41:51

0

1

518

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