How to call <li class=“#”> in CSS? > HTML,CSS,레이아웃

본문 바로가기

검색취소

How to call
  • in CSS?
  • 검색 이전 다음 목록

    본문

    <li class="my-class">...</li>

     

    #nav li {border-right:1px solid #f00}

    and then you have class="no-border" on the last <li> in the list, then you'll need this to remove the border:

     

    #nav li.no-border {border-right:none}

    div ul li.no-border a { }

     

     

     

     

    ex)

     

     

    <?php

    $sql = " select *

    from {$g5['menu_table']}

    where me_mobile_use = '1'

     and length(me_code) = '2'

    order by me_order ";

    $result = sql_query($sql, false);

    $arr_menu_top=array();

    $arr_menu_sub=array();

     

    for($i=0; $row=sql_fetch_array($result); $i++) {

    $arr_menu_top[]=$row;

    $sql2 = " select *

    from {$g5['menu_table']}

    where me_mobile_use = '1'

     and length(me_code) > '2'

     and substring(me_code, 1, 2) = '{$row['me_code']}'

    order by me_order ";

    $result2 = sql_query($sql2);

    //echo $sql2;

     

       for ($k=0; $row2=sql_fetch_array($result2); $k++) {

    $arr_menu_sub[ $row[me_code] ][]=$row2;

    }

     

    }

     

    ?>

     

     

     

     

    <style>

    ul,ol {list-style:none;}

    img {border:none;}

     

     

    #navi {position:relative; width:100%; height:91px;}

    #navi li {float:left; width:33%; background:#60ba2f; text-align:center; padding:15px 0; font-size:10pt; font-family:NanumGothic,'나눔고딕',ng,sans-serif; color:#fff; font-weight:bold; border-right:solid 1px #fff; border-bottom:solid 1px #fff;}

    #navi li a {color:#fff;}

     

    #sub_navi {position:relative; width:100%; height:auto; margin-top:30px;}

    #sub_navi li {width:100%; background:#8ebf73; text-align:left; padding:10px 0 10px 10px; font-size:10pt; font-family:NanumGothic,'나눔고딕',ng,sans-serif; color:#fff; font-weight:bold; border-right:solid 1px #578a3c; border-bottom:solid 1px #578a3c;}

    #sub_navi li a {color:#fff; text-decoration:none;}

     

    #sub_navi li.sub2depth {padding-left:20px;font-weight:normal;}

    </style>

     

     

     

     

    <div id="navi">

    <ul>

    <?

     

    //현재위치 찾기

    $cur_me_code='';

    foreach($arr_menu_top as $row) {

    if (!$cur_me_code && ar_check_menu_url($row['me_link']))

    $cur_me_code=$row[me_code];

    if (!$cur_me_code) {

    foreach($arr_menu_top as $row) {

     

    foreach($arr_menu_sub[ $row[me_code] ] as $row2) { 

    if (ar_check_menu_url($row2['me_link'])) {

    $cur_me_code=$row[me_code];

    break;

    }

    }

    if ($cur_me_code) break;

    }

     

    foreach($arr_menu_top as $row) {

    ?>

    <li><a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"><?=$row['me_name']?></a></li>

    <? } ?>

        </ul>

    </div>

     

     

    <? if ($arr_menu_sub[$cur_me_code]) { ?>

     

    <div id="sub_navi">

    <ul>

    <? foreach($arr_menu_sub[$cur_me_code] as $row) { ?>

    <li class='<?=($row[me_order]%100?'sub2depth':'')?>'><a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"><?=$row['me_name']?></a></li>

    <? } ?>

        </ul>

    </div>

    <? } ?>

    추천 0

    등록된 댓글이 없습니다.

    검색취소

    HTML,CSS,레이아웃

    검색
    • no image
    • CSS : 반응형 웹(Responsive Web)

       CSS : 반응형 웹(Responsive Web)Posted by 서 지수 in 배움터 - 열공on Mar 31st, 2014태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많…

    • no image
    • CSS 글 자간 줄간 설정방법

      CSS 글 자간 줄간 설정방법 글 꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가…

    • #5cf039 헥스 색상 코드
    • #5cf039 헥스 색상 코드

      첨부파일

      #5cf039 정보 반전#a30fc625% 포화도#52ff2a그레이스케일#949494 25% 밝게#94f57e원본#5cf03925% 어둡게#34cf0f lawngreen#7cfc0025% 포화도 저하#6ad94f웹 …

    • CSS 레이아웃... Copy & Paste
    • CSS 레이아웃... Copy & Paste

      첨부파일

      오랜만에 그냥 팁 하나! CSS 레이아웃이 익숙치 않은 나 같은 분을 위한 친절한 사이트.. Copy & Paste를 해도 걱정 없다.Dynamic Drive CSS Layouts via Ajaxian 덤으로 왼쪽 …

    • XHTML+CSS 레이아웃 디자인 예제
    • XHTML CSS 레이아웃 디자인 예제

      첨부파일

      XHTML과 CSS로 레이아웃 디자인을 할 때 많이 쓰이는 레이아웃 디자인 템플릿을 모아둔 싸이트가 있다.http://www.intensivstation.ch/en/templates/일반적으로 사용되는 웬만한 레이아…

    • CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기
    • CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기

      *예전에 작성했던 강좌의 마지막 부분입니다. CSS를 통해 이전 강좌에서 작성한 마크업에 모양새를 입히기 전에 한 번 복습 하는 의미로 참고하면 좋겠네요 float 속성이번 시간에는 css를 통해 레이아우팅을 할 때…

    ?>