in normal project, occasionally involved in some of the design of the front end, but, after all, not professional, so I've always wanted to learn of the system. Recently resigned, waiting for the entry of the new company, free with some CSS3 knowledge learning. Today from the implementation of a simple circular menu, to summarize some recent study results. Rendering is as follows:
code is as follows:


<Ul> <LI> <A href="http://www.jb51.net//css/#" > <Span> Front page </span> </a> </LI> <LI> <A href="http://www.jb51.net//css/#" > <Span> Users </span> </a> </LI> <LI> <A href="http://www.jb51.net//css/#" > <Span> Activities </span> </a> </LI> </ul> Results are as follows:


code is as follows:


ulMenu {list - style: none; }. UlMenu li {float: left; Height: 80 px; Width: 80 px; Padding: 0; Margin: 0; The text - align: center; The list - style: none; Margin: 10 px 10 px 0 0; }. UlMenu li a {display: block; Height: 100%; Padding: 0 px; The font - size: 12 px; The font - weight: bold; Color: # CCC; The text - decoration: none; }. UlMenu li a span {display: block; } the effect is as follows:


code is as follows:


ulMenu li {float: left; Height: 80 px; Width: 80 px; Padding: 0; Margin: 0; The text - align: center; The list - style: none; Background: rgba (0,0,0,0.3); Border-radius: 40 px; Moz - border-radius: 40 px; Webkit - border-radius: 40 px; Margin: 10 px 10 px 0 0; } the effect is as follows:


code is as follows:


<Ul class="ulMenu >" <LI> <A href="http://www.jb51.net//css/#" > <I> </i> <Span> Front page </span> </a> </LI> <LI> <A href="http://www.jb51.net//css/#" > <I> </i> <Span> Users </span> </a> </LI> <LI> <A href="http://www.jb51.net//css/#" > <I> </i> <Span> Activities </span> </a> </LI> <Div style="clear: both;" > </div> </ul> Give I add the style:

  code is as follows:  


ulMenu li a {I display: inline - block; Width: 24 px; Height: 24 px; Margin - top: 17 px; Margin - bottom: 25 em; The font - size: 28 px; } the effect is as follows:


code is as follows:


@ the font - face {the font-family: 'FontAwesome'; SRC: url ('. The font/fontawesome - webfont eot); SRC: url (" the font/fontawesome - webfont. Eot? # iefix ') format (' embedded opentype - '), and urls ('. The font/fontawesome - webfont woff) format (' woff) and url () '. The font/fontawesome - webfont the vera.ttf 'format (' truetype') and url ('. The font/fontawesome - webfont svgz# FontAwesomeRegular ') format (SVG ') and url ('. The font/fontawesome - webfont svg# FontAwesomeRegular ') format (' SVG '); The font - weight: normal; The font - style: normal; } 6. Then, we can use similar to the below styles to set ICONS:

  code is as follows:  


CSS: before {content: "\ f001"; } but the icon is very much, we can download it directly into the font file the following CSS folder of the font - awesome. CSS style file, that is to say, the top of a pile of font file references can be omitted for (and, of course, the real development introduced considering the modular CSS loading performance slightly, personal think that should be used sparingly, hope to have experience of predecessors grant instruction) :

  code is as follows:  


@import url (' the font - awesome. CSS '); For I add a corresponding CSS:

  code is as follows:  


<Ul class="ulMenu >" <LI> <A href="http://www.jb51.net//css/#" > <I class="icon - home" > </i> <Span> Front page </span> </a> </LI> <LI> <A href="http://www.jb51.net//css/#" > <I class="icon - user" > </i> <Span> Users </span> </a> </LI> <LI> <A href="http://www.jb51.net//css/#" > <I class="icon - th - large >" </i> <Span> Activities </span> </a> </LI> <Div style="clear: both;" > </div> </ul> Results are as follows:


code is as follows:


ulMenu li a: hover {color: # F90; } the effect is as follows:

# 0 - #


This concludes the body part