【盒子页面在进行到进度条时，使用了另一个办法，使用盒子的边框做底，做圆形盒子打底。 _盒模型】

盒子页面在进行到进度条时，使用了另一个办法，使用盒子的边框做底，做圆形盒子打底。

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

盒模型

详细描述

截图

代码

css：


html {
    font-size: 62.5%;
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
}

/*header区域开始*/
/*顶部登录页面*/
/*顶部最大容器*/
.loginbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4rem;
    background-color: #1d7ad9;
    font-size: 1.6rem;
    color: #ffffff;
}

/*顶部最大容器结束*/
.loginbar-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*文字框容器*/
.loginbar-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 20%;
}

/*文字框容器*/

/*文字框设置*/
.loginbar-right-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 50%;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
}

/*结束*/

/*顶部文字框hover*/
.loginbar-right-right:hover {
    background-color: #ffffff;
    color: #000;
}

/*导航栏*/
.bnt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.bnt-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    width: 100%;
    height: 5rem;
}

.bnt-center {
    width: 9%;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    background-color: #ffffff;
    border-radius: 15%;
    font-size: 1.6rem;
}

.bnt-center:hover {
    background-color: #1d7ad9;
    color: #fff;
}

/*结束*/
/*进度条*/
.sidebar {
    width: 55%;
    border-top: 5px solid yellow;
    float: right;

}

.sidebar-top {
    display: flex;
    justify-content: space-around;
    position: relative;
    top: 0;
    left: 0;
}

.sidebar-center {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color:#ff7f02;
    position: absolute;
    
}

.sidebar-bottom {
    display: flex;
    justify-content: space-around;
    height: 3rem;
    line-height: 3rem;
}

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task10</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/task10.css">
</head>
<body>
<header>
    <div class="loginbar">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-12 loginbar-left">
                    <div>客服热线：1234123412342</div>
                    <div class="loginbar-right">
                        <div class="loginbar-right-right">登录</div>
                        <div class="loginbar-right-right">注册</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bnt-top">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-12 bnt">
                    <div style="width: 50%;"></div>
                    <div class="bnt-center">首页</div>
                    <div class="bnt-center">在线定制</div>
                    <div class="bnt-center">标准箱</div>
                    <div class="bnt-center">品质保证</div>
                </div>
            </div>
        </div>
    </div>
    <br><br>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-12">
            <div style="width: 50%;"></div>
            <div class="sidebar"></div>
        </div>
    </div>
</div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-12 sidebar-top">
                <div style="width: 40%;"></div>
                <div class="sidebar-center">1</div>
                <div class="sidebar-center">2</div>
                <div class="sidebar-center">3</div>
                <div class="sidebar-center">4</div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-12 sidebar-bottom">
                <div style="width: 40%;"></div>
                <div>1.定制纸箱</div>
                <div>2.上传附件</div>
                <div>3.选择数量</div>
                <div>4.确认下单</div>
            </div>
        </div>
    </div>
</header>
</body>
</html>

编辑于2024-04-25