> 网上看到好的样式组件就保留下来。 ``` <style type="text/css"> /*! CSS Used from: https://demo.themegrill.com/ample/wp-content/plugins/everest-forms/assets/css/everest-forms.css?ver=1.4.4 ; media=all */ @media all{ .clearfix::after,.clearfix::before{display:table;content:"";} .clearfix::after{clear:both;} } /*! CSS Used from: https://demo.themegrill.com/ample/wp-content/themes/ample/style.css?ver=a0f4bb6bbffdc91f4c8a3942283e5ead ; media=all */ @media all{ div,span,h5,p,a,ul,li{border:0;font:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;} footer,section{display:block;} a:focus{outline:thin dotted;} a:hover,a:active{outline:0;} h5{color:#666666;line-height:1.4;padding-bottom:15px;font-weight:normal;} h5{font-size:22px;} p{color:#888888;font-size:15px;line-height:1.5;margin-bottom:15px;font-weight:300;} ul{list-style:none;} a{color:#80abc8;text-decoration:none;-webkit-transition:0.25s ease-in-out;-moz-transition:0.25s ease-in-out;transition:0.25s ease-in-out;-ms-transition:0.25s ease-in-out;-o-transition:0.25s ease-in-out;} a:focus,a:active,a:hover{text-decoration:none;} .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} .clearfix{display:inline-block;} .clearfix{display:block;} .inner-wrap{max-width:1100px;margin:0 auto;} .tg-one-fourth{float:left;width:22.95454545%;margin:0 2.72727272% 0 0;} .tg-one-fourth-last{margin:0px;} #colophon{font-size:14px;clear:both;color:#777;background-color:#1f2021;overflow:hidden;padding:50px 0 20px;} #colophon p{font-weight:300;color:#777;line-height:22px;font-size:15px;} #colophon a{font-weight:300;color:#b1b6b6;line-height:22px;font-size:13px;} #colophon a:hover{color:#80abc8;} .footer-widgets-area{padding-bottom:40px;color:#777777;} .footer-widgets-area .tg-one-fourth .widget-title{text-align:left;} .footer-widgets-area .tg-one-fourth p{text-align:left;color:#b1b6b6;} .footer-widgets-area a{color:#D5D5D5;} .footer-widgets-area a:hover{color:#80abc8;} #colophon .widget{padding-bottom:25px;} #colophon .widget-title{font-size:22px;line-height:1.4;color:#b1b6b6;} #colophon,#colophon p{font-size:14px;line-height:1.4;} #colophon .footer-widgets-area li a{display:inline-block;padding-bottom:3px;} .copyright-info{float:left;padding-right:10px;font-weight:300;} #colophon .copyright-info a{color:#b1b6b6;} #colophon .copyright-info a:hover{color:#80abc8;} .footer-nav{float:right;} .footer-nav ul li{display:inline-block;padding-left:10px;} #colophon .footer-nav ul li a{color:#b1b6b6;} #colophon .footer-nav ul li a:hover{color:#80abc8;} @media screen and (max-width: 1190px){ .inner-wrap{width:94%;} } @media screen and (max-width: 768px){ .footer-widgets-wrapper .tg-column-odd{float:left;width:48.18181818%;} .footer-widgets-wrapper .tg-column-even{float:right;width:48.18181818%;margin-right:0;} .tg-after-two-blocks-clearfix{clear:both;} .copyright-info{padding-right:0;float:none;text-align:center;} .footer-nav{float:none;text-align:center;} } @media screen and (max-width: 600px){ .footer-widgets-wrapper .tg-column-odd,.footer-widgets-wrapper .tg-column-even{float:none;width:100%;} } } </style> <footer id="colophon"> <div class="inner-wrap"> <div class="footer-widgets-wrapper"> <div class="footer-widgets-area clearfix"> <div class="footer-box tg-one-fourth tg-column-odd"> <section id="text-2" class="widget widget_text"><h5 class="widget-title"> Text Widget</h5> <div class="textwidget"><p>We built themes that are eye catching and easy to use, with lots of options and templates to change the look of your site as you wish.</p> <p>Also we provide extensive support for all our themes.</p> </div> </section> </div> <div class="footer-box tg-one-fourth tg-column-even"> <section id="recent-posts-3" class="widget widget_recent_entries"> <h5 class="widget-title">Recent Posts</h5> <ul> <li> <a href="https://demo.themegrill.com/ample/2015/02/09/suspendisse/">Suspendisse</a> </li> <li> <a href="https://demo.themegrill.com/ample/2015/02/09/mauris-eu-mollis/">Mauris eu mollis</a> </li> <li> <a href="https://demo.themegrill.com/ample/2015/02/09/donec-ornare/">Donec ornare</a> </li> <li> <a href="https://demo.themegrill.com/ample/2015/02/09/quisque-iaculis/">Quisque iaculis</a> </li> </ul> </section> </div> <div class="footer-box tg-one-fourth tg-after-two-blocks-clearfix tg-column-odd"> <section id="text-3" class="widget widget_text"><h5 class="widget-title">Our Other Themes</h5> <div class="textwidget"><ul> <li> <a href="http://themegrill.com/themes/spacious/">Spacious</a></li> <li> <a href="http://themegrill.com/themes/accelerate/">Accelerate</a></li> <li> <a href="http://themegrill.com/themes/radiate/">Radiate</a></li> <li> <a href="http://themegrill.com/themes/esteem/">Esteem</a></li> <li> <a href="http://themegrill.com/themes/freedom/">Freedom</a></li> <li> <a href="http://themegrill.com/themes/masonic/">Masonic</a></li> </ul> </div> </section> </div> <div class="footer-box tg-one-fourth tg-one-fourth-last tg-column-even"> <section id="nav_menu-2" class="widget widget_nav_menu"><h5 class="widget-title">Custom Menu</h5><div class="menu-custom-menu-container"><ul id="menu-custom-menu" class="menu"><li id="menu-item-41" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-41"><a href="https://demo.themegrill.com/ample">Live Demo</a></li> <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="https://demo.themegrill.com/ample/blog/">Blog</a></li> <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="https://demo.themegrill.com/ample/contact/">Contact Us</a></li> </ul></div></section> </div> </div> </div> <div class="footer-bottom clearfix"> <div class="copyright-info"> <div class="copyright">Copyright © 2019 <a href="https://demo.themegrill.com/ample/" title="Ample"><span>Ample</span></a>. Powered by <a href="http://wordpress.org" target="_blank" title="WordPress"><span>WordPress</span></a>. Theme: Ample by <a href="https://themegrill.com/themes/ample" target="_blank" title="ThemeGrill" rel="author"><span>ThemeGrill</span></a>.</div> </div> <div class="footer-nav"> <div class="menu-footer-container"><ul id="menu-footer" class="menu"><li id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32"><a href="http://themegrill.com/">ThemeGrill</a></li> <li id="menu-item-33" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-33"><a href="http://themegrill.com/theme-instruction/ample">Documentation</a></li> <li id="menu-item-34" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-34"><a href="http://themegrill.com/support-forum/">Support</a></li> </ul></div> </div> </div> </div> </footer> ``` ## 实际效果