[散修弟子]CSS-7961|2019年09月02日的日报-技能树.IT修真院

发表于： 2019-09-02 07:31:34

1 871

今天完成的事

1.根据flex的特性修改样式

<header class="background-blue">
    <div class="container">
        <div class="row align-items-center">
            <p class="header-p1 col-xl-4 col-lg-4 col-md-4 col-sm-5 col-12 margin0">客服热线：010-594-78634</p>
            <a class="header-p1 text-center hover1-header
                      offset-xl-6 col-xl-1
                      offset-lg-6 col-lg-1
                      offset-md-6 col-md-1
                      offset-sm-3 col-sm-2
                      offset-6 col-3
                      ">登录</a>
            <a class="header-p1 text-center hover1-header
                      col-xl-1 col-lg-1 col-md-1 col-sm-2 col-3">注册</a>
        </div>
    </div>
</header>

2.去掉nav部分设置的固定高度设定父容器为flex

<nav class="background-silver display-flex">
    <div class="container">
        <div class="row right">
            <a class="nav-a">首页</a>
            <a class="nav-a">在线定制</a>
            <a class="nav-a">标准箱</a>
            <a class="nav-a">品质保障</a>
        </div>
    </div>
</nav

.display-flex {
    display: flex;
}

3.架构进度条部分

<div class="container">
    <div class="row right">
            <div class="div-div">1</div>
            <div class="">2</div>
            <div class="">3</div>
            <div class="">4</div>
            <div class="">5</div>
    </div>
</div>

4.设置进度条部分的样式以及伪元素和hover样式

.div-div {
    display: block;
    width: 20px;
    height: 20px;
    background-color: rgb(204,204,204);
    color: white;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
    margin: 40px 10px;
    cursor: pointer;
}
.div-div::after {
    content: "";
    z-index: -10;
    display: block;
    width: 80px;
    height: 4px;
    background-color: rgb(204,204,204);
    position: relative;
    top: -12px;
    left: -28px;
}
.div-div:hover::after, .div-div:hover {
    background-color: rgb(255,127,0);
}

5.经过思考后想改变架构思路和样式

想达到点击不同的数字进度条长度不同的效果

想了很久没有思路就暂时完成其他部分这一个押后先使用单个的hover效果

6.添加进度条的文字部分

<div class="container">
    <div class="row right">
        <div class="div-div">
            <div class="div-hover" href="#1">1</div>
            <p class="">1.定制纸箱</p>
        </div>
            <div class="div-hover" href="#2">2</div>
            <div class="div-hover" href="#3">3</div>
            <div class="div-hover" href="#4">4</div>
            <div class="div-hover" href="#5">5</div>
    </div>
</div>

.div-div {
    text-align: center;
}
.div-div:hover {
    color: rgb(255,127,0);
}

<div class="container">
    <div class="row right">
        <div class="div-div">
            <div class="div-hover" href="#1">1</div>
            <p class="div-p">1.定制纸箱</p>
        </div>
        <div class="div-div">
            <div class="div-hover" href="#2">2</div>
            <p class="div-p">2.选择数量</p>
        </div>
        <div class="div-div">
            <div class="div-hover" href="#3">3</div>
            <p class="div-p">3.上传附件</p>
        </div>
        <div class="div-div">
            <div class="div-hover" href="#4">4</div>
            <p class="div-p">4.确认下单</p>
        </div>
    </div>
</div>

7.架构“请您----”标题

<div class="container">
    <div class="row" style="width: 100vw;">
        <div class="h5-border"></div>
        <h5><strong>请您按照以下步骤来定制你的纸箱</strong></h5>
    </div>

.h5-border {
    display: block;
    width: 6px;
    height: 26px;;
    border-radius: 4px;
    background-color: rgb(29, 122, 217);
    margin: 0 4px;
}

8.简单架构整个定制部分

<div class="container">
    <div class="row" style="width: 100vw;">
        <div class="h5-border"></div>
        <h5><strong>请您按照以下步骤来定制你的纸箱</strong></h5>
    </div>
    <div class="row">
        <p class=""></p>
        <div class=""></div>
        <p class=""></p>
        <div class=""></div>
        <p class=""></p>
        <div class=""></div>
        <div class="">
            <button class=""></button>
        </div>
    </div>
</div>

9.使用ps切图

10.设置背景颜色并且设置圆边

.div4-div2 {
    background-color: rgb(244,244,244);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

11.设置小标题并插入图标

<div class="row div4-div2">
    <p class="div4-p1 col-12">选择箱型</p>
    <div class=""></div>
    <p class="div4-p2 div4-div1 col-12">确定尺寸</p>
    <div class=""></div>
    <p class="div4-p3 div4-div1 col-12">选择材质</p>
    <div class=""></div>
    <div class="div4-b">
        <button class=""></button>
    </div>
</div>

.div4-p1 {
    margin: 16px;
    padding-left: 26px;
    background-image: url("steam.lnk.png");
    background-position: left;
    background-repeat: no-repeat;
}
.div4-p2 {
    background-image: url("ruler.png");
}
.div4-p3 {
    background-image: url("scissors.png");
}

12.架构单选按钮组部分

<div class="div4-div2-p">
    <div class="input">
        <input type="radio" name="a" id="对口箱">
        <label for="对口箱"></label>
        <span>对口箱</span>
    </div>
    <div class="input">
        <input type="radio" name="a" id="飞机盒">
        <label for="飞机盒"></label>
        <span>飞机盒</span>
    </div>
    <div class="input">
        <input type="radio" name="a" id="天地盖">
        <label for="天地盖"></label>
        <span>天地盖</span>
    </div>
</div>


.input {
    margin-right: 40px;
}
input[type="radio"] {
    display: none;
}
input[type="radio"] + label {
    margin: 0 20px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    display: inline-block;
    text-align: center;
    vertical-align: bottom;
    border: 1px solid rgb(214,214,214);
    border-radius: 50%;
}
input[type="radio"] + label:hover {
    border: 1px solid rgb(18,119,220);
    cursor: pointer;
}
input[type="radio"]:checked + label {
    border: 8px solid rgb(18,119,220);
}

13.完善背景颜色及样式

.div4-div2-p {
    display: flex;
    width: 100%;
    background-color: white;
    padding: 30px 0;
}

14.架构确定尺寸部分

<div class="div4-div2-p"  style="display: block">
    <div class="input input2">
        <input type="radio" name="a" id="b1">
        <label for="b1"></label>
        <span>外径</span>
    </div>
    <div class="input">
        <input type="radio" name="a" id="b2">
        <label for="b2"></label>
        <span>内径</span>
    </div>
</div>
<p class

15.架构选择材质部分

<p class="div4-p3 div4-p1 col-12">选择材质</p>
<div class="div4-div2-p">
    <div class="offset-xl-1 col-2">
        <input type="radio" name="c" id="c1">
        <label for="c1" class="margin0"></label>
        <span>双层A瓦优质</span>
    </div>
    <div class="col-2">
        <input type="radio" name="c" id="c2">
        <label for="c2" class="margin0"></label>
        <span>三层A瓦优质</span>
    </div>
    <div class="col-2">
        <input type="radio" name="c" id="c3">
        <label for="c3" class="margin0"></label>
        <span>三层B瓦优质</span>
    </div>
    <div class="col-2">
        <input type="radio" name="c" id="c4">
        <label for="c4" class="margin0"></label>
        <span>四层A瓦优质</span>
    </div>
    <div class="col-2">
        <input type="radio" name="c" id="c5">
        <label for="c5" class="margin0"></label>
        <span>五层A瓦优质</span>
    </div>
</div>