프레임 대신 수직 진행률 막대 설치 방법 고려

11365 단어 HTMLCSS

개요


나는 진도표를 그릴 수 있는 웹 데스크의 틀이 매우 많다고 생각한다.
하지만 세로 진도표를 별로 본 적이 없어서 수동으로 설치해 봤어요.

전제 조건


이 보도는 아래의 사람이 쓴 것이다
  • 솔직히 나도 Bootstrap 안 써봤어.
  • 더 나아가 jQueryUI에서 프론트 데스크의 프레임이 멈췄다
  • 맞아요. JuryUI가 너무 많이 말했어요. Materialize
  • 예요.
  • HTML은 표기 언어이기 때문에 비어있는 <div /> 같은 것을 사용하고 싶지 않다
  • React.js는 지금부터 공부를 시작합니다
  • 저는 인터넷 트렌드를 접하지 못해서 잘 모르겠어요.
  • 더 이상 다중 장치를 지원하고 싶지 않습니다
  • 결실


    잘한 거 여기 있다.

    이루어지다


    실물이'시험관에 내용 추가'라고 느껴졌으면 좋겠어요.

    일반 진행률 표시줄


    CSS

          .app {
            display: inline-block;
            margin: 8px;
          }
          .app .progress {
            margin-bottom: 8px;
            border: solid 1px #ccc;
            width: 32px;
            height: 256px;
            overflow: hidden;
          }
          .app .progress__fill {
            background-color: #99ccff;
            height: 100%;
          }
          .app .progress__fill--max {
            background-color: #336699;
            height: 100%;
          }
    

    HTML

        <div class="app">
          <div class="progress">
            <div class="progress__fill--max"></div>
          </div>
          <div class="reward">
            <div class="reward__value">100%</div>
          </div>
        </div>
        <div class="app">
          <div class="progress">
            <div class="progress__fill" style="margin-top:128px"></div>
          </div>
          <div class="reward">
            <div class="reward__value">50%</div>
          </div>
        </div>
    
    저는 .progress__fillmargin-top속성 값을 jQuery로 하거나 React로 하면 될 것 같아요.
    그나저나 BEM을 사용했지만 현재 CSS 명명 규칙은 뭘까요?

    시험관과 유사한 진도표


    나는 본래 무엇을 하고 싶었는데, 이것을 하고 싶었다

    CSS

          .app2 {
            display: inline-block;
            margin: 8px;
          }
          .app2 .progress {
            margin-bottom: 8px;
            border: solid #ccc;
            border-width: 0px 1px 1px 1px;
            width: 32px;
            height: 256px;
            overflow: hidden;
            border-radius: 0 0 20px 20px;
            padding: 4px;
          }
          .app2 .progress > div {
            display: inline-block;
          }
          .app2 .progress__fill, .app2 .progress__fill--max {
            height: 100%;
            width: 100%;
            border-radius: 0 0 20px 20px;
          }
          .app2 .progress__fill {
            background-color: #99ccff;
          }
          .app2 .progress__fill--max {
            background-color: #336699;
          }
          .app2 .progress__highlight {
            background-color: #fff;
            width: 8px;
            height: 236px;
            position: relative;
            left: 20px;
            top: -256px;
            opacity: 0.8;
          }
    

    HTML

        <div class="app2">
          <div class="progress">
            <div class="progress__fill--max"></div>
            <div class="progress__highlight"></div>
          </div>
          <div class="reward">
            <div class="reward__value">100%</div>
          </div>
        </div>
        <div class="app2">
          <div class="progress">
            <div class="progress__fill" style="margin-top:128px; height: 128px;"></div>
            <div class="progress__highlight"></div>
          </div>
          <div class="reward">
            <div class="reward__value">50%</div>
          </div>
        </div>
    
    CSS.progress의 위쪽을 지우고 아래쪽을 동그랗게 문지르면 시험관 냄새가 납니다.
    "어? 하이라이터도 들어가지 않나요?"그래서 추가.progress__highlight중요한 것은 의식적으로 광원을 배치하여 시험관의 상단에서 곡선 앞으로 약간 내려가는 것이다

    그리고요?


    이번에는 어떻게든 될 수 있는지 시험해보려고 CSS로 시험관을 만들었는데'전제'에서 말한 것처럼 표기 언어인 HTML에 어떻게 된 일인지 알 수 없는 라벨을 넣고 싶지 않아서 시험관은 이미지로 이루어졌습니다.
    필름을 보석이나 무늬로 만들면 보석이나 저축 게임을 할 수 있을 거예요.

    좋은 웹페이지 즐겨찾기