css ul li 하단영역 만들기

css ul li 하단영역 만들기

출처 : http://www.naver.com

하단 영역에 회사소개등 만들때 ul로 만들면 된다.

//--------------------------------------------------------------------------------------------------------------------------------------

  <style>

body { 

font-size:12px; 

font-family: Dotum,'돋움',Helvetica;

}

a{

text-decoration:none;

color: #888; 

}

ol, ul {

list-style: none;

}

li {   

float: left; 

    margin-left: 14px;

vertical-align: top;

letter-spacing: -1px;

font-size: 12px;

line-height: 16px;

}

.at_bar {

display: inline-block;

margin-right: 14px;

width: 1px;

height: 11px;

background: #e8e9ec;

vertical-align: -2px;

}

address {

font-style: normal;

float: left;

vertical-align: top;

font-weight: 700;

font-size: 12px;

line-height: 16px;

margin-left:14px;

}

  </style>

<div>

<ul>

<li><a href="###" >회사소개</a></li>

<li><span class="at_bar"></span><a href="###" >인재채용</a></li>

<li><span class="at_bar"></span><a href="###" >제휴제안</a></li>

<li><span class="at_bar"></span><a href="###" >이용약관</a></li>

<li><span class="at_bar"></span><a href="###" ><strong class="at_st">개인정보처리방침</strong></a></li>

<li><span class="at_bar"></span><a href="###" >청소년보호정책</a></li>

<li><span class="at_bar"></span><a href="###" >네이버 정책</a></li>

<li><span class="at_bar"></span><a href="###" >고객센터</a></li>

</ul>

<address>ⓒ <a href="http://www.navercorp.com/" target="_blank" >NAVER Corp.</a></address>

</div>

 

//--------------------------------------------------------------------------------------------------------------------------------------

css ul li 하단영역 만들기 끝 ~ !!