Skip to content

Instantly share code, notes, and snippets.

@HenriqueLimas

HenriqueLimas/index.html

Created June 12, 2015 11:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save HenriqueLimas/82345dd72399f641915e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save HenriqueLimas/82345dd72399f641915e to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/hename
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.image {
list-style-image: url('http://www.maujor.com/tutorial/interativo/logo-css3.png');
}
.inside {
list-style-position: inside;
}
.outside {
list-style-position: outside;
}
.none {
list-style-type: none;
}
.disc {
list-style-type: disc;
}
.circle {
list-style-type: circle;
}
.square {
list-style-type: square;
}
.decimal {
list-style-type: decimal;
}
.decimal-leading-zero {
list-style-type: decimal-leading-zero;
}
.upper-alpha {
list-style-type: upper-alpha;
}
.lower-alpha {
list-style-type: lower-alpha;
}
.upper-roman {
list-style-type: upper-roman;
}
.lower-roman {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<ul class="image inside">
<li>Fist item</li>
<li>Second item</li>
</ul>
<ul class="image outside">
<li>Firts item</li>
<li>Second item</li>
</ul>
<section>
<h1>Differents types</h1>
<h4>None:</h4>
<ul class="none">
<li>Firt item</li>
<li>Second item</li>
</ul>
<h4>Disc</h4>
<ul class="disc">
<li>First Item</li>
<li>Second item</li>
</ul>
<h4>Circle</h4>
<ul class="circle">
<li>Firt item</li>
<li>Second item</li>
</ul>
<h4>Square</h4>
<ul class="square">
<li>First item</li>
<li>Second item</li>
</ul>
<h4>Decimal</h4>
<ul class="decimal">
<li>First item</li>
<li>Second item</li>
</ul>
<h4>Decimal leading zero</h4>
<ul class="decimal-leading-zero">
<li>First item</li>
<li>Second item</li>
</ul>
<h4>Upper Alpha</h4>
<ul class="upper-alpha">
<li>First item</li>
<li>Second item</li>
</ul>
<h4>Lower Alpha</h4>
<ul class="lower-alpha">
<li>First item</li>
<li>Second item</li>
</ul>
<h4>Upper Roman</h4>
<ul class="upper-roman">
<li>First item</li>
<li>Second item</li>
</ul>
<h4>Lower Roman</h4>
<ul class="lower-roman">
<li>First item</li>
<li>Second item</li>
</ul>
</section>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul class="image inside">
<li>Fist item</li>
<li>Second item</li>
</ul>
<ul class="image outside">
<li>Firts item</li>
<li>Second item</li>
</ul>
<section>
<h1>Differents types</h1>
<h4>None:</h4>
<ul class="none">
<li>Firt item</li>
<li>Second item</li>
</ul>
<h4>Disc</h4>
<ul class="disc">
<li>First Item</li>
<li>Second item</li>
</ul>
<h4>Circle</h4>
<ul class="circle">
<li>Firt item</li>
<li>Second item</li>
</ul>
<h4>Square</h4>
<ul class="square">
<li>First item</li>
<li>Second item</li>
</ul>
<h4>Decimal</h4>
<ul class="decimal">
<li>First item</li>
<li>Second item</li>
</ul>
<h4>Decimal leading zero</h4>
<ul class="decimal-leading-zero">
<li>First item</li>
<li>Second item</li>
</ul>
<h4>Upper Alpha</h4>
<ul class="upper-alpha">
<li>First item</li>
<li>Second item</li>
</ul>
<h4>Lower Alpha</h4>
<ul class="lower-alpha">
<li>First item</li>
<li>Second item</li>
</ul>
<h4>Upper Roman</h4>
<ul class="upper-roman">
<li>First item</li>
<li>Second item</li>
</ul>
<h4>Lower Roman</h4>
<ul class="lower-roman">
<li>First item</li>
<li>Second item</li>
</ul>
</section>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">.image {
list-style-image: url('http://www.maujor.com/tutorial/interativo/logo-css3.png');
}
.inside {
list-style-position: inside;
}
.outside {
list-style-position: outside;
}
.none {
list-style-type: none;
}
.disc {
list-style-type: disc;
}
.circle {
list-style-type: circle;
}
.square {
list-style-type: square;
}
.decimal {
list-style-type: decimal;
}
.decimal-leading-zero {
list-style-type: decimal-leading-zero;
}
.upper-alpha {
list-style-type: upper-alpha;
}
.lower-alpha {
list-style-type: lower-alpha;
}
.upper-roman {
list-style-type: upper-roman;
}
.lower-roman {
list-style-type: lower-roman;
}</script>
</body>
</html>
Raw
jsbin.hename.css
.image {
list-style-image: url('http://www.maujor.com/tutorial/interativo/logo-css3.png');
}
.inside {
list-style-position: inside;
}
.outside {
list-style-position: outside;
}
.none {
list-style-type: none;
}
.disc {
list-style-type: disc;
}
.circle {
list-style-type: circle;
}
.square {
list-style-type: square;
}
.decimal {
list-style-type: decimal;
}
.decimal-leading-zero {
list-style-type: decimal-leading-zero;
}
.upper-alpha {
list-style-type: upper-alpha;
}
.lower-alpha {
list-style-type: lower-alpha;
}
.upper-roman {
list-style-type: upper-roman;
}
.lower-roman {
list-style-type: lower-roman;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment