Zvctrsr 2021-10-09 15:53 采纳率: 33.3%
浏览 49
已结题

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

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

img

img

img

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2021-10-09 16:35
    关注

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 10月17日
  • 已采纳回答 10月9日
  • 创建了问题 10月9日