直接把苹果官网的抠出来给大家了,拿去happy吧!
,先上效果图:
横屏一排的效果:
把浏览器拉小的效果:
激动的代码来了:
html>
Apple (中国) - 官方网站class="promo promo-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="promo promo-airpods"
href="/cn/airpods/"
data-analytics-click="prop3:airpods,prefix:p"
data-analytics-title="promo-airpods">
AirPods 无线,无繁琐,只有妙不可言。
data-promo-id="os-1"
class="promo promo-ipad-pro"
href="/cn/ipad-pro/"
data-analytics-click="prop3:ipad-pro,prefix:p"
data-analytics-title="promo-ipad-pro">
iPad Pro。你的下一台电脑。
class="promo promo-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
}
li li {
font-size:1em
}
ul,ol {
margin:1em 0 1em 1.11111em
}
ul ul,ul ol,ol ul,ol ol {
margin-top:0;
margin-bottom:0
}
nav ul,nav ol {
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 */
@media only screen and (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%