홈>

html - 다단계 양식을 작성하는 방법

원하는 결과를 얻기 위해 CSS로 작업하면서 여러 단계의 양식을 만들려고 노력했지만 원하는 정확한 솔루션을 얻을 수 없었습니다.

레이아웃을 디자인 할 수 있었지만 제가 직면 한 문제는 해당 링크를 통해 원하는 줄입니다.

아래는 내가 달성하려는 것입니다 :

내가 생각 해낸 것 :

두 번째 이미지의 상단을 보면. 링크 상단에 회색 선이 표시됩니다.

HTML 마크 업

<ul id="owp-checkout-timeline" class="owp-woo-checkout-timeline clr square step-4">
            <li id="timeline-0" data-step="0" class="timeline login active">
            <div class="timeline-wrapper">
                <span class="timeline-step">1.</span>
                <span class="timeline-label">Login</span>
            </div>
        </li>
    <li id="timeline-1" data-step="1" class="timeline billing ">
        <div class="timeline-wrapper">
            <span class="timeline-step">2.</span>
            <span class="timeline-label">Billing</span>
        </div>
    </li>
    <li id="timeline-2" data-step="2" class="timeline shipping" >
        <div class="timeline-wrapper">
            <span class="timeline-step">3.</span>
            <span class="timeline-label">Shipping</span>
        </div>
    </li>
    <li id="timeline-3" data-step="3" class="timeline payment">
        <div class="timeline-wrapper">
            <span class="timeline-step">4.</span>
            <span class="timeline-label">Payment Info</span>
        </div>
    </li>
</ul>

Css 코드

.owp-woo-checkout-timeline{
        display:-webkit-box;
        display:-moz-box;
        display:-ms-flexbox;
        display:-webkit-flex;
        display:flex;
        margin:0 0 1em;
        padding:0;
        font-size:90%;
        text-transform:uppercase;
}
.owp-woo-checkout-timeline>li.timeline{
    list-style:none;
    text-align:center;
    width:auto;
    padding:0;
    margin:0;
    position:relative;
    text-overflow:ellipsis;
    color:#b71c1c;
    display:block
}
    .timeline-wrapper{
                 display: table-row;
            }
    .timeline-wrapper:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;
}
.owp-woo-checkout-timeline>li.timeline .timeline-step,.owp-woo-checkout-timeline>li.timeline .timeline-step:after,
        .owp-woo-checkout-timeline>li.timeline .timeline-step:before{
            background-color:#e65100; 
            color:#fff; 
            font-weight:bold;
            border-color:#247830;
            padding:6px;
            border-radius:800px;
            }

.owp-woo-checkout-timeline>li.timeline .timeline-step:before{left:0}
.owp-woo-checkout-timeline>li.timeline .timeline-step:after{right:0}
.owp-woo-checkout-timeline>li:first-child .timeline-step:after,
.owp-woo-checkout-timeline>li:first-child 
.owp-woo-checkout-timeline{width:50%;margin-left:50%}
.owp-woo-checkout-timeline>li:last-child .timeline-step:after,
.owp-woo-checkout-timeline>li:last-child .timeline-step:before{width:50%;margin-right:50%}
.owp-woo-checkout-timeline>li.active,.progress-indicator>li.active .timeline-step{color:#337AB7}
.owp-woo-checkout-timeline>li.active .timeline-step,.progress-indicator>li.active .timeline-step:after,
.owp-woo-checkout-timeline>li.active .timeline-step:before{background-color:#337AB7;border-color:#122a3f}
.owp-woo-checkout-timeline>li a:hover .timeline-step,.progress-indicator>li a:hover .timeline-step:after,
.owp-woo-checkout-timeline>li a:hover .timeline-step:before{background-color:#5671d0;border-color:#1f306e}
.owp-woo-checkout-timeline>li a:hover .timeline-step{color:#5671d0}

htmlcss
  • 답변 # 1

    이 z-order: 0; 를 변경  css받는-사람 z-index:-1;   .timeline-wrapper:before 에서  수업. 또한 라인의최상위 위치를 변경하고 position:relative 를 추가하십시오.  메인 서클이나 글꼴에 연결합니다.

  • 답변 # 2

    이 코드를 사용해주세요 :

    <!DOCTYPE html>
<html>
<head>
  <title>Accordians</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
    .form_wizard .stepContainer {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0 solid #CCC;
  overflow-x: hidden;
}
/**-------**/
.wizard_horizontal ul.wizard_steps {
  display: table;
  list-style: none;
  position: relative;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
}
.wizard_horizontal ul.wizard_steps li {
  display: table-cell;
  text-align: center;
}
.wizard_horizontal ul.wizard_steps li a, .wizard_horizontal ul.wizard_steps li:hover {
  display: block;
  position: relative;
  -moz-opacity: 1;
  filter: alpha(opacity: 100);
  opacity: 1;
  color: #666;
}
.wizard_horizontal ul.wizard_steps li a:before {
  content: "";
  position: absolute;
  height: 8px;
  background: #ccc;
  top: 40px;
  width: 100%;
  z-index: 4;
  left: 0;
}
.wizard_horizontal ul.wizard_steps li a.disabled .step_no {
  background: #ccc;
}
.wizard_horizontal ul.wizard_steps li a .step_no {
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 100px;
  display: block;
  margin: 0 auto 5px;
  font-size: 16px;
  text-align: center;
  position: relative;
  z-index: 5;
}
.wizard_horizontal ul.wizard_steps li a.selected:before, .step_no {
  background: #34495E;
  color: #fff;
}
.wizard_horizontal ul.wizard_steps li a.done:before, .wizard_horizontal ul.wizard_steps li a.done .step_no {
  background: #1ABB9C;
  color: #fff;
}
.wizard_horizontal ul.wizard_steps li:first-child a:before {
  left: 50%;
}
.wizard_horizontal ul.wizard_steps li:last-child a:before {
  right: 50%;
  width: 50%;
  left: auto;
}
/**-------**/
.wizard_verticle .stepContainer {
  width: 80%;
  float: left;
  padding: 0 10px;
}
.form_wizard .stepContainer div.content {
  display: block;
  position: absolute;
  float: left;
  margin: 0;
  padding: 5px;
  font: normal 12px Verdana, Arial, Helvetica, sans-serif;
  color: #5A5655;
  height: 300px !important;
  text-align: left;
  overflow: auto;
  z-index: 88;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  clear: both;
}
.actionBar {
  width: 100%;
  border-top: 1px solid #ddd;
  padding: 10px 5px;
  text-align: right;
  margin-top: 10px;
}
.actionBar .buttonDisabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: .65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}
.actionBar a {
  margin: 0 3px;
}
/**-------**/
</style>
</script>
</head>
<body>
  <div id="wizard" class="form_wizard wizard_horizontal">
    <ul class="wizard_steps anchor">
      <li>
        <a href="#step-1" class="selected" isdone="1" rel="1">
          <span class="step_no">1</span>
          <span class="step_descr">
              <small>Login</small>
          </span>
        </a>
      </li>
      <li>
        <a href="#step-2" class="done" isdone="1" rel="2">
          <span class="step_no">2</span>
          <span class="step_descr">
              <small>Billing</small>
          </span>
        </a>
      </li>
      <li>
        <a href="#step-3" class="done" isdone="1" rel="3">
          <span class="step_no">3</span>
          <span class="step_descr">
              <small>Shipping</small>
          </span>
        </a>
      </li>
      <li>
        <a href="#step-4" class="done" isdone="1" rel="4">
          <span class="step_no">4</span>
          <span class="step_descr">
              <small>Payment Info</small>
          </span>
        </a>
      </li>
    </ul>
      <div class="stepContainer">
         <div id="step-1" class="wizard_content" style="display: block;">
         </div>
         <div id="step-2" class="wizard_content" style="display: none;">
           
         </div>
         <div id="step-3" class="wizard_content" style="display: none;">
           
         </div>
         <div id="step-4" class="wizard_content" style="display: none;">
           
         </div>
      </div>
      <!-- <div class="actionBar">
        <a href="#" class="btn btn-default">Finish</a>
        <a href="#" class="btn btn-success">Next</a>
        <a href="#" class="btn btn-primary buttonDisabled">Previous</a>
      </div> -->
  </div>
 
<!-- form wizard -->
  <script type="text/javascript" src="http://xn--80akiaokt3b4b.xn--d1acnqm.xn--j1amh/templates/demo/gentelella/js/wizard/jquery.smartWizard.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      // Smart Wizard
      $('#wizard').smartWizard();
      function onFinishCallback() {
        $('#wizard').smartWizard('showMessage', 'Finish Clicked');
        //alert('Finish Clicked');
      }
    });
    $(document).ready(function() {
      // Smart Wizard
      $('#wizard_verticle').smartWizard({
        transitionEffect: 'slide'
      });
    });
  </script>
</body>
</html>

  • 이전 powershell 스크립트에서 배열 요소를 확인할 때 오류가 발생했습니다 - 예기치 않은 토큰 'eq'
  • 다음 javascript - Vuex 계산 속성이 v-show를 업데이트하지 않습니다
    • 관련 질문