模仿苹果的网站

外贸建站, 设计

做的最好的是卫龙拉条,这个不用多说。

我也尝试做了一个,用wordpress主题betheme主题。


下边是无聊的时刻,我把其中的CSS代码贴过来。


 

/* Subheader */
#Subheader { border-bottom: 2px solid #ffa820; padding: 0 0 100px; }
#Subheader .title { font-weight: 700; letter-spacing: 3px; }

/* Footer */
#Footer .footer_copy { display: none; }

/* Section Gallery */
#gallery ul.list_check li, #gallery li.list_check { background: url(http://www.dolphinsups.com/wp-content/uploads/2015/01/list_check.png) no-repeat 20px 5px; }
#gallery ul.list_check li:after { background: rgba(255,255,255,.08); }
#gallery .image_frame {
border-color: rgba(255, 255, 255, 0.02);
}

/* Forms */
input[type=”text”], input[type=”tel”], input[type=”password”], input[type=”email”], textarea, select, .woocommerce .quantity input.qty { background-color: #f2f2f2; }

input[type=”submit”] { color: #000; background-color: transparent; background-image: none; border: 1px solid #000; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); font-size: 110%; padding: 9px 15px; border-radius: 0; }

/* Error 404 */
#Error_404 .error_desk h2, #Error_404 .error_desk h4, #Error_404 .error_desk p { color: #fff; }
#Error_404 .error_desk p .check { color: rgba(255, 255, 255, 0.5); }
#Top_bar {
padding-bottom: 0 !important;
}

#Top_bar #logo, #Top_bar .menu > li > a, #Top_bar .top_bar_right, .header-plain #Top_bar .top_bar_right{
padding: 0 !important;
height: 45px !important;
line-height: 45px !important;
}
#Top_bar .top_bar_right_wrapper {
top: 10px;
}
#Top_bar .menu > li > a span:not(.description) {
line-height: 45px;
}

#Top_bar .top_bar_right a:not(.action_button) {
color: #fff;
}
#Top_bar a#search_button {
top: 5px;
}
#Top_bar a#header_cart {
display: none;
}

@media only screen and (max-width: 767px){
#Header a.responsive-menu-toggle {
left: 5px !important;
color: #ffffff;
top: 10px !important;
}
.header-classic #Top_bar .top_bar_right {
top: 0;
right: 0px;
position: absolute;
top: 20px;
}

}
#Footer .footer_copy .one {
margin-bottom: 20px;
padding-top: 10px;
min-height: 0;
}

#Footer .footer_copy {
display: block;
}

#Footer .footer_copy {
border-top: 1px solid #d6d6d6;
}
#Top_bar .search_wrapper {
background: #000000;
z-index: 999;
left: 84px;
top: 2px;
width: calc(100% – 84px);
padding: 0;
height: 40px;
}

#Top_bar .search_wrapper .icon_close {
opacity: 1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}

#Top_bar .search_wrapper .icon_search, #Top_bar .search_wrapper .icon_close {
top: 12px;
}
html {
background-color: #fafafa;
}
#Wrapper, #Content {
background-color: #fafafa;
}

.get_in_touch, .get_in_touch a, .get_in_touch h3, .get_in_touch ul, .infobox, .infobox a, .infobox h3, .infobox ul {
color: #333!important;
}

.wpb_wrapper .wpcf7-form {
width: 100%;
}
label, legend {
font-weight: 400;
}

#Footer h4, #Footer h4 a, #Footer h4 a:hover {
color: #333333;
font-size: 1em;
letter-spacing: 0;
}
#Header .top_bar_left, .header-classic #Top_bar, .header-plain #Top_bar, .header-stack #Top_bar, .header-split #Top_bar, .header-fixed #Top_bar, .header-below #Top_bar, #Header_creative, #Top_bar #menu, .sticky-tb-color #Top_bar.is-sticky {
background-color: #333 !important;
}
#Footer .footer_copy .social li a, #Footer .footer_copy .social li a:hover {
color: #848484;
font-size: 20px;
}
#Top_bar .menu_wrapper {
float: none;
}
#menu-item-254{
float: right !important;
}

.displaynone, .post-nav, .post-meta, .author-box, .section-post-related, .section-post-comments {
display: none;
}

关注微信公众号

上一篇文章
设计之 Logo
下一篇文章
Hola! 关于建站2、3事
菜单