直接把苹果官网的抠出来给大家了，拿去happy吧!
，先上效果图：
横屏一排的效果：
把浏览器拉小的效果：
激动的代码来了：
html>
Apple(中国)-官方网站
class="promopromo-holiday-music"
href="/cn/shop/gifts/music"
data-promo-id="holiday-music"
data-analytics-click="prop3:gift_guide,prefix:p"
data-analytics-title="promo-gift-guide">
表达心意，也是门艺术。发现美妙音乐好礼。
class="promopromo-airpods"
href="/cn/airpods/"
data-analytics-click="prop3:airpods,prefix:p"
data-analytics-title="promo-airpods">
AirPods无线，无繁琐，只有妙不可言。
data-promo-id="os-1"
class="promopromo-ipad-pro"
href="/cn/ipad-pro/"
data-analytics-click="prop3:ipad-pro,prefix:p"
data-analytics-title="promo-ipad-pro">
iPadPro。你的下一台电脑。
class="promopromo-iphone-upgrade"
href="/cn/shop/goto/iphone/iphone_upgrade_program"
data-analytics-click="prop3:iphone_upgrade,prefix:p"
data-analytics-title="promo-iphone_upgrade">
iPhone年年焕新计划每年都有一部新iPhone，并享受AppleCare+全方位服务计划。
下面是CSS文件：ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,hgroup,p,blockquote,figure,form,fieldset,input,legend,pre,abbr,button{
margin:0;
padding:0
}
article,aside,footer,header,nav,main,section,summary,details,hgroup,figure,figcaption{
display:block
}
lili{
font-size:1em
}
ul,ol{
margin:1em01em1.11111em
}
ulul,ulol,olul,olol{
margin-top:0;
margin-bottom:0
}
navul,navol{
list-style:none;
margin:0
}
.row{
position:relative;
z-index:1
}
.row:before,.row:after{
content:'';
display:table
}
.row:after{
clear:both
}
.column{
box-sizing:border-box;
position:relative;
z-index:1;
margin:0;
padding:0;
float:left;
min-height:2px
}
.medium-6{
width:50%
}
.small-12{
width:100%
}
.large-3{
width:25%
}
html.ie8.large-3{
width:24.975%
}
/*宽度自适应Start*/
@mediaonlyscreenand(min-width:1442px){
.xlarge-offset-0{
margin-left:0
}
.xlarge-push-0{
left:auto;
right:auto
}
.xlarge-pull-0{
right:auto;
left:auto
}
.xlarge-1{
width:8.33333%
}
.xlarge-offset-1{
margin-left:8.33333%
}
.xlarge-push-1{
left:8.33333%;
right:auto
}
.xlarge-pull-1{
right:8.33333%;
left:auto
}
.xlarge-2{
width:16.66667%
}
.xlarge-offset-2{
margin-left:16.66667%
}
.xlarge-push-2{
left:16.66667%;
right:auto
}
.xlarge-pull-2{
right:16.66667%;
left:auto
}
.xlarge-3{
width:25%
}
.xlarge-offset-3{
margin-left:25%
}
.xlarge-push-3{
left:25%;
right:auto
}
.xlarge-pull-3{
right:25%;
left:auto
}
.xlarge-4{
width:33.33333%
}
.xlarge-offset-4{
margin-left:33.33333%
}
.xlarge-push-4{
left:33.33333%;
right:auto
}
.xlarge-pull-4{
right:33.33333%;
left:auto
}
.xlarge-5{
width:41.66667%
}
.xlarge-offset-5{
margin-left:41.66667%
}
.xlarge-push-5{
left:41.66667%;
right:auto
}
.xlarge-pull-5{
right:41.66667%;
left:auto
}
.xlarge-6{
width:50%
}
.xlarge-offset-6{
margin-left:50%
}
.xlarge-push-6{
left:50%;
right:auto
}
.xlarge-pull-6{
right:50%;
left:auto
}
.xlarge-7{
width:58.33333%
}
.xlarge-offset-7{
margin-left:58.33333%
}
.xlarge-push-7{
left:58.33333%;
right:auto
}
.xlarge-pull-7{
right:58.33333%;
left:auto
}
.xlarge-8{
width:66.66667%
}
.xlarge-offset-8{
margin-left:66.66667%
}
.xlarge-push-8{
left:66.66667%;
right:auto
}
.xlarge-pull-8{
right:66.66667%;
left:auto
}
.xlarge-9{
width:75%
}
.xlarge-offset-9{
margin-left:75%
}
.xlarge-push-9{
left:75%;
right:auto
}
.xlarge-pull-9{
right:75%;
left:auto
}
.xlarge-10{
width:83.33333%
}
.xlarge-offset-10{
margin-left:83.33333%
}
.xlarge-push-10{
left:83.33333%;
right:auto
}
.xlarge-pull-10{
right:83.33333%;
left:auto
}
.xlarge-11{
width:91.66667%
}
.xlarge-offset-11{
margin-left:91.66667%
}
.xlarge-push-11{
left:91.66667%;
right:auto
}
.xlarge-pull-11{
right:91.66667%;
left:auto
}
.xlarge-12{
width:100%
}
.xlarge-offset-12{
margin-left:100%
}
.xlarge-push-12{
left:100%;
right:auto
}
.xlarge-pull-12{
right:100%;
left:auto
}
.xlarge-centered{
margin-left:auto;
margin-right:auto;
float:none
}
.xlarge-uncentered{
margin-left:0;
margin-right:0
}
.xlarge-last{
float:right
}
.xlarge-notlast{
float:left
}
}@mediaonlyscreenand(max-width:1068px){
.medium-offset-0{
margin-left:0
}
.medium-push-0{
left:auto;
right:auto
}
.medium-pull-0{
right:auto;
left:auto
}
.medium-1{
width:8.33333%
}
.medium-offset-1{
margin-left:8.33333%
}
.medium-push-1{
left:8.33333%;
right:auto
}
.medium-pull-1{
right:8.33333%;
left:auto
}
.medium-2{
width:16.66667%
}
.medium-offset-2{
margin-left:16.66667%
}
.medium-push-2{
left:16.66667%;
right:auto
}
.medium-pull-2{
right:16.66667%;
left:auto
}
.medium-3{
width:25%
}
.medium-offset-3{
margin-left:25%
}
.medium-push-3{
left:25%;
right:auto
}
.medium-pull-3{
right:25%;
left:auto
}
.medium-4{
width:33.33333%
}
.medium-offset-4{
margin-left:33.33333%
}
.medium-push-4{
left:33.33333%;
right:auto
}
.medium-pull-4{
right:33.33333%;
left:auto
}
.medium-5{
width:41.66667%
}
.medium-offset-5{
margin-left:41.66667%
}
.medium-push-5{
left:41.66667%;
right:auto
}
.medium-pull-5{
right:41.66667%;
left:auto
}
.medium-6{
width:50%
}
.medium-offset-6{
margin-left:50%
}
.medium-push-6{
left:50%;
right:auto
}
.medium-pull-6{
right:50%;
left:auto
}
.medium-7{
width:58.33333%
}
.medium-offset-7{
margin-left:58.33333%
}
.medium-push-7{
left:58.33333%;
right:auto
}
.medium-pull-7{
right:58.33333%;
left:auto
}
.medium-8{
width:66.66667%
}
.medium-offset-8{
margin-left:66.66667%
}
.medium-push-8{
left:66.66667%;
right:auto
}
.medium-pull-8{
right:66.66667%;
left:auto
}
.medium-9{
width:75%
}
.medium-offset-9{
margin-left:75%
}
.medium-push-9{
left:75%;
right:auto
}
.medium-pull-9{
right:75%;
left:auto
}
.medium-10{
width:83.33333%
}
.medium-offset-10{
margin-left:83.33333%
}
.medium-push-10{
left:83.33333%;
right:auto
}
.medium-pull-10{
right:83.33333%;
left:auto
}
.medium-11{
width:91.66667%
}
.medium-offset-11{
margin-left:91.66667%
}
.medium-push-11{
left:91.66667%;
right:auto
}
.medium-pull-11{
right:91.66667%;
left:auto
}
.medium-12{
width:100%
}
.medium-offset-12{
margin-left:100%
}
.medium-push-12{
left:100%;
right:auto
}
.medium-pull-12{
right:100%;
left:auto
}
.medium-centered{
margin-left:auto;
margin-right:auto;
float:none
}
.medium-uncentered{
margin-left:0;
margin-right:0
}
.medium-last{
float:right
}
.medium-notlast{
float:left
}
}@mediaonlyscreenand(max-width:735px){
.small-offset-0{
margin-left:0
}
.small-push-0{
left:auto;
right:auto
}
.small-pull-0{
right:auto;
left:auto
}
.small-1{
width:8.33333%
}
.small-offset-1{
margin-left:8.33333%
}
.small-push-1{
left:8.33333%;
right:auto
}
.small-pull-1{
right:8.33333%;
left:auto
}
.small-2{
width:16.66667%
}
.small-offset-2{
margin-left:16.66667%
}
.small-push-2{
left:16.66667%;
right:auto
}
.small-pull-2{
right:16.66667%;
left:auto
}
.small-3{
width:25%
}
.small-offset-3{
margin-left:25%
}
.small-push-3{
left:25%;
right:auto
}
.small-pull-3{
right:25%;
left:auto
}
.small-4{
width:33.33333%
}
.small-offset-4{
margin-left:33.33333%
}
.small-push-4{
left:33.33333%;
right:auto
}
.small-pull-4{
right:33.33333%;
left:auto
}
.small-5{
width:41.66667%
}
.small-offset-5{
margin-left:41.66667%
}
.small-push-5{
left:41.66667%;
right:auto
}
.small-pull-5{
right:41.66667%;
left:auto
}
.small-6{
width:50%
}
.small-offset-6{
margin-left:50%
}
.small-push-6{
left:50%;
right:auto
}
.small-pull-6{
right:50%;
left:auto
}
.small-7{
width:58.33333%
}
.small-offset-7{
margin-left:58.33333%
}
.small-push-7{
left:58.33333%;
right:auto
}
.small-pull-7{
right:58.33333%;
left:auto
}
.small-8{
width:66.66667%
}
.small-offset-8{
margin-left:66.66667%
}
.small-push-8{
left:66.66667%;
right:auto
}
.small-pull-8{
right:66.66667%;
left:auto
}
.small-9{
width:75%
}
.small-offset-9{
margin-left:75%
}
.small-push-9{
left:75%;
right:auto
}
.small-pull-9{
right:75%;
left:auto
}
.small-10{
width:83.33333%
}
.small-offset-10{
margin-left:83.33333%
}
.small-push-10{
left:83.33333%;
right:auto
}
.small-pull-10{
right:83.33333%;
left:auto
}
.small-11{
width:91.66667%
}
.small-offset-11{
margin-left:91.66667%
}
.small-push-11{
left:91.66667%;
right:auto
}
.small-pull-11{
right:91.66667%;
left:auto
}
.small-12{
width:100%
}
.small-offset-12{
margin-left:100%
}
.small-push-12{
left:100%;
right:auto
}
.small-pull-12{
right:100%;
left:auto
}
.small-centered{
margin-left:auto;
margin-right:auto;
float:none
}
.small-uncentered{
margin-left:0;
margin-right:0
}
.small-last{
float:right
}
.small-notlast{
float:left
}
}
/*宽度自适应END*/
.promos{
border-bottom:2pxsolid#fff
}
.promosul{
margin:0;
padding:0
}
.promos.promo-position{
list-style-type:none;
box-sizing:border-box;
border-top:2pxsolid#fff;
border-right:2pxsolid#fff
}
@mediaonlyscreenand(max-width:1068px){
.promos.promo-position.promo-tile-position-1{
border-right:none
}
}.promos.promo-position.promo-tile-position-3{
border-right:none
}
@mediaonlyscreenand(max-width:735px){
.promos.promo-position{
border-right:none
}
}.promos.promo-tile{
list-style-type:none;
box-sizing:border-box;
border-top:2pxsolid#fff;
border-right:2pxsolid#fff
}
@mediaonlyscreenand(max-width:1068px){
.promos.promo-tile.promo-tile-position-1{
border-right:none
}
}.promos.promo-tile.promo-tile-position-3{
border-right:none
}
@mediaonlyscreenand(max-width:735px){
.promos.promo-tile{
border-right:none
}
}.promos.promo{
display:block;
background-position:centercenter;
height:200px
}
.promos.promo-label{
position:absolute;
clip:rect(1px1px1px1px);
clip:rect(1px,1px,1px,1px);
-webkit-clip-path:inset(0px0px99.9%99.9%);
clip-path:inset(0px0px99.9%99.9%);
overflow:hidden;
height:1px;
width:1px;
padding:0;
border:0
}
[data-promo-type]{
visibility:hidden
}
[data-promo-type].promos-ready{
visibility:visible
}
.no-js[data-promo-type],.no-enhanced-gallery[data-promo-type]{
visibility:visible
}
/*第一个宽屏*/
.promo-holiday-music{
background-image:url("/cn/home/images/promos/gifts_music_b_large.jpg")
}
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-resolution:1.5dppx),(-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){
.promo-holiday-music{
background-image:url("/cn/home/images/promos/gifts_music_b_large_2x.jpg")
}
}
@mediaonlyscreenand(min-width:1442px){
.promo-holiday-music{
background-image:url("/cn/home/images/promos/gifts_music_b_xlarge.jpg")
}
}
@mediaonlyscreenand(min-width:1442px)and(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-width:1442px)and(min-resolution:1.5dppx),onlyscreenand(min-width:1442px)and(min-resolution:144dpi){
.promo-holiday-music{
background-image:url("/cn/home/images/promos/gifts_music_b_xlarge_2x.jpg")
}
}
@mediaonlyscreenand(max-width:1068px){
.promo-holiday-music{
background-image:url("/cn/home/images/promos/gifts_music_b_medium.jpg")
}
}
@mediaonlyscreenand(max-width:1068px)and(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(max-width:1068px)and(min-resolution:1.5dppx),onlyscreenand(max-width:1068px)and(min-resolution:144dpi){
.promo-holiday-music{
background-image:url("/cn/home/images/promos/gifts_music_b_medium_2x.jpg")
}
}
@mediaonlyscreenand(max-width:735px){
.promo-holiday-music{
background-image:url("/cn/home/images/promos/gifts_music_b_small.jpg")
}
}
@mediaonlyscreenand(max-width:735px)and(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(max-width:735px)and(min-resolution:1.5dppx),onlyscreenand(max-width:735px)and(min-resolution:144dpi){
.promo-holiday-music{
background-image:url("/cn/home/images/promos/gifts_music_b_small_2x.jpg")
}
}
/*第二个宽屏*/
.promo-airpods{
background-size:360px200px;
background-repeat:no-repeat;
background-image:url("/v/home/cz/images/shared/promos/airpods_large.jpg")
}
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-resolution:1.5dppx),(-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){
.promo-airpods{
background-image:url("/v/home/cz/images/shared/promos/airpods_large_2x.jpg")
}
}@mediaonlyscreenand(min-width:1442px){
.promo-airpods{
background-size:640px200px;
background-repeat:no-repeat;
background-image:url("/v/home/cz/images/shared/promos/airpods_xlarge.jpg")
}
}@mediaonlyscreenand(min-width:1442px)and(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-width:1442px)and(min-resolution:1.5dppx),onlyscreenand(min-width:1442px)and(min-resolution:144dpi){
.promo-airpods{
background-image:url("/v/home/cz/images/shared/promos/airpods_xlarge_2x.jpg")
}
}@mediaonlyscreenand(max-width:1068px){
.promo-airpods{
background-size:640px200px;
background-repeat:no-repeat;
background-image:url("/v/home/cz/images/shared/promos/airpods_medium.jpg")
}
}@mediaonlyscreenand(max-width:1068px)and(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(max-width:1068px)and(min-resolution:1.5dppx),onlyscreenand(max-width:1068px)and(min-resolution:144dpi){
.promo-airpods{
background-image:url("/v/home/cz/images/shared/promos/airpods_medium_2x.jpg")
}
}@mediaonlyscreenand(max-width:735px){
.promo-airpods{
background-size:736px200px;
background-repeat:no-repeat;
background-image:url("/v/home/cz/images/shared/promos/airpods_small.jpg")
}
}@mediaonlyscreenand(max-width:735px)and(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(max-width:735px)and(min-resolution:1.5dppx),onlyscreenand(max-width:735px)and(min-resolution:144dpi){
.promo-airpods{
background-image:url("/v/home/cz/images/shared/promos/airpods_small_2x.jpg")
}
}
/*第三个宽屏*/
.promo-ipad-pro{
background-size:360px200px;
background-repeat:no-repeat;
background-image:url("/v/home/cz/images/shared/promos/ipad_pro_large.jpg")
}
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-resolution:1.5dppx),(-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){
.promo-ipad-pro{
background-image:url("/v/home/cz/images/shared/promos/ipad_pro_large_2x.jpg")
}
}@mediaonlyscreenand(min-width:1442px){
.promo-ipad-pro{
background-size:640px200px;
background-repeat:no-repeat;
background-image:url("/v/home/cz/images/shared/promos/ipad_pro_xlarge.jpg")
}
}@mediaonlyscreenand(min-width:1442px)and(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-width:1442px)and(min-resolution:1.5dppx),onlyscreenand(min-width:1442px)and(min-resolution:144dpi){
.promo-ipad-pro{
background-image:url("/v/home/cz/images/shared/promos/ipad_pro_xlarge_2x.jpg")
}
}@mediaonlyscreenand(max-width:1068px){
.promo-ipad-pro{
background-size:640px200px;
background-repeat:no-repeat;
background-image:url("/v/home/cz/images/shared/promos/ipad_pro_medium.jpg")
}
}@mediaonlyscreenand(max-width:1068px)and(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(max-width:1068px)and(min-resolution:1.5dppx),onlyscreenand(max-width:1068px)and(min-resolution:144dpi){
.promo-ipad-pro{
background-image:url("/v/home/cz/images/shared/promos/ipad_pro_medium_2x.jpg")
}
}@mediaonlyscreenand(max-width:735px){
.promo-ipad-pro{
background-size:736px200px;
background-repeat:no-repeat;
background-image:url("/v/home/cz/images/shared/promos/ipad_pro_small.jpg")
}
}@mediaonlyscreenand(max-width:735px)and(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(max-width:735px)and(min-resolution:1.5dppx),onlyscreenand(max-width:735px)and(min-resolution:144dpi){
.promo-ipad-pro{
background-image:url("/v/home/cz/images/shared/promos/ipad_pro_small_2x.jpg")
}
}
/*第四个宽屏*/
.promo-iphone-upgrade{
background-size:360px200px;
background-repeat:no-repeat;
background-image:url("/cn/home/images/promos/iphone_upgrade_large.jpg");
}
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-resolution:1.5dppx),(-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){
.promo-iphone-upgrade{
background-image:url("/cn/home/images/promos/iphone_upgrade_large_2x.jpg");
}
}
@mediaonlyscreenand(min-width:1442px){
.promo-iphone-upgrade{
background-size:640px200px;
background-repeat:no-repeat;
background-image:url("/cn/home/images/promos/iphone_upgrade_xlarge.jpg");
}
}
@mediaonlyscreenand(min-width:1442px)and(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-width:1442px)and(min-resolution:1.5dppx),onlyscreenand(min-width:1442px)and(min-resolution:144dpi){
.promo-iphone-upgrade{
background-image:url("/cn/home/images/promos/iphone_upgrade_xlarge_2x.jpg");
}
}
@mediaonlyscreenand(max-width:1068px){
.promo-iphone-upgrade{
background-size:640px200px;
background-repeat:no-repeat;
background-image:url("/cn/home/images/promos/iphone_upgrade_medium.jpg");
}
}
@mediaonlyscreenand(max-width:1068px)and(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(max-width:1068px)and(min-resolution:1.5dppx),onlyscreenand(max-width:1068px)and(min-resolution:144dpi){
.promo-iphone-upgrade{
background-image:url("/cn/home/images/promos/iphone_upgrade_medium_2x.jpg");
}
}
@mediaonlyscreenand(max-width:735px){
.promo-iphone-upgrade{
background-size:736px200px;
background-repeat:no-repeat;
background-image:url("/cn/home/images/promos/iphone_upgrade_small.jpg");
}
}
@mediaonlyscreenand(max-width:735px)and(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(max-width:735px)and(min-resolution:1.5dppx),onlyscreenand(max-width:735px)and(min-resolution:144dpi){
.promo-iphone-upgrade{
background-image:url("/cn/home/images/promos/iphone_upgrade_small_2x.jpg");
}
}
html.ie8.promo-iphone-upgrade{
background-size:640px200px;
background-repeat:no-repeat;
background-image:url("/cn/home/images/promos/iphone_upgrade_medium.jpg");
height:200px;
font-size:0
}
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),onlyscreenand(min-resolution:1.5dppx),(-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){
html.ie8.promo-iphone-upgrade{
background-image:url("/cn/home/images/promos/iphone_upgrade_medium_2x.jpg")
}
}
本文为3YL原创,转载无需联系,但请注明来自。
原创文章不易，如果觉得有帮助，可打赏或点击右侧广告支持：
