Web前端基础(9)一个静态页面Demo

今天我们来练习做一个纯html和css的静态页面。demo显示地址http://dp2px.com/demo/boyahudong

头部导航条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="header">
<div class="inner_c">
<h1><img src="images/logo.png" /></h1>
<div class="nav">
<ul>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li><a href="#">网页栏目</a></li>
<li class="last"><a href="#">网页栏目</a></li>
</ul>
</div>
<a href="#" class="jrwm">加入我们</a>
</div>
</div>

在布局中我们将头部单独定义一个div,因为浏览器宽度不确定, 然后将我们要做的头部都放到inner_c中。然后划分为3个部分。首先定义出inner_c区域的宽高。

1
2
3
4
5
.header .inner_c{
width: 1000px;
height: 58px;
margin: 0 auto;
}
  1. logo显示区域,定义区域宽高,然后浮动。
1
2
3
4
5
6
7
.header .inner_c h1{
padding-left: 15px;
width: 170px;
height: 58px;
float: left;
padding-right: 40px;
}
  1. 菜单显示区域,同样定义区域宽高,浮动。
1
2
3
4
5
.header .inner_c .nav{
width: 607px;
height: 58px;
float: left;
}
  1. 加入我们超链接。

头部的全部css 样式

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
*{
margin: 0;
padding: 0;
}
body{
/*默认字体,这个属性能够继承,所以写给body*/
font-family: "Microsoft YaHei","SimSun";
}
.header{
/*这里没有width,因为这个盒子要通栏*/
/*在标准流里面,div是一个块级元素,没有width相当于撑满父亲 */
height: 58px;
background-color: #191D3A;
}
.header .inner_c{
width: 1000px;
height: 58px;
margin: 0 auto;
}
.header .inner_c h1{
padding-left: 15px;
width: 170px;
height: 58px;
float: left;
padding-right: 40px;
}
.header .inner_c .nav{
width: 607px;
height: 58px;
float: left;
}
.header .inner_c .nav ul{
/*去掉小圆点*/
list-style: none;
}
.header .inner_c .nav ul li{
float: left;
width: 100px;
height: 58px;
border-left: 1px solid #252947;
text-align: center;
line-height: 58px;
}
.header .inner_c .nav ul li.last{
border-right:1px solid #252947;
}
.header .inner_c .nav ul li a{
display: block;
width: 100px;
height: 58px;
text-decoration: none;
color:white;
font-size: 14px;
}
.header .inner_c .nav ul li a:hover{
background-color: #252947;
}
.header .inner_c .jrwm{
float: left;
width: 100px;
height: 34px;
background-color: #38B774;
margin-left: 48px;
position: relative;
top: 12px;
left: 0;
text-align: center;
line-height: 34px;
color:white;
text-decoration: none;
font-size: 12px;
/*圆角边框:*/
border-radius: 4px;
}
.header .inner_c a.jrwm:hover{
background-color: orange;
}

banner和广告位

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="banner">
<div class="content">
<div class="inner_c">
<div class="product">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>

我们采用色块来快速的对广告位和banner进行定位布局。然后做出色块的位置和样式调整,最后再具体到细节中。

css样式

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
.content{
/*这个content没有宽度,是因为要撑满父亲*/
height: 700px;
background:url(images/indexmainbg.jpg) no-repeat center bottom;
}
.content .inner_c{
width: 1000px;
height: 700px;
margin: 0 auto;
padding-top: 50px;
}
.content .inner_c .product{
height: 229px;
border-bottom: 1px solid gray;
position: relative;
}
.content .inner_c .product ul{
list-style: none;
}
.content .inner_c .product ul li{
float: left;
width: 218px;
height: 229px;
margin-right: 43px;
}

底部footer

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="footer">
<div class="inner_c">
<div class="left_part">
<a href="#">网站地图</a>
<span>|</span>
<a href="#">免责声明</a>
</div>
<div class="right_part">
所有伟大都源于一个勇敢的开始,欢迎访问“地痞兔劈叉(dp2px.com)”
<img src="images/govIcon.gif" class="jinghui"/>
</div>
</div>
</div>
所有伟大都源于一个勇敢的开始,欢迎访问地痞兔劈叉

css样式

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
.footer{
height: 91px;
background-color: #191D3A;
}
.footer .inner_c{
width: 1000px;
margin: 0 auto;
}
.footer .inner_c .left_part{
float: left;
width: 300px;
height: 91px;
line-height: 91px;
}
.footer .inner_c .left_part a{
text-decoration: none;
color:gray;
font-size: 12px;
line-height: 91px;
}
.footer .inner_c .right_part{
float: left;
width: 700px;
height: 91px;
text-align: right;
color:gray;
font-size: 12px;
}
.footer .inner_c .right_part .jinghui{
width: 40px;
position: relative;
top: 20px;
}

demo演示地址:http://dp2px.com/demo/boyahudong/