아무거나

ul li 가로정렬로 메뉴만들기 본문

Javascript & HTML & CSS/CSS

ul li 가로정렬로 메뉴만들기

전봉근 2019. 12. 26. 01:54
반응형
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ul li 가로정렬</title>
        <style type="text/css">
            * {margin:0; padding:0;}
            li {float:left; list-style:none; margin:1px;}
            li a {display:block; width:150px; height:40px; background:#c00; color:#fff; border1px solid blue; font-size:12px; font-family:"돋움";
             text-align:center; padding-top:10px; text-decoration:none;}
            li a span {display:block;}
            li a:hover {background:#099; text-decoration:none;}
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">COMPANY<span>회사소개</span></a></li>
            <li><a href="#">PRODUCT<span>제품소개</span></a></li>
            <li><a href="#">SERVICE<span>유지보수</span></a></li>
            <li><a href="#">CUSTOMER<span>고객지원</span></a></li>
            <li><a href="#">EDUCATION<span>협력업체</span></a></li>
        </ul>
    </body>
</html>

출처: http://itnamu21.tistory.com/81 [미래디자인 life] 

반응형
저작자표시 비영리 변경금지

'Javascript & HTML & CSS > CSS' 카테고리의 다른 글

미디어쿼리 반응형 웹 해상도별 처리  (0) 2019.12.26
모바일 스크롤바 항상 보이게 하기[ios 이슈]  (0) 2019.12.26
select box 디자인 화살표적용 css  (0) 2019.12.26
'Javascript & HTML & CSS/CSS' Related Articles more
Comments