静态百度页面

公告

View Post

　　1.百度页面

　　2. html代码文件

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>百度一下，你也不知道咯</title>
 5     <link href="Baidu.css" rel="stylesheet" type="text/css" />
 6 </head>
 7 <body>
 8     <div>
 9 
10     <!--上面选项菜单-->
11     <div id="nav">
12         <a href="#">新闻</a>
13         <a href="#">hao123</a>
14         <a href="#">地图</a>
15         <a href="#">视频</a>
16         <a href="#">贴吧</a>
17         <a href="#" class="login">登录</a>
18         <a href="#" class="set">设置</a>
19         <button>更多产品</button>
20     </div>
21 
22     <!--主要部分-->
23     <div id="main">
24         <div class="photo">
25             <img src="Images/bd_logo1.png" width="270" height="129"/>
26         </div>
27         <div>
28             <input class="si" type="text" name="name" value=" " /><input class="sub" type="submit" name="name" value="百度一下"/>
29         </div>
30         
31         <!--最底一块-->
32         <div id="bottom">
33             <div class="ap">
34                 <a href="#">把百度设为主页</a>
35                 <a href="#">关于百度</a>
36                 <a href="#">About Baidu</a>
37             </div>
38             <div class="ap">
39                 <p>
40                 ©2015 Baidu 使用百度前必读 意见反馈 京ICP证030173号 
41                 </p>
42             </div>
43         </div>
44     </div>
45     </div>
46 </body>
47 </html>

　　3. css代码文件

  1 /*--重置body--*/
  2 body
  3 {
  4     border: 0;
  5     margin: 0;
  6 }
  7 
  8 /*--重置button的边框--*/
  9 input,button
 10 {
 11     border:0;
 12 }
 13 
 14 /*--上面选项菜单--*/
 15 #nav
 16 {
 17     text-align: right;
 18     margin-top: 21px;
 19     margin-right: 8px;
 20     font-size: 13px;
 21 }
 22 
 23 #nav a
 24 {
 25     color: #333;
 26     font-weight:bold;
 27     margin:0 7px;
 28 }
 29 
 30 #nav a.set,
 31 #nav a.login
 32 {
 33     font-weight:normal;
 34 }
 35 
 36 #nav button
 37 {
 38     background: #38f;
 39     padding:4px 5px;
 40     margin-left:5px;
 41     color:White;
 42 }
 43 
 44 #nav a:hover
 45 {
 46     color:#00C;
 47 }
 48 
 49 /*--主要部分--*/
 50 #main
 51 {
 52     width:655px;
 53     height:488px;
 54     margin:0 auto;
 55 }
 56 
 57 /*--百度一下背景图片--*/
 58 #main .photo
 59 {
 60     text-align:center;
 61     margin-bottom:19px;
 62 }
 63 
 64 #main input
 65 {
 66     border:1px solid #BBB;    
 67     width:540px;
 68     height:32px;
 69     padding-left:5px;
 70     margin:0;
 71 }
 72 
 73 #main input.sub
 74 {
 75     width:100px;
 76     height:36px;
 77     background: #38f;
 78     color:White;
 79     font-size:15px;
 80 }
 81 
 82 #main input.si
 83 {
 84     float:left;
 85 }
 86 
 87 /*--最底一块--*/
 88 #bottom
 89 {
 90     margin-top:249px;
 91 }
 92 
 93 #bottom .ap
 94 {
 95     font-size:12px;
 96     text-align:center;
 97 }
 98 
 99 #bottom .ap a
100 {
101     margin:0 6px;
102     color:Blue;
103 }
104 
105 #bottom .ap p
106 {
107     color:#666;
108 }

posted on 2015-10-29 23:59 啊远阅读(892) 评论(0) 编辑收藏举报

刷新页面返回顶部