오늘은 CSS3를 사용하여 HTML5 양식을 최적화하는 방법을 보여 드리겠습니다. 먼저 다음 형식의 양식을 만듭니다.
#redemption { width: 100%; font-family: 'ColaborateThinRegular'; font-weight: 400; } #redemption hgroup { argin-bottom: 20px; } #redemption div { width: 100%; margin-bottom: 15px; float: left; } #redemption span#range { float: left; font-size: 3em; width: 100%; color: red; clear: both; text-align: center; } #howYouRateThis,#yearOfCrime { text-align: right; } #redemption legend { font-style: italic; color: #434242; font-size: 0.8em; margin-bottom: 20px; float: left; width: 100%; } #redemption fieldset { border: 1px dotted #cccccc; padding: 2%; margin-bottom: 20px; } #redemption label { width: 40%; float: left; } #redemption input { height: 20px; font-size: 1em; width: 40%; float: right; } #redemption textarea { height: 60px; font-size: 1em; width: 40%; float: right; } #redemption input#submit { text-decoration: none; height: 34px; font: 1.25em /* 36px ÷ 16 */ 'BebasNeueRegular'; background-color: #b01c20; border-radius: 8px; color: white; float: right; margin-bottom: 10px; background: linear-gradient(top, rgb(241,92,96) 0%, rgb(17 100%); margin-top: 10px; box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8); text-shadow: 0px 1px black; border: 1px solid #bfbfbf; .polyfill-important .input-range,.polyfill-important .step-c float: right; } .polyfill-important .step-controls { margin-right: -20px!important; }
유념해야 할 점은 마지막 두 스타일은 해당 패치 스크립트가 실행될 때만 작동한다는 것입니다. 첫째, 각 필드세트가 서로 약간의 공간을 두고 멋진 그라데이션 배경을 갖기를 원합니다. 다음은 fieldset에 대한 수정된 CSS 코드입니다.
#redemption fieldset { border: 1px dotted #cccccc; padding: 2%; margin-bottom: 20px; background: #ffffff; background: linear-gradient(top, #ffffff 77%,#f2f2f2 100%); border-radius: 4px; box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.3); }
이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요.
관련 읽기:
위 내용은 CSS3를 사용하여 HTML5 양식을 최적화하는 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!