简修网页头部导航栏

欢迎各位复制粘贴

往下看

网页body内容：

    <div class="header w">
        <div class="logo"> <img src="../logo/wunsun-logo.png " alt=""></div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">介绍</a></li>
                <li><a href="#">成果</a></li>
            </ul>
        </div>

        <div class="search">
            <input type="text" value="输入关键词">
        </div>    

        <div class="user">
            <img src="../矢量图/北京大学.png" alt="">
            qq-wechat
        </div>
    </div>

 

网页css内容： 

        *{
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #f3f5f7;
        }
        .header{
            height: 50px;
            width: 1100px;
            margin: 0 auto;
            margin-top: 20px;
        }
        .logo{
            float: left;
            width: 198px;
            height: 44px;
        }
         .logo img{
            width: 198px;
            height: 50px;
        } 
        .nav {
            float: left;
            margin-left: 60px;
        }
        .nav ul li {
            float: left;
            margin: 0 15px;
            list-style: none; 
        }
        .nav ul li a {        
            display: block;
            height: 42px;
            padding: 0 10px;
            line-height: 42px;
            font-size: 18px;
            color: #050505;   
            text-decoration: none; /*去掉下划线*/
        }
        .nav ul li a:hover {
            border-bottom: 2px solid #00a4ff;  /*鼠标经过时下低边框的样式*/
            color: #00a4ff;
        }
        .search {
            float: left;
            width: 412px;
            height: 42px;
            margin-left: 58px;        
        }
        .search input {
            float: left;
            width: 300px;
            height: 40px;
            border: 1px solid #00a4ff;
            color: #bfbfbf;
            font-size: 14px;
            padding-left: 15px;
            background: url(../矢量图/放大镜.png);
            background-repeat: no-repeat;
            background-size: 30px;
            background-position: right;
        }
        .user {
           float: right;
           line-height: 42px;
           margin-right: 30px;
           font-size: 18px;
           color: #666;
       }

 效果图：

 

 

谢谢大家 看完本人成果，

刚学没多久 希望在这记录自己的成长。

yes！！！