Such a nice CSS, simple but with everything

Here is a good css that is from Netbeans.org. When using JQuery’s plugin accordion, this css will produce a very nice accordion.

body { width: 40em; margin: auto; }
a { outline: none; }
 
.ui-accordion {
	 margin: 0; padding: 0;
	 }
.ui-accordion li {
	 list-style-type: none;
	 border-bottom: 2px solid white;
	 }
.ui-accordion li .ui-accordion-header {
	 margin: 0; padding: 0 1em;
	 font: bold 14px/28px sans-serif;
	 color: #eef;
	 background-color: #aaf;
	 text-decoration: none;
	 display: block;
	 }
 
a.personName:hover { color: white; }
ul.infolist { display: block; }
 
.person {
	 background-color: #eef;
	 margin: 0; padding: 0;
	 border-bottom: 1px solid #ccf;
	 }
.person ul { padding: 0 3em 2em; }
.person ul li {
	 padding-top: 1em;
	 border: 0 none;
	 }
 
li:before {
	 color: #66f;
	 font-weight: bold;
	 display: inline-block;
	 width: 4.5em;
	 }
 
li.portrait img {
	 float: right;
	 margin: 1em;
	 border: 1px solid #ccf;
	 }
li.title:before { content: "Title: "; }
li.office:before { content: "Office: "; }
li.phone:before { content: "Phone: "; }
li.email:before { content: "E-mail: "; }
li.bio:before { content: "Bio: "; }

You may also like:

Leave a comment