用less编写百度搜索静态效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

效果图

html页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>模拟百度一下</title>

    <link rel="stylesheet" type="text/less" href="style/index.less">

    <script src="js/less.min.js"></script>

</head>

<body>

<div class="header">

    <ul class="header_nav">

        <li><a href="###">新闻</a></li>

        <li><a href="###">hao123</a></li>

        <li><a href="###">地图</a></li>

        <li><a href="###">视频</a></li>

        <li><a href="###">贴吧</a></li>

        <li><a href="###">学术</a></li>

        <li><a href="###">登录</a></li>

        <li><a href="###">设置</a></li>

        <li class="nav-more"><a href="###">更多产品</a></li>

    </ul>

    <div class="content">

        <img src="image/bd_logo.png" alt="">

        <div class="con-input">

            <span></span>

                <input type="text" class="search"><input type="button" class="btn" value="百度一下">

        </div>

    </div>

</div>

</body>

</html>

less样式部分

*{

  margin: 0;

  padding: 0;

  font-family:'微软雅黑';

}

@color-blue: #398bfb;

.header{

  width: 1000px;//给定宽度，就不会随窗口大写而改变

  height: 40px;

  line-height: 40px;

  margin: 0 auto;

  vertical-align: middle;

  .header_nav{  //导航栏部分

    float: right;

    li{

      list-style: none;

      float: left;

      margin-right: 10px;

      font-size: 16px;

      font-weight:bold;

      a{

        color:black;

      }

    }

    .nav-more{   //更多产品样式的重写

      width: 86px;

      height: 32px;

      font-size: 13px;

      line-height: 32px;

      text-align: center;

      background: @color-blue;

      a{

        text-decoration: none;

        color: #ffffff;

      }

    }

  }

  .content{  //中间搜索区域部分

    position: relative;

    clear: both;

    height: 62%;

    min-height: 181px;

    margin-top: 100px;

    text-align: center;

    img{   //logo部分

      width: 270px;

      height: 129px;

    }

    .con-input{   //input框

      margin-left: 20%;

      position: absolute;

      .search{

        width: 521px;

        height: 20px;

        padding: 7px;

        vertical-align: middle;

      }

      .btn{  //百度一下按钮

        width: 102px;

        height: 38px;

        background: @color-blue;

        text-align: center;

        line-height: 38px;

        color: #ffffff;

        font-size: 16px;

        font-weight: normal;

        cursor: pointer;

        border: none;

        vertical-align: middle;

      }

      span {  //相机部分

        background: url("../image/camera_new_5606e8f.png");

        background-position: 0 0;

        height: 18px;

        width: 18px;

        display: inline-block;

        zoom: 1;

        vertical-align: top;

        position: absolute;

        top: 14px;

        right: 112px;

        &:hover {

          background-position: 0 -18px;

        }

      }

    }

  }

}