zoukankan      html  css  js  c++  java
  • 类似百度首页搜索静态图

     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             &nbsp;|&nbsp;
    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 }

  • 相关阅读:
    2014找工作----扎实的基础和开阔的视野是企业最看重的因素
    2014找工作总结-机会往往留给有准备的人
    【STL源码剖析读书笔记】【第1章】STL概论与版本简介
    【c++ primer读书笔记】【第13章】拷贝控制
    【c++ primer读书笔记】【第12章】动态内存
    【c++ primer读书笔记】【第11章】关联容器
    【c++ primer读书笔记】【第10章】泛型算法
    【c++ primer读书笔记】【第9章】顺序容器
    WebSocket 是什么原理?为什么可以实现持久连接
    IDEA将项目导出war包方法(详细)
  • 原文地址:https://www.cnblogs.com/snow52132/p/7217041.html
Copyright © 2011-2022 走看看