[成都|内门弟子]JS-韦骁|2022年10月26日的日报-技能树.IT修真院

发表于： 2022-10-26 19:25:33

0 414

今天开始了任务十：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=720,initial-scale=1">
    <link rel="stylesheet" href="customized.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
    <title>任务十练习</title>
</head>
<body>
    <div class="box">

        <div class="head row">
            <div class="col-lg-6">
                <p>客服热线:010-594-76634</p>
            </div>
            <div class="col-lg-6">
                <ul>
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                </ul>
            </div>
        </div>

        <div class="navigation">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">在线定制</a></li>
                <li><a href="#">标准箱</a></li>
                <li><a href="#">品质保障</a></li>
            </ul>
        </div>

        <div class="container">

            <div class="c">
            <div class="d">
                <div class="process1"></div>
                <div class="number1">
                    <h5>1</h5>
                </div>
                <p>1:定制纸箱</p>
            </div>

            <div class="d">
                <div class="process2" ></div>
                <div class="number2">
                    <h5>2</h5>
                </div>
                <p>2:选择数量</p>
            </div>


            <div class="d">
                <div class="process3"></div>
                <div class="number3">
                    <h5>3</h5>
                </div>
                <p>3:上传附件</p>
            </div>

            <div class="d">
                <div class="process4"></div>
                <div class="number4">
                    <h5>4</h5>
                </div>
                <p>4:确认下单</p>
            </div>

                <div class="d">
                <div class="process5"></div>
                </div>

            </div>

            <div class="choice">

                <span>请您按照以下步骤定制您的纸箱</span>
            <div class="case">
                <div class="model">
                    <img src="tupian/图1.png">
                    <p>选择箱型</p>
                </div>

                <div class="row">
                    <div class="col-lg-2">
                        <div class="circular1"></div>
                        <p>对口箱</p>
                    </div>

                    <div class="col-lg-2">
                        <p>飞机盒</p>
                    </div>

                    <div class="col-lg-2">
                        <p>天地盖</p>
                    </div>
                </div>
            </div>

            </div>

        </div>

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

css代码：


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.box {
    width: 100%;
    margin: 0 auto;
    background-color: #fafafa;
}

.head {
    width: 100%;
    height: 40px;
    background-color: #1d7ad9;
    display: inline-block;
}

.head p {
    font-size: 10px;
    color: #ffffff;
    padding: 8px 0 8px 180px;
}

ul {
    float: right;
    line-height: 30px;
    margin-right: 30%;
}

li {
    list-style: none;
    display: inline-block;
    padding: 0 10px;
}

li a {
    font-size: 10px;
    color: #ffffff;
    text-decoration: none;
    padding: 15px 15px;
}

li a:hover {
    color: #333333;
    background-color: #ffffff;
    text-decoration: none;
}

.navigation {
    background-color: #f9f9f9;
    height: 100px;
}

.navigation ul li a {
    font-size: 15px;
    color: #333333;
}

.navigation ul {
    float: right;
    line-height:100px;
}

.navigation ul li a:hover {
    color: #ffffff;
    background-color: #1d7ad9;
    border-radius: 0.5rem;
}

.c {
    display: block;
    float: right;
    padding-left: 5%;
}


.d {
    display: block;
    /*margin-left: 500px;*/
    float: left;
}

h5 {
    color: #ffffff;
    font-size: 20px;
    line-height: 30px;
    padding: 0 8px;
}

.number1 {
    width: 30px;
    height: 30px;
    border-radius: 5rem;
    background-color: #ff7f02;
    display: inline-block;
    margin: 0 -5px;
}

.number2 {
    width: 30px;
    height: 30px;
    border-radius: 5rem;
    background-color: #cccccc;
    display: inline-block;
    margin: 0 -5px;
}

.number3 {
    width: 30px;
    height: 30px;
    border-radius: 5rem;
    background-color: #cccccc;
    display: inline-block;
    margin: 0 -5px;
}

.number4 {
    width: 30px;
    height: 30px;
    border-radius: 5rem;
    background-color: #cccccc;
    display: inline-block;
    margin: 0 -5px;
}


.process1 {
    width: 70px;
    height: 5px;
    background-color: #ff7f02;
    display: inline-block;
}

.process2 {
    width: 140px;
    height: 5px;
    background-color: #cccccc;
    display: inline-block;

}

.process3 {
    width: 140px;
    height: 5px;
    background-color: #cccccc;
    display: inline-block;
}

.process4 {
    width: 140px;
    height: 5px;
    background-color: #cccccc;
    display: inline-block;
}

.process5 {
    width: 70px;
    height: 5px;
    background-color: #cccccc;
    display: inline-block;
}

.d p {
    /*display: inline-block;*/
}

.choice {
    clear: both;
}

.choice span {
    font-size: 25px;
    color: #333333;
}

.case {
    background-color: white;
}

.model {
    height: 60px;
    background-color: #f3f3f3;
}

.model img {
    width: 35px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 10px;
    display: inline-block;
}

.model p {
    color: #1d7ad9;
    font-size: 25px;
    display: inline-block;
    font-weight: bolder;
    margin-top: 10px;
}

.col-lg-2 {
    display: inline-block;
}

.col-lg-2 p {
    display: inline-block;
}


.circular1 {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 1rem;
    background-color: #1d7ad9;
}

页面展示

返回列表

【任务5】 [成都|内门弟子]JS-韦骁 | 2022年10月26日 的日报

评论

分享到

【任务5】 [成都|内门弟子]JS-韦骁 | 2022年10月26日的日报