CSS3 Media Queries examples
This chapter we will demonstrate you some examples for multimedia.
Before we begin to make a list of links to the electronic mailbox. HTML code is as follows:
Example 1
<Html>
<Head>
<Style>
ul {
list-style-type: none;
}
ul li a {
color: green;
text-decoration: none;
padding: 3px;
display: block;
}
</ Style>
</ Head>
<Body>
<Ul>
<Li> <a data-email = "[email protected]" href = "mailto: [email protected]"> John Doe </ a> </ li>
<Li> <a data-email = "[email protected]" href = "mailto: [email protected]"> Mary Moe </ a> </ li>
<Li> <a data-email = "[email protected]" href = "mailto: [email protected]"> Amanda Panda </ a> </ li>
</ Ul>
</ Body>
</ Html>
try it"
Note that data-email
properties. In HTML we can use with data-
attribute prefix to store information.
520 to 699px width - add the mailbox icon
When the width of the browser in the 520 to 699px, the mailbox before adding the Mail icon link:
Example 2
ul li a {
padding-left: 30px;
background: url (email-icon.png) left center no-repeat;
}
}
try it"
700 to 1000px - add text prefix information
When the width of the browser 700 to 1000px, will link a mailbox before adding "Email:":
Example 3
ul li a: before {
content: "Email:";
font-style: italic;
color: # 666666;
}
}
try it"
Greater than 1001px width - Add e-mail address
When the browser is wider than 1001px, contact e-mail address will be added after the link.
We use data-
attributes to add e-mail addresses after each of the names:
Example 4
ul li a: after {
content: "(" attr (data -email) ")";
font-size: 12px;
font-style: italic;
color: # 666666;
}
}
try it"
Greater than 1151px width - add icon
When the browser is wider than 1001px, names will be added in front of the icon.
Example, we do not have to write additional query blocks, we can use in the existing media queries separated by commas to add additional media queries (similar OR operator):
Example 5
ul li a {
padding-left: 30px;
background: url (email-icon.png) left center no-repeat;
}
}
try it"
More examples
Use the mailing list link on a Web page sidebar
The examples in the left column of the page to add a mailing list of links.