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 }

  • 相关阅读:
    Civil 3D 二次开发 创建Civil 3D 对象—— 01 —— 创建几何空间点
    Civil 3D 二次开发 创建Civil 3D 对象—— 00 ——
    Civil 3D 二次开发 创建AutoCAD对象—— 01 —— 创建直线
    Civil 3D 二次开发 新建CLR项目出现错误C2143
    Civil 3D 二次开发 创建AutoCAD对象—— 00 ——
    了解AutoCAD对象层次结构 —— 6 ——块表记录
    datepicker97使用
    使用angular 外接 templateUrl,使用ng-include
    angularJs 遮罩
    网上找的有关css兼容问题
  • 原文地址:https://www.cnblogs.com/snow52132/p/7217041.html
Copyright © 2011-2022 走看看