1.Simple List
<div>
<h2>HelvetiList</h2>
<ul>
<li><a href="#">Zurich</a></li>
<li><a href="#">Geneva</a></li>
<li><a href="#">Winterthur</a></li>
<li><a href="#">Lausanne</a></li>
<li><a href="#">Lucerne</a></li>
</ul>
</div>
div {
width: 200px;
}
h2 {
font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
border-bottom: 1px solid #ccc;
}
li:last-child {
border: none;
}
li a {
text-decoration: none;
color: #000;
display: block;
width: 200px;
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;
}
li a:hover {
font-size: 30px;
background: #f6f6f6;
}
2.Thumbnail
<div>
<ul>
<li>
<img src="http://lorempixum.com/100/100/nature/1" />
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet...</p>
</li>
<li>
<img src="http://lorempixum.com/100/100/nature/2" />
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet...</p>
</li>
<li>
<img src="http://lorempixum.com/100/100/nature/3" />
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet...</p>
</li>
<li>
<img src="http://lorempixum.com/100/100/nature/4" />
<h3>Headline</h3>
<p>Lorem ipsum dolor sit amet...</p>
</li>
</ul>
</div>
* {margin: 0; padding: 0;}
div {
margin: 20px;
}
ul {
list-style-type: none;
width: 500px;
}
h3 {
font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
li img {
float: left;
margin: 0 15px 0 0;
}
li p {
font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
li {
padding: 10px;
overflow: auto;
}
li:hover {
background: #eee;
cursor: pointer;
}
3. Grid
<div>
<ul>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
<li><a href="#"><img src="http://placehold.it/150x150" /></a></li>
</ul>
</div>
* {
margin: 0;
padding: 0;
}
body {
background: #333;
}
div {
width: 900px;
margin: 0 auto;
overflow: auto;
}
ul {
list-style-type: none;
}
li img {
float: left;
margin: 10px;
border: 5px solid #fff;
-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
-ms-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
}
li img:hover {
-webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
}
4.Horizontal
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
* {
margin: 0;
padding: 0;
}
nav {
margin: 50px;
}
ul {
overflow: auto;
list-style-type: none;
}
li {
height: 25px;
float: left;
margin-right: 0px;
border-right: 1px solid #aaa;
padding: 0 20px;
}
li:last-child {
border-right: none;
}
li a {
text-decoration: none;
color: #ccc;
font: 25px/1 Helvetica, Verdana, sans-serif;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
li a:hover {
color: #666;
}
li.active a {
font-weight: bold;
color: #333;
}
5. Big Number Order
<div>
<ol>
<li><span>1.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p></li>
<li><span>2.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li>
<li><span>3.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li>
</ol>
</div>
div {
width: 500px;
margin: 10px
}
ol {
color: #ccc;
list-style-type: none;
}
ol li {
position: relative;
font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
margin-bottom: 20px;
}
li p {
font: 12px/1.5 Helvetica, sans-serif;
padding-left: 60px;
color: #555;
}
span {
position: absolute;
}
source : https://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/
'Web(HTML5)' 카테고리의 다른 글
| ul 태그 안에 있는 li 지우기 ( Remove ul tag child) (0) | 2017.08.30 |
|---|---|
| json jquery populate each example (0) | 2017.08.30 |
| Google 검색엔진에 내 블로그 나 Web Site 등록하기 (0) | 2017.08.28 |
| div 가운데 넣기 (0) | 2017.08.05 |
| 온라인 HTML 편집 툴 (Html Online Editor) (0) | 2017.07.28 |