发表于： 2019-01-14 22:00:39
1 895
修改完成了任务7和任务8 ，正在做任务10 。因为架构问题重构了整体布局，grid布局真香。
下面是重构之后的代码，已经完全适配响应式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<header>
<div class="header">
<div class="logo container">
<div class="d-flex justify-content-between align-items-center logoGroup">
<div class="">登录</div>
<div class="">注册</div>
</div>
<div class="logoText">客服热线：010-594-78634</div>
</div>
</div>
</header>
<div class="banner">
<div class="container">
</div>
</div>
<div class="flow">
<div class="container d-flex justify-content-end align-items-center">
<div class=" d-flex flex-column justify-content-center align-items-center">
<div class="d-flex flex-row justify-content-center align-items-center mb-2">
<div class="rectangle"></div>
<div class="circle">1</div>
<div class="rectangle"></div>
</div>
<div class="step-text">1.定制纸箱</div>
</div>
<div class=" d-flex flex-column justify-content-center align-items-center">
<div class="d-flex flex-row justify-content-center align-items-center mb-2">
<div class="rectangle"></div>
<div class="circle">1</div>
<div class="rectangle"></div>
</div>
<div class="step-text">2.选择数量</div>
</div>
<div class=" d-flex flex-column justify-content-center align-items-center">
<div class="d-flex flex-row justify-content-center align-items-center mb-2">
<div class="rectangle"></div>
<div class="circle">1</div>
<div class="rectangle"></div>
</div>
<div class="step-text">3.上传附件</div>
</div>
<div class=" d-flex flex-column justify-content-center align-items-center">
<div class="d-flex flex-row justify-content-center align-items-center mb-2">
<div class="rectangle"></div>
<div class="circle">1</div>
<div class="rectangle"></div>
</div>
<div class="step-text">4.确认下单</div>
</div>
</div>
</div>
<div class="container">
<div class="row mt-5 mb-3 ">
<div class="d-flex justify-content-start align-items-center">
<div class="tip"></div>
<div class="tip-text">请按照以下步骤来定制您的纸箱</div>
</div>
</div>
</div>
<div class="container">
<div class="brand pl-2">
<img src="box.png" alt="">
<div>选择箱型</div>
</div>
<div class="row align-items-center">
<div class="col-lg-2 mt-3 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">对口箱</label>
</div>
</div>
<div class="col-lg-2 mt-3 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">飞机盒</label>
</div>
</div>
<div class="col-lg-2 mt-3 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio3" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio3">天地盖</label>
</div>
</div>
<div class="col-lg-2 mt-3 mb-3 offset-md-4">
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
<div class="brand pl-2">
<img src="Ruler.png" alt="">
<div>确定尺寸</div>
</div>
<div class="row align-items-center mt-3">
<div class="col-lg-2 col-md-3 col-sm-12 mt-1">
<div class="custom-control custom-radio">
<input type="radio" id="lintwo1" name="lintwo" class="custom-control-input">
<label class="custom-control-label" for="lintwo1">外径</label>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-6 mt-1">
<div class="d-flex justify-content-center align-items-center">
<label for="input4" style="margin-bottom:0; margin-right:0.5rem;">长</label>
<input type="number" class="form-control" id="input4">
<label for="input4" style="margin-bottom:0; margin-left:0.5rem;">mm</label>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-6 mt-1">
<div class="d-flex justify-content-center align-items-center">
<label for="input5" style="margin-bottom:0; margin-right:0.5rem;">宽</label>
<input type="number" class="form-control" id="input5">
<label for="input5" style="margin-bottom:0; margin-left:0.5rem;">mm</label>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-6 mt-1">
<div class="d-flex justify-content-center align-items-center">
<label for="input6" style="margin-bottom:0; margin-right:0.5rem;">高</label>
<input type="number" class="form-control" id="input6">
<label for="input6" style="margin-bottom:0; margin-left:0.5rem;">mm</label>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-lg-2 col-md-3 col-sm-12 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="lintwo2" name="lintwo" class="custom-control-input">
<label class="custom-control-label" for="lintwo2">内径</label>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-6 mb-3">
<div class="d-flex justify-content-center align-items-center">
<label for="input1" style="margin-bottom:0; margin-right:0.5rem;">长</label>
<input type="number" class="form-control" id="input1">
<label for="input1" style="margin-bottom:0; margin-left:0.5rem;">mm</label>
</div>
</div>
<div class="col-md-3 col-lg-2 col-sm-6 col-6 mb-3">
<div class="d-flex justify-content-center align-items-center">
<label for="input2" style="margin-bottom:0; margin-right:0.5rem;">宽</label>
<input type="number" class="form-control" id="input2">
<label for="input2" style="margin-bottom:0; margin-left:0.5rem;">mm</label>
</div>
</div>
<div class="col-md-3 col-lg-2 col-sm-6 col-6 mb-3">
<div class="d-flex justify-content-center align-items-center">
<label for="input3" style="margin-bottom:0; margin-right:0.5rem;">高</label>
<input type="number" class="form-control" id="input3">
<label for="input3" style="margin-bottom:0; margin-left:0.5rem;">mm</label>
</div>
</div>
<div class="col-lg-2 mt-3 mb-3 offset-lg-2">
<!-- Example single danger button -->
<div class="btn-group special-button">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
<div class="brand pl-2">
<img src="Cut.png" alt="">
<div>选择材质</div>
</div>
<div class="row align-items-center">
<div class="col-lg-2 mt-3 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="linefour1" name="linefour" class="custom-control-input">
<label class="custom-control-label" for="linefour1">三层A瓦优质</label>
</div>
</div>
<div class="col-lg-2 mt-3 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="linefour2" name="linefour" class="custom-control-input">
<label class="custom-control-label" for="linefour2">三层A瓦优质</label>
</div>
</div>
<div class="col-lg-2 mt-3 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="linfour3" name="linefour" class="custom-control-input">
<label class="custom-control-label" for="linfour3">三层A瓦优质</label>
</div>
</div>
<div class="col-lg-2 mt-3 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="linfour4" name="linefour" class="custom-control-input">
<label class="custom-control-label" for="linfour4">三层A瓦优质</label>
</div>
</div>
<div class="col-lg-2 mt-3 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="linefour5" name="linefour" class="custom-control-input">
<label class="custom-control-label" for="linefour5">三层A瓦优质</label>
</div>
</div>
<div class="col-lg-2 mt-3 mb-3">
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
<div class="row align-items-center mt-5">
<div class="col-4 offset-4">
<button type="button" class="btn btn-danger text-center specialbtn">下一步</button>
</div>
</div>
</div>
<script src="index.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>
返回列表
评论