关于#css#的问题：由于我里面有div的嵌套，请问css样式我该如何写

图1是我写的代码，图2是代码的效果图，图3是我需要实现的效果图。由于我里面有div的嵌套，请问css样式我该如何写？

img

img

img

float布局，题主要的代码如下，有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~

img

由于题主使用到font-awesome，被本机没有，题主自己导入


<!doctype html>
<meta charset="utf-8" />
<style>
.header{position:relative;overflow:hidden;padding:20px 10px}
.header .nav{float:left;}
.header .nav ul{overflow:hidden;margin:0;padding:0}
.header .nav li{float:left;list-style:none;padding:0 10px;}
.header  a{color:#333;text-decoration:none;}
.header .nav li a.cur{color:sandybrown;}
.header .logo{position:absolute;left:50%;top:50%;margin-left:37px;margin-top:-15px;}
.header .logo img{height:30px}
.header .search,.header .user{float:right}
.header .search{border:solid 1px #333;border-radius:20px;position:relative;padding:0 10px}
.header .search input{display:block;border:none;line-height:20px;outline:none}
.header .search button{position:absolute;right:0;top:0;border-radius:50%;background:transparent;border:none}
.header .user{margin-left:10px}
</style>
<div class="header">
    <div class="nav">
        <ul>
            <li><a href="#" class="cur">首页</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>
        </ul>
    </div>
    <div class="logo">
        <img src="images/logo.png" />
    </div>
    <div class="user">
        <a href="#">登录</a>/<a href="#">注册</a>
    </div>
    <div class="search">
        <input type="text" placeholder="搜索您向往的目的地" name="search" />
        <button type="submit"><i class="fa fa-search"></i></button>
    </div>
</div>

定义class，把内部的div绑定class即可。