티스토리 뷰

HTML,CSS

[HTML CSS 레이아웃] 레이아웃 연습 1

란텔 2014. 4. 30. 16:56

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<html>
<head>
 
<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script>
    $(document).ready(function(){
       
        $('#nav > div > div:nth-child(1)').mouseover(function(){
            //alert(this.parentNode.id);
            var tagName =  '#' + this.parentNode.id + '_sub';
            $(tagName).css('visibility','visible');
          // alert('div left'+$(this).position().left);
            //alert('div top'+$(this).position().top);
        });
        
        $('#nav > div').mouseleave(function(){
            //alert(this.parentNode.id);
            var tagName =  '#' + this.id + '_sub';
            $(tagName).css('visibility','hidden');
           //alert('div left'+$(this).position().left);
            //alert('div top'+$(this).position().top);
        });
    
    });
  
</script>
 
<style>
    body{
        width:960px;
        margin:0 auto;
        font-family: 돋움;
        font-size: 13px;
}
   
    #aside{
        width:150px;
        clear: both;
        float:left;
}
    
    #section{
        width:450px;;
        float:left;
}
    
    #logo{
        display: inline;
}
    
    #header{
        margin-top: 10px;
}
    
    #content{
        margin-top: 50px;
}
    
    #link_menu{
        display: inline-block;
        float: right
    }
    
    #nav{
        margin-top:20px;
        text-align: center;
        clear: both;
}
   
    #nav div{
        display:inline-block;
        width:250px;
}
   
   #intro_sub, #area_sub, #recruit_sub{
       margin:0;
       padding:0;
}
    
    div ul{
        //margin:0 auto;
        display: inline;
        z-index:3;
        zoom:1;
}
    div ul li{
        padding:0 2 0 0;
        display: inline;
}
    
    #nav div div:nth-child(2){
        visibility: hidden;
}
     
    #footer{
        text-align: center;
        clear: both;  
        position:fixed; left:0; right:0; bottom:0;
        padding-bottom:20px;
}
  
</style>
 
 
 
<title></title>    
</head>
<body>
    
    
<div id="header">
    <div id="logo">
        회사로고
    </div>
    <div id="link_menu">
        <a href="#">home</a> | <a href="">sitemap</a>
    </div>
</div>
 
<div id="nav">
    
    
    <div id="intro">
        <div>회사소개</div>
        <div>
        <ul id="intro_sub">
            <li><a href="#">소개</a></li>
            <li><a href="#">연혁</a></li>
            <li><a href="#">조직구성도</a></li>
            <li><a href="#">오시는길</a></li>
        </ul>
       </div>
    </div>
    
    
    
    <div id="area">
        <div>사업분야</div>
        <div>
        <ul id="area_sub">
            <li><a href="#">SI</a></li>
            <li><a href="#">R&D</a></li>
            <li><a href="#">CRM</a></li>
        </ul>
        </div>
    </div>
        
   
    <div id="recruit">
        <div>채용</div>
        <div>
        <ul id="recruit_sub">
            <li><a href="#">복리후생</a></li>
            <li><a href="#">채용정보</a></li>
        </ul>
        </div>
    </div>
    
</div>
 
<div id="content">
    <div id="aside">aside</div>
    <div id="section">section</div>
</div>
 
<div id="footer">
    footer
</div>
</body>
</html>


CSS를 이해하기 위해서 코드를 짜보고 있다.

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

'HTML,CSS' 카테고리의 다른 글

CSS를 변형하는 transition속성  (0) 2016.07.06
레이아웃 연습2[전체보기 만들기]  (0) 2014.05.06
CSS 선택자 종류  (0) 2013.11.10
공유하기 링크
Comments
Related Articles more
최근에 올라온 글
최근에 달린 댓글
TAG
more
Total
Today
Yesterday