浠呬娇鐢℉TML/CSS瀹炵幇鍚勭杩涘害鏉＄殑N绉嶆柟娉曚娇鐢℉TML鏍囩鍒涘缓杩涘害鏉′娇鐢℉TML鏍囩
meter{width:200px;}鏍峰紡濡備笅锛氬叾涓璵in銆乵ax銆乿alue鍒嗗埆浠ｈ〃鏈€澶у€笺€佹渶灏忓€煎拰褰撳墠鍊笺€傚阀鍚堢殑鏄紝鎴戜滑鏉ョ湅鐪?progress>鏍囩鐨勭敤娉曪細
Completion:70%
progress{width:200px;}鏍峰紡濡備笅锛氬叾涓璵ax灞炴€ф弿杩皃rogress鍏冪礌浠ｈ〃鐨勪换鍔￠渶瑕佸畬鎴愬灏戝伐浣滐紝value灞炴€х敤浜庢寚瀹氳繘搴︽潯鐨勫畬鎴愬伐浣溿€俶eter&progress鐨勫尯鍒偅涔堥棶棰樻潵浜嗭紝浠庝笂闈㈢殑Demo鏉ョ湅锛岃繖涓や釜鏍囩鐨勬晥鏋滄槸瀹屽叏涓€鏍风殑锛岄偅涔堝畠浠埌搴曟湁浠€涔堝尯鍒憿锛熶负浠€涔堜細鏈変袱涓湅浼肩浉鍚岀殑鏍囩锛熻繖涓や釜鍏冪礌涔嬮棿鏈€澶х殑涓嶅悓鏄涔変笂鐨勪笉鍚屻€?meter>锛氳〃绀轰竴涓凡鐭ヨ寖鍥村唴鐨勬爣閲忔祴閲忓€兼垨鍒嗘暟鍊?progress>锛氳〃绀轰换鍔＄殑瀹屾垚杩涘害銆傛瘮濡傚綋鍓嶅畬鎴愪竴涓渶姹傚簲璇ヤ娇鐢?progress>锛屽鏋滆鏄剧ず姹借溅浠〃鐩樺€煎綋鍓嶇殑閫熷害锛屽簲璇ヤ娇鐢╩eter銆俶eter&progress鐨勫眬闄愭€у綋鐒讹紝鍦ㄥ疄闄呬笟鍔￠渶姹傛垨鑰呯敓浜х幆澧冧腑锛屼綘鍑犱箮涓嶄細鐪嬪埌
鍜?progress>鏍囩銆傜被浼间簬鎴戜滑鍦ㄨ繖绡囨枃绔犱腑鎻愬埌鐨勫師鍥犫€斺€斻€婂埄鐢?datalist 瀹炵幇鍙繃婊や笅鎷夐€夋銆嬶紝灏辨槸锛氭垜浠笉鑳芥湁鏁堢殑淇敼鍜?progress>鏍囩鐨勬牱寮忥紝姣斿鑳屾櫙鑹诧紝杩涘害鍓嶆櫙鑹茬瓑绛夈€傝€屼笖锛屾渶鑷村懡鐨勯棶棰樻槸娴忚鍣ㄩ粯璁ゆ牱寮忕殑琛ㄧ幇鍦ㄤ笉鍚岀殑娴忚鍣ㄤ箣闂存槸涓嶄竴鑷寸殑銆傝繖瀵逛簬杩芥眰绋冲畾鍜屼竴鑷寸殑UI鎬ц兘鐨勪紒涓氭潵璇存槸鐏鹃毦鎬х殑鐭澘锛佹垜浠笉鑳界粰瀹冨姞涓婁竴浜涘姩鐢绘晥鏋滃拰浜や簰鏁堟灉锛屽洜涓哄湪涓€浜涘疄闄呯殑搴旂敤鍦烘櫙涓紝瀹冭偗瀹氫笉鏄竴涓畝鍗曠殑杩涘害鏉℃樉绀恒€傝繘搴︽潯鏄敤CSS瀹炵幇鐨勩€傚洜姝わ紝鍦ㄨ繖涓樁娈碉紝鏇村鐨勮繕鏄娇鐢–SS銆傝繘搴︽潯鐨勫疄鐜版柟寮忋€備娇鐢ㄧ櫨鍒嗘瘮鏉ュ疄鐜拌繘搴︽潯鐨勪竴绉嶆渶甯歌鐨勬柟娉曟槸浣跨敤鑳屾櫙棰滆壊鏉ュ尮閰嶇櫨鍒嗏€嬧€嬫瘮鏉ュ埗浣滆繘搴︽潯銆傛渶绠€鍗曠殑DEMO锛?divclass="g-container"> 