[未解决问题][CSS]关于浮动

最新推荐文章于 2024-10-02 15:35:50 发布

菜得你想哭

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量97

点赞数

分类专栏：未解决问题文章标签： css html

本文链接：https://blog.csdn.net/yliyy/article/details/120372123

版权

未解决问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在学习前端，在关于浮动的章节遇到一些问题，目前能力无法解决，记录下来

在这里插入图片描述

问题描述：

前端开发、后端开发这俩的位置为什么会在这里

HTML代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线-不是所有的网站都叫学成在线</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header-top w">
      <!-- logo -->
      <div class="logo">
        <img src="images/logo.png">
      </div>
      <!-- nav -->
      <div class="nav">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">课程</a></li>
          <li><a href="#">职业规划</a></li>
        </ul>
      </div>
      <!-- search -->
      <div class="search">
        <input type="text" value="请输入关键词">
        <button></button>
      </div>
      <!-- user -->
      <div class="user">
        <img src="images/user.jpg" alt="" style="vertical-align:middle">
        lilei
      </div>
      <!-- banner -->
      <div class="banner">
        <div class="w">
          <!-- 左侧subnav -->
          <div class="subnav">
            <ul>
              <li><a href="#">前端开发<span>></span></a></li>
              <li><a href="#">后端开发<span>></span></a></li>
              <li><a href="#">移动开发<span>></span></a></li>
              <li><a href="#">人工智能<span>></span></a></li>
              <li><a href="#">商业预测<span>></span></a></li>
              <li><a href="#">云计算&大数据<span>></span></a></li>
              <li><a href="#">运维&测试<span>></span></a></li>
              <li><a href="#">UI产品设计<span>></span></a></li>
              <li><a href="#">产品<span>></span></a></li>
            </ul>
          </div>
          <!-- 右侧课程 -->
          <div class="course">
            <div class="course-hd">
              
            </div>
            <div class="course-bd">

            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

CSS代码

/* 清楚元素初始的内外边距 */
*{
    margin: 0;
    padding: 0;
}

/* 清楚列表样式 */
li{
    list-style: none;
}

/* 去掉button自带的边框 */
button{
    border: none;
}

/* 说是方便写代码 */
body{
    background-color: #f3f5f7;
    height: 3000px;
}

a{
    /*链接没有下划线*/
    text-decoration: none;
}

/* 清除浮动 */
.clrerfix:before,
.clrerfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;
}

.w{
    width: 1200px;
    margin: auto;
}

.header-top{
    height:42px;
    /* background-color: orange; */
    margin: 30px auto;
}
.logo{
    float: left;
    padding-left: 60px;
    /* background-color: orchid; */
}

.nav{
    float: left;
    /* background-color: palegoldenrod; */
}

.nav ul li{
    float: left;
}

.nav ul li a{
    display: block;
    height: 40px;
    padding: 0 10px;
    margin-left: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #050505;
    text-decoration: none;
}

.nav ul li a:hover{
    border-bottom: 2px solid #00a4ff;
}

.search{
    float: left;
    
    margin-left: 70px;
    background-color: orange;
}

.search input{
    float: left;
    width: 340px;
    height: 40px;
    /* background-color: orange; */
    border: 1px solid #00a4ff;
    /* border-left: 0; */
    padding-left: 20px;
    color: #ccc;
}

.search button{
    float: left;
    width: 50px;
    height: 42px;
    background-image: url(images/btn.png);
}

.user{
    float: left;
    height: 42px;
    line-height: 42px;
    margin-left: 30px;
    font-size: 14px;
    color: #666;
}

/* .banner{
    height: 420px;
	background: #1c036c url(images/banner2.jpg) no-repeat top center;
} */