홈>
원하는 결과를 얻기 위해 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}
- 답변 # 1
- 답변 # 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>
관련 질문
- html : 스크롤 가능한 div의 텍스트가 절대 div 위에 표시됩니다.
- javascript : JQuery로 클릭시 버튼의 배경색 변경이 작동하지 않습니다.
- javascript : React의 기능 전환
- html : 창 크기가 작을 때 사이드 바 콘텐츠를 메인 콘텐츠보다 전체 너비로 맞추는 방법
- javascript : html /css에서 스크롤 막대 숨기기
- html
- html : Google Chrome에서 PDF로 인쇄 및 저장할 때 반복되는 선형 그라디언트가 나타나지 않습니다.
- javascript : 현재 페이지에있는 동안 마지막 키 프레임의 navbar 요소에서 애니메이션을 유지하려면 어떻게해야합니까?
- html : CSS 여백 속성은 Safari에서 작동하지 않지만 다른 브라우저에서는 작동합니다.
- html : 드롭 다운 Navbar-반응 형
이
z-order: 0;
를 변경 css받는-사람z-index:-1;
.timeline-wrapper:before
에서 수업. 또한 라인의최상위 위치를 변경하고position:relative
를 추가하십시오. 메인 서클이나 글꼴에 연결합니다.