1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <title></title>
6 <link href="css/demo.css" rel="stylesheet" />
7 </head>
8 <body>
9 <div id="header">
10 <div id="art_navtext">
11 <ul>
12 <li><a href="#">39健康网首页</a></li>
13 <li><a href="#">药品通</a></li>
14 <li><a href="#">疾病百科</a></li>
15 <li><a href="#">就医助手</a></li>
16 </ul>
17 </div>
18 <div id="navlogin">
19 <div id="login"><a href="#">登录</a></div>
20 <div id="reg"><a href="#">注册</a></div>
21 </div>
22 </div>
23 <div id="mainbody">
24 <div id="logo"></div>
25 <div id="searchpart">
26 <div id="keyword"><input type="text"/></div>
27 <div id="btn"><input type="button"/></div>
28 </div>
29 <div id="keys">
30 <span>热门搜索：</span>
31 <ul>
32 <li><a href="#">子宫肿瘤</a></li>
33 <li><a href="#">乳腺癌</a></li>
34 <li><a href="#">糖尿病</a></li>
35 <li><a href="#">艾滋病</a></li>
36 <li><a href="#">宫颈糜烂</a></li>
37 <li><a href="#">腹泻</a></li>
38 </ul>
39 </div>
40 </div>
41 <div class="footer">
42 <p>
43 <a href="#" target="_self" name="homepage" title="">将39so设为首页</a>
44 |
45 <a href="#" title="">关注39健康微信号</a>
46 </p>
47 <p>
48 <a href="#">39健康网</a>
49 -中国健康门户网站 Copyright ©2000-2013
50 <a href="#">未经授权请勿转载</a>
51 </p>
52 </div>
53 </body>
54 </html>
1 body {
2 font-size:14px;
3 font-family:"微软雅黑";
4 padding:0px;
5 margin:0px;
6 }
7 a{
8 text-decoration:none;
9 }
10 ul{
11 list-style-type:none;
12 padding:0px;
13 margin:0px;
14 }
15 #header{
16 height:36px;
17 line-height:36px;
18 background-color:#0096a5;
19 }
20 #art_navtext li{
21 float:left;
22 background-image:url(../image/bg_1.png);
23 background-repeat:no-repeat;
24 background-position:0px 12px;
25 }
26 #art_navtext li a{
27 color:#fff;
28 display:block;
29 padding-left:7px;
30 padding-right:7px;
31 }
32 #art_navtext li a:hover{
33 background-color:#008c9b;
34 }
35 #navlogin{
36 float:right;
37 }
38 #login,#reg{
39 float:left;
40 width:35px;
41 background-position:0px 10px;
42 padding-left:15px;
43 }
44 #navlogin a{
45 color:#fff;
46 }
47 #login{
48 background-image:url(../image/bg_2.png);
49 background-repeat:no-repeat;
50 }
51 #reg{
52 background-image:url(../image/bg_3.png);
53 background-repeat:no-repeat;
54 }
55 #mainbody{
56 width:696px;
57 margin:0px auto;
58 margin-top:130px;
59 }
60 #logo{
61 background-image:url(../image/bg_4.png);
62 background-repeat:no-repeat;
63 width:331px;
64 height:68px;
65 margin:0px auto;
66 }
67 #searchpart{
68 height:50px;
69 margin-top:50px;
70 padding-left:12px;
71 margin-bottom:10px;
72 }
73 #keyword,#btn{
74 float:left;
75 }
76 #keyword input{
77 width:540px;
78 height:36px;
79 }
80 #btn input{
81 background-image:url(../image/bg_5.png);
82 width:129px;
83 height:42px;
84 border-width:0px;
85 }
86 #keys{
87 height:26px;
88 color:#666;
89 font-size:15px;
90 margin-left:10px;
91 }
92 #keys span{
93 float:left;
94 font-weight:bold;
95 line-height:26px;
96 }
97 #keys li{
98 float:left;
99 line-height:26px;
100 }
101 #keys li a{
102 margin-right:20px;
103 color:#666;
104 }
105 .footer{
106 width:100%;
107 height:90px;
108 padding-top:10px;
109 border-top:1px solid #E9E9E9;
110 background:#fff;
111 position:absolute;
112 left:0;
113 bottom:0;
114 }
115 .footer p{
116 width:100%;
117 text-align:center;
118 line-height:16px;
119 color:#666;
120 }
121 .footer p a{
122 color:#666;
123 }
