页面布局

页面布局

左右结构,侧边导航。

导航一
导航二
导航三
导航四
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
<div id="woui_web_normdaohanglisttwo">
<div class="woui_web_norm_wrapper">
<div class="containTwo">
<div class="conSide">
<div id="leader">
<div>
<div class="firlogo">Logo</div>
</div>
<div>
<div class="firlogo" id="lead">导航一<i class="woui-icon icon-arrow-top"></i></div>
<div class="sub-list">
<div><a>二级内容</a></div>
<div><a>二级内容</a></div>
<div><a>二级内容</a></div>
</div>
</div>
<div><div class="firlogo">导航二</div></div>
<div><div class="firlogo">导航三</div></div>
</div>
</div>
<div class="conMiddle-top">
<div>导航一</div>
<div>导航二</div>
<div>导航三</div>
<div>导航四<i class="woui-icon icon-arrow-top"></i></div>
</div>
<div class="conMiddle">
<div class="conMc"><div><a>首页</a> / <a>内容</a> / <a>内容</a></div></div>
</div>
</div>
</div>
</div>

顶部导航+侧边栏。

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
<div id="woui_web_normtopside">
<div class="woui_web_normtopside-box">
<div class="woui_web_normtopsideone">
<div class="logo"><a>Logo</a></div>
<div class="list">
<div class="listone"><a>导航一</a></div>
<div class="listone"><a>导航二</a></div>
<div class="listone"><a>导航三</a></div>
<div class="listone"><a>导航四</a></div>
<div class="listone"><a>导航五</a></div>
</div>
</div>
<div class="woui_web_normtopsidethree">
<div class="woui_web_normtopsidethreeinner">
<div class="woui_web_normtopsidethreeinnernavigation">
<div class="firname">
<div class="firnamelist">导航一<i class="icon icon-arrow-top"></i>
<div class="sub-list"><div><a>二级内容</a></div><div><a>二级内容</a></div></div>
</div>
<div class="firname"><div class="firnamelist">导航一<i class="woui-icon icon-arrow-down"></i></div></div>
<div class="firname"><div class="firnamelist">导航一<i class="woui-icon icon-arrow-down"></i></div></div>
</div>
</div>
</div>
</div>
</div>
</div>

顶部导航+侧边栏。

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
<div id="woui_web_normtopside">
<div class="woui_web_normtopside-box">
<div class="woui_web_normtopsideone">
<div class="logo"><a>Logo</a></div>
<div class="list">
<div class="listone"><a>导航一</a></div>
<div class="listone"><a>导航二</a></div>
<div class="listone"><a>导航三</a></div>
<div class="listone"><a>导航四</a></div>
<div class="listone"><a>导航五</a></div>
</div>
</div>
<div class="woui_web_normtopsidethree">
<div class="woui_web_normtopsidethreeinner">
<div class="woui_web_normtopsidethreeinnernavigation">
<div class="firname">
<div class="firnamelist">导航一<i class="woui-icon icon-arrow-top"></i>
<div class="sub-list"><div><a>二级内容</a></div><div><a>二级内容</a></div></div>
</div>
<div class="firname"><div class="firnamelist">导航一<i class="woui-icon icon-arrow-down"></i></div></div>
<div class="firname"><div class="firnamelist">导航一<i class="woui-icon icon-arrow-down"></i></div></div>
</div>
</div>
</div>
</div>
</div>
</div>

顶部导航 无侧边栏

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
<div id="woui_web_normtopnoside">
<div class="woui_web_normtopnoside-box">
<div class="woui_web_normtopsideone">
<div class="logo"><a>Logo</a></div>
<div class="list">
<div class="listone"><a>导航一</a></div>
<div class="listone"><a>导航一</a></div>
<div class="listone"><a>导航一</a></div>
<div class="listone"><a>导航一</a></div>
<div class="listone"><a>导航一</a></div>
</div>
</div>
<div class="woui_web_normtopsidetwo">
<div class="list">
<div class="listone"><a>二级导航</a></div>
<div class="listone"><a>二级导航</a></div>
<div class="listone"><a>二级导航</a></div>
<div class="listone"><a>二级导航</a></div>
<div class="listone"><a>二级导航</a></div>
</div>
</div>
<div class="woui_web_normtopsidethree">
<div class="woui_web_normtopsidethreeinner">
<div class="conMc"><div><a>首页</a> / <a>内容</a> / <a>内容</a></div></div>
</div>
</div>
</div>
</div>