Skip to content

Commit 9504295

Browse files
airenairen
committed
add two demo.
1 parent 936a207 commit 9504295

File tree

2 files changed

+228
-0
lines changed

2 files changed

+228
-0
lines changed

‎website/layout/fixed-layout/two-columns/demo5.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>W3cplus Layout Template | Two Columns Layout</title>
6+
<link href='http://fonts.googleapis.com/css?family=Amarante' rel='stylesheet' type='text/css'>
7+
<style type="text/css">
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
}
12+
13+
body {
14+
font-family: 'Amarante', cursive;
15+
background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat;
16+
text-align: center; /*IE6下让元素居中*/
17+
}
18+
19+
/*===================================================*\
20+
* *
21+
* Layout *
22+
* .container宽度=.sidebar宽度+间距+.main-content宽度 *
23+
* *
24+
\*===================================================*/
25+
/*清除浮动*/
26+
.container:after,
27+
.container:before {
28+
content: "";
29+
display: table;
30+
}
31+
32+
.container:after {
33+
clear: both;
34+
overflow: hidden;
35+
}
36+
37+
.container {
38+
width: 960px; /*页面总宽度*/
39+
margin: 0 auto; /*水平居中*/
40+
text-align: left; /*重置文本对齐方式*/
41+
zoom: 1;
42+
}
43+
44+
#header {
45+
background: #b1b1b1;/*header全屏背景色设置*/
46+
color: #fff;
47+
margin-bottom: 15px; /*顶部与主内容垂直间距，可自行修改*/
48+
}
49+
50+
.sidebar {
51+
width: 220px; /*左边栏宽度，可自行修改*/
52+
float: left;/*侧栏居左*/
53+
}
54+
55+
.main-content {
56+
width: 720px; /*主内容宽度*/
57+
float: right;/*主内容居右*/
58+
}
59+
60+
#footer {
61+
background: #b1b1b1;/*footer全屏背景色设置*/
62+
color: #fff;
63+
}
64+
65+
/*测试样式，可自行修改*/
66+
#header .container {
67+
height: 75px;
68+
}
69+
70+
.sidebar {
71+
height: 350px;
72+
background-color: #E7DBD5;
73+
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
74+
}
75+
76+
.main-content {
77+
background-color: #F2F2E6;
78+
height: 350px;
79+
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
80+
}
81+
82+
#footer .container {
83+
margin-top: 15px;
84+
}
85+
</style>
86+
</head>
87+
<body>
88+
<div id="header">
89+
<div class="container">
90+
<div class="header">
91+
<h1>Header content</h1>
92+
93+
<p>W3cplus Layout Template &#10173; Fixed Width Layout &#10173; Two Columns Layout </p>
94+
</div>
95+
</div>
96+
</div>
97+
<div id="page">
98+
<div class="container">
99+
<div class="main-content">
100+
<h2>Main Content</h2>
101+
</div>
102+
<div class="aside sidebar">
103+
<h2>Sidebar Content</h2>
104+
</div>
105+
</div>
106+
</div>
107+
<div id="footer">
108+
<div class="container">
109+
<h2>Footer Content</h2>
110+
</div>
111+
</div>
112+
113+
</body>
114+
</html>

‎website/layout/fixed-layout/two-columns/demo6.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>W3cplus Layout Template | Two Columns Layout</title>
6+
<link href='http://fonts.googleapis.com/css?family=Amarante' rel='stylesheet' type='text/css'>
7+
<style type="text/css">
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
}
12+
13+
body {
14+
font-family: 'Amarante', cursive;
15+
background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat;
16+
text-align: center; /*IE6下让元素居中*/
17+
}
18+
19+
/*===================================================*\
20+
* *
21+
* Layout *
22+
* .container宽度=.sidebar宽度+间距+.main-content宽度 *
23+
* *
24+
\*===================================================*/
25+
/*清除浮动*/
26+
.container:after,
27+
.container:before {
28+
content: "";
29+
display: table;
30+
}
31+
32+
.container:after {
33+
clear: both;
34+
overflow: hidden;
35+
}
36+
37+
.container {
38+
width: 960px; /*页面总宽度*/
39+
margin: 0 auto; /*水平居中*/
40+
text-align: left; /*重置文本对齐方式*/
41+
zoom: 1;
42+
}
43+
44+
#header {
45+
background: #b1b1b1;/*header全屏背景色设置*/
46+
color: #fff;
47+
margin-bottom: 15px; /*顶部与主内容垂直间距，可自行修改*/
48+
}
49+
50+
.sidebar {
51+
width: 220px; /*左边栏宽度，可自行修改*/
52+
float: right;/*侧栏居右*/
53+
}
54+
55+
.main-content {
56+
width: 720px; /*主内容宽度*/
57+
float: left;/*主内容居左*/
58+
}
59+
60+
#footer {
61+
background: #b1b1b1;/*footer全屏背景色设置*/
62+
color: #fff;
63+
}
64+
65+
/*测试样式，可自行修改*/
66+
#header .container {
67+
height: 75px;
68+
}
69+
70+
.sidebar {
71+
height: 350px;
72+
background-color: #E7DBD5;
73+
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
74+
}
75+
76+
.main-content {
77+
background-color: #F2F2E6;
78+
height: 350px;
79+
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
80+
}
81+
82+
#footer .container {
83+
margin-top: 15px;
84+
}
85+
</style>
86+
</head>
87+
<body>
88+
<div id="header">
89+
<div class="container">
90+
<div class="header">
91+
<h1>Header content</h1>
92+
93+
<p>W3cplus Layout Template &#10173; Fixed Width Layout &#10173; Two Columns Layout </p>
94+
</div>
95+
</div>
96+
</div>
97+
<div id="page">
98+
<div class="container">
99+
<div class="main-content">
100+
<h2>Main Content</h2>
101+
</div>
102+
<div class="aside sidebar">
103+
<h2>Sidebar Content</h2>
104+
</div>
105+
</div>
106+
</div>
107+
<div id="footer">
108+
<div class="container">
109+
<h2>Footer Content</h2>
110+
</div>
111+
</div>
112+
113+
</body>
114+
</html>

0 commit comments

Comments
 (0)