自己动手设计了一下下百度首页 

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>百度一下</title>
  6     <meta name="Keywords" content="关键字">
  7     <meta name="Description" content="描述">
  8     <style>
  9         p /*标签选择器*/
 10         {
 11             text-align: center ;
 12             color: blue;
 13         }
 14         #right /*ID选择器*/
 15         {
 16             text-align: right;
 17             color: blue;
 18         }
 19         #aa,#bb,#cc,#dd /*群组选择器*/
 20         {
 21             color: #2196F3;
 22         }
 23         .a /*类选择器*/
 24         {
 25             text-align: center;
 26             color: blue;
 27         }
 28         .b/*类选择器*/
 29         {
 30             text-decoration:none;
 31         }
 32         .c /*类选择器*/
 33         {
 34             font-size: 15px;
 35         }
 36         .d/*类选择器*/
 37         {
 38             font-size: 13px;
 39         }
 40         a /*标签选择器*/
 41         {
 42             color: blue;
 43         }
 44         .c,.b /*群组选择器*/
 45         {
 46             color: black;
 47         }
 48     </style>
 49 
 50 </head>
 51 <body>
 52     <div>
 53         <div class="d"><!-- 搜索设置，登录，注册 -->
 54             <p id="right">
 55                 <a href="javascript:;">搜索设置</a>
 56                 <span>|</span>
 57                 <a href="javascript:;">登录</a>
 58                 <a href="javascript:;">注册</a>
 59             </p>
 60         </div><!-- 百度logo -->
 61         <div class="a">
 62             <img src="img/logo.png" alt="百度一下" title="百度一下" >
 63         </div>
 64         <div class="c"><!-- 标题 -->
 65             <p>
 66                 <a href="javascript:;">新闻</a>&nbsp;
 67                 <a href="javascript:;" class="b">网页</a>&nbsp;
 68                 <a href="javascript:;">贴吧</a>&nbsp;
 69                 <a href="javascript:;">知道</a>&nbsp;
 70                 <a href="javascript:;">mp3</a>&nbsp;
 71                 <a href="javascript:;">图片</a>&nbsp;
 72                 <a href="javascript:;">视频</a>&nbsp;
 73                 <a href="javascript:;">地图</a>
 74             </p>
 75         </div>
 76         <div class="a"> <!-- 输入框 -->
 77             <form action="http://h2.qq.com/" method="post">
 78                 <input type="text" name="输入框" value="" style="width:400px;height:28px;
 79                 ">
 80                 <input type="submit" name="百度一下" value="百度一下" style="height:33px;">
 81             </form>
 82         </div>
 83         <div class="c"><!-- 输入框下方 -->
 84             <p>
 85                 <a href="javascript:;">百科</a>&nbsp;
 86                 <a href="javascript:;">文库</a>&nbsp;
 87                 <a href="http://www.hao123.com">hao123</a>&nbsp;
 88                 <span>|</span>&nbsp;
 89                 <a href="javascript:;">更多</a>&gt;&gt;
 90             </p>
 91         </div><br><br>
 92         <div class="d"><!-- 把百度设为主页，添加到桌面 -->
 93             <p>
 94                 <a href="javascript:;">把百度设为主页</a>&nbsp;
 95                 <a href="javascript:;">把百度添加到桌面</a>
 96             </p>
 97         </di>
 98         <div class="d"><!-- 加入百度推广 -->
 99             <p>
100                 <a href="javascript:;">加入百度推广</a><span>|</span>
101                 <a href="javascript:;">搜索风云榜</a><span>|</span>
102                 <a href="javascript:;">关于百度</a><span>|</span>
103                 <a href="javascript:;" id="dd">About Baidu</a>
104             </p>
105         </div>
106         <div class="d"><!-- 注释，最后一行 -->
107             <p>
108                 <a href="javascript:;" class="b" id="bb">&copy;2012Baidu</a>
109                 <a href="javascript:;" id="cc">使用百度前必读</a>
110                 <a href="javascript:;" id="aa">京ICP证030173号</a>
111             </p>
112         </div>
113     </div>
114 </body>
115 </html>

 

posted @ 2016-07-08 19:48  舍近求猿  阅读(331)  评论(0)  编辑  收藏  举报