html+css3书写苹果手机样式

1、新建html文档。

3、书写公用css代码。<style>*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; }body { background-color: #222; letter-spacing: 0.5px; }input[type="radio"] { position: fixed; top: -1.5em; left: -1.5em; }input[type="radio"] ~ .pagination label span { background-color: #fff; border-radius: 50%; display: inline-block; margin: 8px 4px; opacity: 0.3; height: 8px; width: 8px; }input[type="radio"]:nth-of-type(1):checked ~ .pagination label:nth-child(1) span { opacity: 1; }input[type="radio"]:nth-of-type(1):checked ~ .pages { transform: translateX(0%); }input[type="radio"]:nth-of-type(1):checked ~ .pages .page .bg-blur, input[type="radio"]:nth-of-type(1):checked ~ .pages .bottom-bar { transform: translateX(0%); }input[type="radio"]:nth-of-type(2):checked ~ .pagination label:nth-child(2) span { opacity: 1; }input[type="radio"]:nth-of-type(2):checked ~ .pages { transform: translateX(-100%); }input[type="radio"]:nth-of-type(2):checked ~ .pages .page .bg-blur, input[type="radio"]:nth-of-type(2):checked ~ .pages .bottom-bar { transform: translateX(100%); }.screen { background-color: #000; background-image: url(1.jpg); background-position: center; background-size: auto 100%; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 12px; font-weight: 300; line-height: 20px; margin: 1.5em auto 0 auto; overflow: hidden; position: relative; transform-style: preserve-3d; width: 320px; height: 568px; }.status, .pages, .pagination, .bg-blur, .bottom-bar { position: absolute; }.status { display: flex; align-items: center; padding: 0 4px; width: 100%; height: 20px; }.status > div { width: 33.33%; }.clock { text-align: center; }.battery-meter { margin: 0 0 0 auto; height: 18px; width: 29px; }.battery-meter > div { display: inline-block; }.battery-meter-inner { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset; border-radius: 3px; margin-right: 1px; position: relative; height: 12px; width: 25px; }.battery-meter-inner:before, .battery-meter-inner:after { content: ""; display: block; }.battery-meter-inner:before { background-color: #fff; border-radius: 1px 0 0 1px; margin: 2px; height: 8px; width: 19px; }.battery-meter-inner:after { background-color: rgba(255, 255, 255, 0.5); border-radius: 0 3px 3px 0; position: absolute; top: 0; left: 100%; margin: 4px 0 0 1px; height: 4px; width: 2px; }</style>

5、代码整体结构。