공부하는 남자   



  • Key log

    • 공부 하는 남자
    검색 하는 남자

  • Log in out

  • 관리자

  • 편집

  • 글 쓰기

  • Link

  • Home
    • 감성 목수일지 세상살이 코딩공부 html/CSS공부 직업 블로그팁 이따구 정치판

    미니홈피 만들기 네비게이터 바 코딩

    2020. 4. 11. 18:10   html과css공부

    미니 홈피 만들기 네비게이트 Category만들기

    미니 홈페이지에 드롭다운 버튼과 상단 홈에 이미지도 삽입 했다.
    이번 시간에는 네비 게이터 바에 카테고리의 일부를 넣는 작업을 해보기로 합니다.

    아래는 style css 선언 과 html 코딩 소스 입니다.

    네비 게이트 category만들기

    작동 가능 한 드롭다운 메뉴 버튼 만들기

    아래는 스타일 시트 입니다.

    <style>

      .loot{table-layout:fixed;width:auto;height:auto;text-align:center;

        }

      .looa{width:370px;height:80px;font-family:Malgun Gothic,Arial;font-size:3rem;text-align:center;background:orange;border:1px solid gray;

        }/*home*/

       .loob{width:370px;height:50px;font-family:Malgun Gothic,Arial;font-size:3rem;text-align:center;background:lime;border:1px solid gray;

        }/*navi*/

       .looc{width:300px;height:50px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:blue;border:1px solid gray;color:white;

        }/*본문광고*/

       .lood{width:70px;height:50px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:rgb(230,200,230);border:1px solid gray;

        }/*블로그 설명*/

       .looe{width:300px;height:500px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:gray;border:1px solid gray;

        }/*본문*/

       .loof{width:70px;height:100px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:skyblue;border:1px solid gray;

        }/*사이드바1,2,3*/

      .loog{width:70px;height:100px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:blue;border:1px solid gray;

        } /*광고1,2*/

     .looj{width:300px;height:50px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:skyblue;border:1px solid gray;

        }/*foot*/

      .look{width:70px;height:50px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:blue;border:1px solid gray;

        } /*하단광고*/ 

        .looser{width:370px;height:auto;font-family:Malgun Gothic,Arial;font-size:1.5rem;text-align:left;background:#000;border:1px solid gray;border-radius:0.7em;color:white; white-space:nowrap;overflow-x:scroll;

        } 

      div,ul,li{margin:0;padding:0;

        }

      a{text-decoration:none;

        }

      #wrrp{width:auto;height:auto;position:relative;

        }

      #wrrp>ul{width:288px;height:30px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:none;position:relative;border:1px solid gray;border-radius:0.7em;color:white; /*white-space:nowrap;overflow-x:scroll;*/list-style-type:none;

    작동 가능한 드롭다운 메뉴 버튼 만들기

        }

      #wrrp>ul>li{float:left;width:60px;height:30px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:#000;border:1px solid gray;border-radius:0.7em;position:relative;left:0;top:-236px;list-style-type:none;

        }

      #wrrp>ul>li>a{width:60px;height:30px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;color:white;text-decoration:none;

        /*background:none;border:1px solid gray;border-radius:0.7em;white-space:nowrap;overflow-x:scroll;*/list-style-type:none;

        }

      #wrrp>ul>li>a:hover{display:block;width:70px;height:30px;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:red;border:1px solid gray;border-radius:0.7em;color:blue;position:relative;left:-5px;text-decoration:none;list-style-type:none;

        }

      #wrrp ul{list-style-type:none;

        }

      #wrrp ul li{list-style-type:none;

        }

      #wrrp ul ul{display:none;

        }

      #wrrp ul li:hover ul{display:block;width:71px;height:30;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:none;color:purple;position:relative;left:0;top:8px;list-style-type:none;

        }

      #wrrp li li{display:block;width:71px;height:30;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;/*background:yellow;border:1px solid gray;border-radius:0.7em;*/list-style-type:none;

        }

       #wrrp li li a{display:block;width:71px;height:30;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;background:yellow;border:1px solid gray;border-radius:0.7em;color:blue;text-decoration:none;list-style-type:none;

        }

       #wrrp li li a:hover{width:71px;height:30;font-family:Malgun Gothic,Arial;font-size:1rem;text-align:center;/*background:green;border:1px solid gray;border-radius:0.7em;color:yellow; white-space:nowrap;overflow-x:scroll;*/text-decoration:none;list-style-type:none;

        }

      .big{font-size:3rem;color:red;

        }

      </style>

    작동 가능 한 드롭다운 메뉴 버튼 만들기

    아래는 html code 입니다.

    html

    <table class="loot">

    <tbody>

    <tr>

    <td class="looa" colspan="3"> <a href="#">공부하는 남자<img src="http://tistory1.daumcdn.net/tistory/620892/skin/images/수정_로보캅1.JPG?=1687372332"></a> </td>

    </tr>

    <tr>

    <td class="loob" colspan="3">

    <div id="secondNava"> 

    <span class="libs"><a href="http://eproo.tistory.com"> <b style="color:red">Home</b></a>

        </span>

    <span class="libs"><a href="https://eproo.tistory.com/manage/entry/post">

    <b style="color:green">쓰기</b></a>

    </span>

    <span class="libs"><a href="/category_list"><b style="color:#ff1493">전체</b></a></span> 

    <span class="libs">

    <a href="/category/%EB%B8%94%EB%A1%9C%EA%B7%B8%EC%99%80%20%EA%B0%90%EC%84%B1"><b style="color:blue"> 감성</b></a></span>

    <span class="libs"><a href="http://eproo.tistory.com/category/목수일지"><b style="color:purple">목수일지</b></a></span>

        </div> 

    </td>

    </tr>

    <tr>

    <td class="looc" colspan="2">본문광고</td>

    <td class="lood">블로그 설명</td>

    </tr>

    <tr>

    <td class="looe" colspan="2" rowspan="5">

    <div id="wrrp">

    <ul>

    <li><a href="https://eproo.tistory.com/341#menu">홈</a>

    <ul>

    <li><a href="https://eproo.tistory.com/341#mend">style</a></li>

    <li><a href="https://eproo.tistory.com/341#mend">css</a></li>

    <li><a href="https://eproo.tistory.com/341#mend">css</a></li>

    <li><a href="https://eproo.tistory.com/341#mend">css</a></li>

    </ul>

    </li>

    <li><a href="https://eproo.tistory.com/341#menu">html공부</a>

    <ul>

    <li><a href="https://eproo.tistory.com/341#menc">style</a></li>

    <li><a href="https://eproo.tistory.com/341#menc">css</a></li>

    <li><a href="https://eproo.tistory.com/341#menc">css</a></li>

    <li><a href="https://eproo.tistory.com/341#menc">css</a></li>

    </ul>

    </li>

    <li><a href="https://eproo.tistory.com/341#menu">코딩공부</a>

    <ul>

    <li><a href="https://eproo.tistory.com/341#menb">홈페이지</a></li>

    <li><a href="https://eproo.tistory.com/341#menb">css</a></li>

    <li><a href="https://eproo.tistory.com/341#menb">css</a></li>

    <li><a href="https://eproo.tistory.com/341#menb">css</a></li>

    </ul>

    </li>

    <li><a href="https://eproo.tistory.com/341#menu">생활코딩</a>

    <ul>

    <li><a href="https://eproo.tistory.com/341#mena">css</a></li>

    <li><a href="https://eproo.tistory.com/341#mena">css</a></li>

    <li><a href="https://eproo.tistory.com/341#mena">css</a></li>

    <li><a href="https://eproo.tistory.com/341#mena">css</a></li>

    </ul>

    </li>

    </ul>

    </div>

    작동 가능한 드롭다운 메뉴 버튼 만들기

    </td>

    <td class="loof">사이드바1</td>

    </tr>

    <tr>

    <td class="loog">광고1</td>

    </tr>

    <tr>

    <td class="loof">사이드바2</td>

    </tr>

    <tr>

    <td class="loog">광고2</td>

    </tr>

    <tr>

    <td class="loof">사이드바3</td>

    </tr>

    <tr>

    <td class="looj" colspan="2">foot</td>

    <td class="look">하단 광고</td>

    </tr>

    </tbody>

    </table>

     


    아래는 결과 입니다.

    공부하는 남자
    본문navi 블로그 설명
    사이드바1
    광고1
    사이드바2
    광고2
    사이드바3
    foot 하단 광고

    작동 가능한 드롭다운 메뉴 버튼 만들기

     

    T,back:     Comment:

    티스토리툴바