css-common navigation bar style settings_html/css_WEB-ITnose

html code:

vertical navigation

• Succulents


• Flower Plants


• Foliage Plants< /a>


• Herbs


• Woody plants


• Aquatic plants

< ;/ul>



Horizontal navigation







• Main varieties


• < ;a href="#">Physiological characteristics


• Family and genus introduction
• Distribution


• Living Habits< ;/a>






Pagination content





1. Previous page


2. 1 < ;/a>


3. 2


4. 3


5. 4


6. 5


7. 6


8. Next page





css code and comments:

/*Refer to Mastering CSS~*/
/*Vertical Navigation*/
ul.sort
{
margin: 1px; /*Margin*/
padding: 1px; /*Padding*/
list-style-type: none; /*Remove the default bullet (the one in front of the item is very Ugly)*/
width: 8em;
background-color: #8BD400;
border: 1px solid #486B02;
}
ul.sort li
{
margin: 1px; /*Outer margin*/
background: url(img/arrow_state_blue_right.png) no-repeat 0% 50%;/*The image does not repeat; the image position*/
padding-left:15px ;/*Left white space for text*/
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
}
ul.sort a
{
display: block;/*In this way, the style of a will be applied to the entire li content (including the blank part behind)*/
color: #2B3F00;
text-decoration: none; /*underline*/
}
ul.sort a:hover,
ul.sort a:focus,
ul.sort .selected a
{
color: #E4FFD3;
background- color: #6DA203;
}

/*horizontal navigation*/
ul.des
{
margin: 1px;
padding: 1px;
overflow: When hidden;/*float, it does not occupy any space in the document flow, and the parent list will shrink if there is no actual content*/
}
ul.des li
{
float: left;
padding-right: 0.5em; /*White space before and after text*/
padding-left: 0.5em;
background-color: #8BD400;
border: 1px solid #486B02;
}
ul.des a
{
display: block;
color: #2B3F00;
text-decoration: none; /*underline*/
}
ul.des a :hover,
ul.des a:focus,
ul.des .selected a
{
color: #E4FFD3;
background-color: #6DA203;
}

/*Horizontal navigation (pagination)*/
ol.pagination
{
margin: 1px; /*Outer margin*/
padding: 1px; /*Inner margin*/
}
ol.pagination li
{
float: left;
margin-right: 0.6em;
}
ol.pagination a
{
display : block;
padding: 0.2em 0.5em;
border: 1px solid #ccc;
text-decoration: none; /*underline*/
}
ol.pagination a:hover ,
ol.pagination a:focus
{
background-color: blue;
color: white;
}
/*Remove the borders of the previous page and the next page and add formatting* /
ol.pagination a[rel="prev"],
ol.pagination a[rel="next"]
{
border: none;
}
ol. pagination a[rel="prev"]:before
{
content: "