我是网站编程的新手，但已经成功调整了我正在使用的Wordpress主题的一些CSS代码：Expositio（wpshower / themes / expositio）。
有一个CSS页面转换代码（或者我相信）：
#wrapper {
width: 100%;
height: 100%;
min-height: 300px; /*added cos there's no content!*/
background-color: yellow; /*added for clarity*/
}
.site {
opacity: .5; /*adjusted from 0*/
position: relative;
min-width: 320px;
-webkit-transition: opacity 0.3s, left 0.3s ease-out;
-moz-transition: opacity 0.3s, left 0.3s ease-out;
-o-transition: opacity 0.3s, left 0.3s ease-out;
transition: opacity 0.3s, left 0.3s ease-out;
}
.main-content,
.content-area {
height: 100%;
white-space: nowrap;
}
/* Infinite load */
@-webkit-keyframes buffer1 {
0% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes buffer1 {
0% {
-moz-transform: scale(0);
}
50% {
-moz-transform: scale(1);
}
}
@-o-keyframes buffer1 {
0% {
-o-transform: scale(0);
}
50% {
-o-transform: scale(1);
}
}
@-ms-keyframes buffer1 {
0% {
-ms-transform: scale(0);
}
50% {
-ms-transform: scale(1);
}
}
@keyframes buffer1 {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
@-webkit-keyframes buffer2 {
0% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes buffer2 {
0% {
-moz-transform: scale(0);
}
50% {
-moz-transform: scale(0);
}
100% {
-moz-transform: scale(1);
}
}
@-o-keyframes buffer2 {
0% {
-o-transform: scale(0);
}
50% {
-o-transform: scale(0);
}
100% {
-o-transform: scale(1);
}
}
@-ms-keyframes buffer2 {
0% {
-ms-transform: scale(0);
}
50% {
-ms-transform: scale(0);
}
100% {
-ms-transform: scale(1);
}
}
@keyframes buffer2 {
0% {
transform: scale(0);
}
50% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
#infinite-loader {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
}
#infinite-loader.active {
display: block;
}
#infinite-loader>* {
display: block;
position: absolute;
top: -50%;
left: -50%;
width: 100%;
height: 100%;
background: #bfbfbf;
border-radius: 50%;
}
#infinite-loader>*:nth-child(1) {
background: transparent;
}
#infinite-loader>*:nth-child(2) {
-webkit-animation: buffer1 0.5s infinite;
-moz-animation: buffer1 0.5s infinite;
-o-animation: buffer1 0.5s infinite;
-ms-animation: buffer1 0.5s infinite;
animation: buffer1 0.5s infinite;
}
#infinite-loader>*:nth-child(3) {
background: transparent;
-webkit-animation: buffer2 0.2s infinite;
-moz-animation: buffer2 0.2s infinite;
-o-animation: buffer2 0.2s infinite;
-ms-animation: buffer2 0.2s infinite;
animation: buffer2 0.2s infinite;
}<html>
<body>
<div class="site"> <!-- #page -->
<div id="wrapper"> <!-- #wrapper -->
<div class="main-content"> <!-- #main -->
<p>hello</p>
<span id="infinite-loader"> </span>
<span> </span>
<span> </span>
<span> </span>
<!--<?php wp_footer(); ?>--->
</div>
</div>
</div>
</body>
</html>
这是HTML：
<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>SIMON VERMEULEN</title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://simonvermeulen.com/xmlrpc.php">
<link rel="shortcut icon" href="http://simonvermeulen.com/wp-content/themes/expositio/favicon.png" />
<!--[if lt IE 9]>
<script src="http://simonvermeulen.com/wp-content/themes/expositio/js/html5.js"></script>
<![endif]-->
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="SIMON VERMEULEN » Feed" href="http://simonvermeulen.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="SIMON VERMEULEN » Comments Feed" href="http://simonvermeulen.com/comments/feed/" />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/simonvermeulen.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.7.5"}};
!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),!(j.toDataURL().length<3e3)&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,65039,8205,55356,57096),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,55356,57096),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55357,56425,55356,57341,8205,55357,56507),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55357,56425,55356,57341,55357,56507),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='dashicons-css' href='http://simonvermeulen.com/wp-includes/css/dashicons.min.css?ver=4.7.5' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://simonvermeulen.com/wp-includes/css/admin-bar.min.css?ver=4.7.5' type='text/css' media='all' />
<link rel='stylesheet' id='page-list-style-css' href='http://simonvermeulen.com/wp-content/plugins/page-list/css/page-list.css?ver=5.1' type='text/css' media='all' />
<link rel='stylesheet' id='bg-shce-genericons-css' href='http://simonvermeulen.com/wp-content/plugins/show-hidecollapse-expand/assets/css/genericons/genericons.css?ver=4.7.5' type='text/css' media='all' />
<link rel='stylesheet' id='bg-show-hide-css' href='http://simonvermeulen.com/wp-content/plugins/show-hidecollapse-expand/assets/css/bg-show-hide.css?ver=4.7.5' type='text/css' media='all' />
<link rel='stylesheet' id='expositio-font-css' href='//fonts.googleapis.com/css?family=Lusitana%3A400%2C700' type='text/css' media='all' />
<link rel='stylesheet' id='expositio-style-css' href='http://simonvermeulen.com/wp-content/themes/expositio/style.css?ver=4.7.5' type='text/css' media='all' />
<style id='expositio-style-inline-css' type='text/css'>
html {
height: -moz-calc(100% - 32px);
height: -webkit-calc(100% - 32px);
height: calc(100% - 32px);
}
@media (min-width: 951px) {
.site-header {
height: -moz-calc(100% - 32px);
height: -webkit-calc(100% - 32px);
height: calc(100% - 32px);
}
}
@media (max-width: 782px) {
html {
height: -moz-calc(100% - 46px);
height: -webkit-calc(100% - 46px);
height: calc(100% - 46px);
}
}
</style>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<link rel='https://api.w.org/' href='http://simonvermeulen.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://simonvermeulen.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://simonvermeulen.com/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.7.5" />
<link rel="canonical" href="http://simonvermeulen.com/" />
<link rel='shortlink' href='http://simonvermeulen.com/' />
<link rel="alternate" type="application/json+oembed" href="http://simonvermeulen.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fsimonvermeulen.com%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://simonvermeulen.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fsimonvermeulen.com%2F&format=xml" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}
</style>
<link rel="icon" href="http://simonvermeulen.com/wp-content/uploads/2017/04/cropped-White-Site-Icon-32x32.png" sizes="32x32" />
<link rel="icon" href="http://simonvermeulen.com/wp-content/uploads/2017/04/cropped-White-Site-Icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="http://simonvermeulen.com/wp-content/uploads/2017/04/cropped-White-Site-Icon-180x180.png" />
<meta name="msapplication-TileImage" content="http://simonvermeulen.com/wp-content/uploads/2017/04/cropped-White-Site-Icon-270x270.png" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-38407287-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class="home page-template-default page page-id-1267 logged-in admin-bar no-customize-support">
<div id="wrapper">
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<h1 class="site-title"><a href="http://simonvermeulen.com/" rel="home">SIMON VERMEULEN</a></h1>
<h1 class="menu-toggle">m</h1>
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<a class="screen-reader-text skip-link" href="#content">Skip to content</a>
<span id="navigation-close">✕</span>
<div id="top-main-menu" class="menu-work-container"><ul id="menu-work" class="nav-menu"><li id="menu-item-1241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1241"><a href="http://simonvermeulen.com/der-untermensch/"><em>Der Untermensch</em></a>
<ul class="sub-menu">
<li id="menu-item-1423" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1423"><a href="http://simonvermeulen.com/stills/">Stills</a></li>
<li id="menu-item-1221" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1221"><a href="http://simonvermeulen.com/glass-shoes/">Glass Shoes</a></li>
</ul>
</li>
</ul></div> <div id="top-right-menu" class="menu-more-container"><ul id="menu-more" class="nav-menu"><li id="menu-item-1381" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1381"><a href="http://simonvermeulen.com/about/">About</a></li>
<li id="menu-item-1382" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1382"><a href="http://simonvermeulen.com/contact-press/">Contact / Press</a></li>
</ul></div> </nav>
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
</div><!-- .site-info -->
<div class="copyright">© 2017 Simon Vermeulen. All Rights Reserved.</div>
</footer><!-- #colophon -->
</header><!-- #masthead -->
<div id="header-helper"></div>
<div id="main" class="site-main">
<div id="main-content" class="main-content">
<article id="post-1267" class="post-1267 page type-page status-publish hentry">
<div class="entry-content">
<h5>News</h5>
<h6>June 8 – July 14, 2017<br />
<em>Transformation</em><br />
Le Livart, Montreal (group show)</p>
<p>Opening: June 8, 2017</h6>
<p>With Marie-Josée Bergeron, Zoé Boivin, Robert Chayer, Guillaume Cloutier, Jacynthe Cloutier, Emily Comeau, Pablo-Martín Córdoba, Alex Côté, Marc Dupuis, Antony Gasnier, Annie-Claude Généreux, Makwanda et Julia Hall, Symon Henry, Thierry Huard, Sylvie Plante, Laurence Rivest, Michaëlle Sergile, Véronique Tremblay and Éric Villeneuve.</p>
<p>For the first time in a gallery, Simon Vermeulen presents <a href="http://simonvermeulen.com/der-untermensch/"><em>Der Untermensch</em></a>, a short dance film portraying a persecuted homosexual during the Third Reich taking refuge in his imagination to find freedom from within. The <a href="http://simonvermeulen.com/glass-shoes/">glass shoes</a> featured in the film will also be exposed.</p>
<p>For further information see: <a href="http://lelivart.com">www.lelivart.com</a></p>
<p><a href="http://simonvermeulen.com/der-untermensch/"><img class="aligncenter wp-image-1480 size-large" src="http://simonvermeulen.com/wp-content/uploads/2017/03/00092948-1-1024x540.jpg" alt="" width="1024" height="540" srcset="http://simonvermeulen.com/wp-content/uploads/2017/03/00092948-1-1024x540.jpg 1024w, http://simonvermeulen.com/wp-content/uploads/2017/03/00092948-1-300x158.jpg 300w, http://simonvermeulen.com/wp-content/uploads/2017/03/00092948-1-768x405.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
</div><!-- .entry-content -->
</article><!--
--><!--
--><ul class="gallery gallery-animated">
<!--
--></ul><!--
--> </div><!-- #main-content -->
</div><!-- #main -->
</div><!-- #page -->
</div><!-- #wrapper -->
<span id="infinite-loader">
<span></span>
<span></span>
<span></span>
</span>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/admin-bar.min.js?ver=4.7.5'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/jquery/ui/effect-slide.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/jquery/ui/effect-highlight.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/jquery/ui/effect-fold.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-content/plugins/show-hidecollapse-expand/assets/js/bg-show-hide.js?ver=4.7.5'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-content/themes/expositio/js/functions.js?ver=20140321'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/wp-embed.min.js?ver=4.7.5'></script>
<!--[if lte IE 8]>
<script type="text/javascript">
document.body.className = document.body.className.replace( /(^|\s)(no-)?customize-support(?=\s|$)/, '' ) + ' no-customize-support';
</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript">
(function() {
var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
request = true;
b[c] = b[c].replace( rcs, ' ' );
// The customizer requires postMessage and CORS (if the site is cross domain)
b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
}());
</script>
<!--<![endif]-->
<div id="wpadminbar" class="nojq nojs">
<a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Toolbar" tabindex="0">
<ul id="wp-admin-bar-root-default" class="ab-top-menu">
<li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://simonvermeulen.com/wp-admin/about.php"><span class="ab-icon"></span><span class="screen-reader-text">About WordPress</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
<li id="wp-admin-bar-about"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/about.php">About WordPress</a> </li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
<li id="wp-admin-bar-wporg"><a class="ab-item" href="https://wordpress.org/">WordPress.org</a> </li>
<li id="wp-admin-bar-documentation"><a class="ab-item" href="https://codex.wordpress.org/">Documentation</a> </li>
<li id="wp-admin-bar-support-forums"><a class="ab-item" href="https://wordpress.org/support/">Support Forums</a> </li>
<li id="wp-admin-bar-feedback"><a class="ab-item" href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a> </li></ul></div> </li>
<li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://simonvermeulen.com/wp-admin/">SIMON VERMEULEN</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
<li id="wp-admin-bar-dashboard"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/">Dashboard</a> </li></ul><ul id="wp-admin-bar-appearance" class="ab-submenu">
<li id="wp-admin-bar-themes"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/themes.php">Themes</a> </li>
<li id="wp-admin-bar-menus"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/nav-menus.php">Menus</a> </li></ul></div> </li>
<li id="wp-admin-bar-customize" class="hide-if-no-customize"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/customize.php?url=http%3A%2F%2Fsimonvermeulen.com%2F">Customize</a> </li>
<li id="wp-admin-bar-updates"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/update-core.php" title="2 Plugin Updates"><span class="ab-icon"></span><span class="ab-label">2</span><span class="screen-reader-text">2 Plugin Updates</span></a> </li>
<li id="wp-admin-bar-comments"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/edit-comments.php"><span class="ab-icon"></span><span class="ab-label awaiting-mod pending-count count-0" aria-hidden="true">0</span><span class="screen-reader-text">0 comments awaiting moderation</span></a> </li>
<li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://simonvermeulen.com/wp-admin/post-new.php"><span class="ab-icon"></span><span class="ab-label">New</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu">
<li id="wp-admin-bar-new-post"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/post-new.php">Post</a> </li>
<li id="wp-admin-bar-new-media"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/media-new.php">Media</a> </li>
<li id="wp-admin-bar-new-page"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/post-new.php?post_type=page">Page</a> </li>
<li id="wp-admin-bar-new-user"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/user-new.php">User</a> </li></ul></div> </li>
<li id="wp-admin-bar-edit"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/post.php?post=1267&action=edit">Edit Page</a> </li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
<li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://simonvermeulen.com/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" /><label for="adminbar-search" class="screen-reader-text">Search</label><input type="submit" class="adminbar-button" value="Search"/></form></div> </li>
<li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" aria-haspopup="true" href="http://simonvermeulen.com/wp-admin/profile.php">Howdy, admin<img alt='' src='http://2.gravatar.com/avatar/2f1fc2ebbbe6ae67e11671b5765ee1c9?s=26&d=blank&r=g' srcset='http://2.gravatar.com/avatar/2f1fc2ebbbe6ae67e11671b5765ee1c9?s=52&d=blank&r=g 2x' class='avatar avatar-26 photo' height='26' width='26' /></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class="ab-submenu">
<li id="wp-admin-bar-user-info"><a class="ab-item" tabindex="-1" href="http://simonvermeulen.com/wp-admin/profile.php"><img alt='' src='http://2.gravatar.com/avatar/2f1fc2ebbbe6ae67e11671b5765ee1c9?s=64&d=blank&r=g' srcset='http://2.gravatar.com/avatar/2f1fc2ebbbe6ae67e11671b5765ee1c9?s=128&d=blank&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /><span class='display-name'>admin</span></a> </li>
<li id="wp-admin-bar-edit-profile"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/profile.php">Edit My Profile</a> </li>
<li id="wp-admin-bar-logout"><a class="ab-item" href="http://simonvermeulen.com/wp-login.php?action=logout&_wpnonce=2fed4da8ed">Log Out</a> </li></ul></div> </li></ul> </div>
<a class="screen-reader-shortcut" href="http://simonvermeulen.com/wp-login.php?action=logout&_wpnonce=2fed4da8ed">Log Out</a>
</div>
</body>
</html>
现在，我想在我的网页上使用切换文字链接来显示/隐藏文字（我找到了一个插件：http://showhide.bunte-giraffe.de）。
当我点击切换链接时，会触发页面转换动画，使页面内容消失，但保持在同一页面上。
有人可以帮助我吗，我甚至不确定问题是否是CSS ......
如果您需要任何进一步的信息，请与我们联系！
非常感谢你！
答案 0 :(得分：0)
你正在加载jquery两次 - 只加载一次。我编辑了你的css以删除标题中的css并将它放在一起，我添加了几个类来调整图像大小，但你也可以使用媒体查询。你可以将这个css放在外部样式表中，或者看它是wordpress，只需编辑主题。
我不明白你对切换/转换的意思..你能详细说明......
* html,
body {
margin-top: 32px !important;
}
html {
height: -moz-calc(100% - 32px);
height: -webkit-calc(100% - 32px);
height: calc(100% - 32px);
}
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
img.size-large {
margin: 0 auto;
text-align:center;
max-width: 1024px;
height: auto;
}
img.size-medium {
margin: 0 auto;
text-align:center;
max-width: 768px;
height: auto;
}
img.size-small {
margin: 0 auto;
text-align:center;
max-width: 480px;
height: auto;
}
@media (min-width: 951px) {
.site-header {
height: -moz-calc(100% - 32px);
height: -webkit-calc(100% - 32px);
height: calc(100% - 32px);
}
}
@media (max-width: 782px) {
html {
height: -moz-calc(100% - 46px);
height: -webkit-calc(100% - 46px);
height: calc(100% - 46px);
}
}
@media print {
#wpadminbar {
display: none;
}
}<html lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>SIMON VERMEULEN</title>
<!--- <link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://simonvermeulen.com/xmlrpc.php">
<link rel="shortcut icon" href="http://simonvermeulen.com/wp-content/themes/expositio/favicon.png" />--->
<!--[if lt IE 9]>
<script src="http://simonvermeulen.com/wp-content/themes/expositio/js/html5.js"></script>
<![endif]-->
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<!--- <link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="SIMON VERMEULEN » Feed" href="http://simonvermeulen.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="SIMON VERMEULEN » Comments Feed" href="http://simonvermeulen.com/comments/feed/" />--->
<script type="text/javascript">
window._wpemojiSettings = {
"baseUrl": "https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/72x72\/",
"ext": ".png",
"svgUrl": "https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/svg\/",
"svgExt": ".svg",
"source": {
"concatemoji": "http:\/\/simonvermeulen.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.7.5"
}
};
! function(a, b, c) {
function d(a) {
var b, c, d, e, f = String.fromCharCode;
if (!k || !k.fillText) return !1;
switch (k.clearRect(0, 0, j.width, j.height), k.textBaseline = "top", k.font = "600 32px Arial", a) {
case "flag":
return k.fillText(f(55356, 56826, 55356, 56819), 0, 0), !(j.toDataURL().length < 3e3) && (k.clearRect(0, 0, j.width, j.height), k.fillText(f(55356, 57331, 65039, 8205, 55356, 57096), 0, 0), b = j.toDataURL(), k.clearRect(0, 0, j.width, j.height), k.fillText(f(55356, 57331, 55356, 57096), 0, 0), c = j.toDataURL(), b !== c);
case "emoji4":
return k.fillText(f(55357, 56425, 55356, 57341, 8205, 55357, 56507), 0, 0), d = j.toDataURL(), k.clearRect(0, 0, j.width, j.height), k.fillText(f(55357, 56425, 55356, 57341, 55357, 56507), 0, 0), e = j.toDataURL(), d !== e
}
return !1
}
function e(a) {
var c = b.createElement("script");
c.src = a, c.defer = c.type = "text/javascript", b.getElementsByTagName("head")[0].appendChild(c)
}
var f, g, h, i, j = b.createElement("canvas"),
k = j.getContext && j.getContext("2d");
for (i = Array("flag", "emoji4"), c.supports = {
everything: !0,
everythingExceptFlag: !0
}, h = 0; h < i.length; h++) c.supports[i[h]] = d(i[h]), c.supports.everything = c.supports.everything && c.supports[i[h]], "flag" !== i[h] && (c.supports.everythingExceptFlag = c.supports.everythingExceptFlag && c.supports[i[h]]);
c.supports.everythingExceptFlag = c.supports.everythingExceptFlag && !c.supports.flag, c.DOMReady = !1, c.readyCallback = function() {
c.DOMReady = !0
}, c.supports.everything || (g = function() {
c.readyCallback()
}, b.addEventListener ? (b.addEventListener("DOMContentLoaded", g, !1), a.addEventListener("load", g, !1)) : (a.attachEvent("onload", g), b.attachEvent("onreadystatechange", function() {
"complete" === b.readyState && c.readyCallback()
})), f = c.source || {}, f.concatemoji ? e(f.concatemoji) : f.wpemoji && f.twemoji && (e(f.twemoji), e(f.wpemoji)))
}(window, document, window._wpemojiSettings);
</script>
<link rel='stylesheet' id='dashicons-css' href='http://simonvermeulen.com/wp-includes/css/dashicons.min.css?ver=4.7.5' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://simonvermeulen.com/wp-includes/css/admin-bar.min.css?ver=4.7.5' type='text/css' media='all' />
<link rel='stylesheet' id='page-list-style-css' href='http://simonvermeulen.com/wp-content/plugins/page-list/css/page-list.css?ver=5.1' type='text/css' media='all' />
<link rel='stylesheet' id='bg-shce-genericons-css' href='http://simonvermeulen.com/wp-content/plugins/show-hidecollapse-expand/assets/css/genericons/genericons.css?ver=4.7.5' type='text/css' media='all' />
<link rel='stylesheet' id='bg-show-hide-css' href='http://simonvermeulen.com/wp-content/plugins/show-hidecollapse-expand/assets/css/bg-show-hide.css?ver=4.7.5' type='text/css' media='all' />
<link rel='stylesheet' id='expositio-font-css' href='//fonts.googleapis.com/css?family=Lusitana%3A400%2C700' type='text/css' media='all' />
<link rel='stylesheet' id='expositio-style-css' href='http://simonvermeulen.com/wp-content/themes/expositio/style.css?ver=4.7.5' type='text/css' media='all' />
<!-- <style id='expositio-style-inline-css' type='text/css'>
style with an id???
</style>--->
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<link rel='https://api.w.org/' href='http://simonvermeulen.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://simonvermeulen.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://simonvermeulen.com/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.7.5" />
<link rel="canonical" href="http://simonvermeulen.com/" />
<link rel='shortlink' href='http://simonvermeulen.com/' />
<link rel="alternate" type="application/json+oembed" href="http://simonvermeulen.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fsimonvermeulen.com%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://simonvermeulen.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fsimonvermeulen.com%2F&format=xml" />
<link rel="icon" href="http://simonvermeulen.com/wp-content/uploads/2017/04/cropped-White-Site-Icon-32x32.png" sizes="32x32" />
<link rel="icon" href="http://simonvermeulen.com/wp-content/uploads/2017/04/cropped-White-Site-Icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="http://simonvermeulen.com/wp-content/uploads/2017/04/cropped-White-Site-Icon-180x180.png" />
<meta name="msapplication-TileImage" content="http://simonvermeulen.com/wp-content/uploads/2017/04/cropped-White-Site-Icon-270x270.png" />
<!--- <script> analytics not required onSO!
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-38407287-1', 'auto');
ga('send', 'pageview');
</script>--->
</head>
<body class="home page-template-default page page-id-1267 logged-in admin-bar no-customize-support">
<div id="wrapper">
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<h1 class="site-title"><a href="http://simonvermeulen.com/" rel="home">SIMON VERMEULEN</a></h1>
<h1 class="menu-toggle">m</h1>
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<a class="screen-reader-text skip-link" href="#content">Skip to content</a>
<span id="navigation-close">✕</span>
<div id="top-main-menu" class="menu-work-container">
<ul id="menu-work" class="nav-menu">
<li id="menu-item-1241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1241"><a href="http://simonvermeulen.com/der-untermensch/"><em>Der Untermensch</em></a>
<ul class="sub-menu">
<li id="menu-item-1423" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1423"><a href="http://simonvermeulen.com/stills/">Stills</a></li>
<li id="menu-item-1221" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1221"><a href="http://simonvermeulen.com/glass-shoes/">Glass Shoes</a></li>
</ul>
</li>
</ul>
</div>
<div id="top-right-menu" class="menu-more-container">
<ul id="menu-more" class="nav-menu">
<li id="menu-item-1381" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1381"><a href="http://simonvermeulen.com/about/">About</a></li>
<li id="menu-item-1382" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1382"><a href="http://simonvermeulen.com/contact-press/">Contact / Press</a></li>
</ul>
</div>
</nav>
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
</div>
<!-- .site-info -->
<div class="copyright">© 2017 Simon Vermeulen. All Rights Reserved.</div>
</footer>
<!-- #colophon -->
</header>
<!-- #masthead -->
<div id="header-helper"></div>
<div id="main" class="site-main">
<div id="main-content" class="main-content">
<article id="post-1267" class="post-1267 page type-page status-publish hentry">
<div class="entry-content">
<h5>News</h5>
<h6>June 8 – July 14, 2017<br> <em>Transformation</em><br><span>Le Livart, Montreal (group show)</span>>Opening: June 8, 2017</h6>
<p>With Marie-Josée Bergeron, Zoé Boivin, Robert Chayer, Guillaume Cloutier, Jacynthe Cloutier, Emily Comeau, Pablo-Martín Córdoba, Alex Côté, Marc Dupuis, Antony Gasnier, Annie-Claude Généreux, Makwanda et Julia Hall, Symon Henry, Thierry
Huard, Sylvie Plante, Laurence Rivest, Michaëlle Sergile, Véronique Tremblay and Éric Villeneuve.</p>
<p>For the first time in a gallery, Simon Vermeulen presents <a href="http://simonvermeulen.com/der-untermensch/"><em>Der Untermensch</em></a>, a short dance film portraying a persecuted homosexual during the Third Reich taking refuge in his
imagination to find freedom from within. The <a href="http://simonvermeulen.com/glass-shoes/">glass shoes</a> featured in the film will also be exposed.</p>
<p>For further information see: <a href="http://lelivart.com">www.lelivart.com</a></p>
<p>
<a href="http://simonvermeulen.com/der-untermensch/"><img class="aligncenter wp-image-1480 size-large" src="http://simonvermeulen.com/wp-content/uploads/2017/03/00092948-1-1024x540.jpg" alt="" width="1024" height="540" src="http://simonvermeulen.com/wp-content/uploads/2017/03/00092948-1-1024x540.jpg"></a>
</p>
</div>
</article>
<ul class="gallery gallery-animated">
<!--
-->
</ul>
<!--
-->
</div>
</div>
<!-- #main -->
</div>
<!-- #page -->
</div>
<!-- #wrapper -->
<span id="infinite-loader">
<span></span>
<span></span>
<span></span>
</span>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/admin-bar.min.js?ver=4.7.5'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/jquery/ui/effect-slide.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/jquery/ui/effect-highlight.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/jquery/ui/effect-fold.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-content/plugins/show-hidecollapse-expand/assets/js/bg-show-hide.js?ver=4.7.5'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-content/themes/expositio/js/functions.js?ver=20140321'></script>
<script type='text/javascript' src='http://simonvermeulen.com/wp-includes/js/wp-embed.min.js?ver=4.7.5'></script>
<!--[if lte IE 8]>
<script type="text/javascript">
document.body.className = document.body.className.replace( /(^|\s)(no-)?customize-support(?=\s|$)/, '' ) + ' no-customize-support';
</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript">
(function() {
var request, b = document.body,
c = 'className',
cs = 'customize-support',
rcs = new RegExp('(^|\\s+)(no-)?' + cs + '(\\s+|$)');
request = true;
b[c] = b[c].replace(rcs, ' ');
// The customizer requires postMessage and CORS (if the site is cross domain)
b[c] += (window.postMessage && request ? ' ' : ' no-') + cs;
}());
</script>
<!--<![endif]-->
<!---wordpress crap <div id="wpadminbar" class="nojq nojs">
<a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Toolbar" tabindex="0">
<ul id="wp-admin-bar-root-default" class="ab-top-menu">
<li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://simonvermeulen.com/wp-admin/about.php"><span class="ab-icon"></span><span class="screen-reader-text">About WordPress</span></a>
<div class="ab-sub-wrapper">
<ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
<li id="wp-admin-bar-about"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/about.php">About WordPress</a> </li>
</ul>
<ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
<li id="wp-admin-bar-wporg"><a class="ab-item" href="https://wordpress.org/">WordPress.org</a> </li>
<li id="wp-admin-bar-documentation"><a class="ab-item" href="https://codex.wordpress.org/">Documentation</a> </li>
<li id="wp-admin-bar-support-forums"><a class="ab-item" href="https://wordpress.org/support/">Support Forums</a> </li>
<li id="wp-admin-bar-feedback"><a class="ab-item" href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a> </li>
</ul>
</div>
</li>
<li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://simonvermeulen.com/wp-admin/">SIMON VERMEULEN</a>
<div class="ab-sub-wrapper">
<ul id="wp-admin-bar-site-name-default" class="ab-submenu">
<li id="wp-admin-bar-dashboard"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/">Dashboard</a> </li>
</ul>
<ul id="wp-admin-bar-appearance" class="ab-submenu">
<li id="wp-admin-bar-themes"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/themes.php">Themes</a> </li>
<li id="wp-admin-bar-menus"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/nav-menus.php">Menus</a> </li>
</ul>
</div>
</li>
<li id="wp-admin-bar-customize" class="hide-if-no-customize"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/customize.php?url=http%3A%2F%2Fsimonvermeulen.com%2F">Customize</a> </li>
<li id="wp-admin-bar-updates"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/update-core.php" title="2 Plugin Updates"><span class="ab-icon"></span><span class="ab-label">2</span><span class="screen-reader-text">2 Plugin Updates</span></a> </li>
<li id="wp-admin-bar-comments"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/edit-comments.php"><span class="ab-icon"></span><span class="ab-label awaiting-mod pending-count count-0" aria-hidden="true">0</span><span class="screen-reader-text">0 comments awaiting moderation</span></a> </li>
<li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://simonvermeulen.com/wp-admin/post-new.php"><span class="ab-icon"></span><span class="ab-label">New</span></a>
<div class="ab-sub-wrapper">
<ul id="wp-admin-bar-new-content-default" class="ab-submenu">
<li id="wp-admin-bar-new-post"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/post-new.php">Post</a> </li>
<li id="wp-admin-bar-new-media"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/media-new.php">Media</a> </li>
<li id="wp-admin-bar-new-page"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/post-new.php?post_type=page">Page</a> </li>
<li id="wp-admin-bar-new-user"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/user-new.php">User</a> </li>
</ul>
</div>
</li>
<li id="wp-admin-bar-edit"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/post.php?post=1267&action=edit">Edit Page</a> </li>
</ul>
<ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
<li id="wp-admin-bar-search" class="admin-bar-search">
<div class="ab-item ab-empty-item" tabindex="-1">
<form action="http://simonvermeulen.com/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" /><label for="adminbar-search" class="screen-reader-text">Search</label><input type="submit" class="adminbar-button" value="Search" /></form>
</div>
</li>
<li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" aria-haspopup="true" href="http://simonvermeulen.com/wp-admin/profile.php">Howdy, admin<img alt='' src='http://2.gravatar.com/avatar/2f1fc2ebbbe6ae67e11671b5765ee1c9?s=26&d=blank&r=g' srcset='http://2.gravatar.com/avatar/2f1fc2ebbbe6ae67e11671b5765ee1c9?s=52&d=blank&r=g 2x' class='avatar avatar-26 photo' height='26' width='26' /></a>
<div
class="ab-sub-wrapper">
<ul id="wp-admin-bar-user-actions" class="ab-submenu">
<li id="wp-admin-bar-user-info">
<a class="ab-item" tabindex="-1" href="http://simonvermeulen.com/wp-admin/profile.php"><img alt='' src='http://2.gravatar.com/avatar/2f1fc2ebbbe6ae67e11671b5765ee1c9?s=64&d=blank&r=g' srcset='http://2.gravatar.com/avatar/2f1fc2ebbbe6ae67e11671b5765ee1c9?s=128&d=blank&r=g 2x' class='avatar avatar-64 photo'
height='64' width='64' /><span class='display-name'>admin</span></a>
</li>
<li id="wp-admin-bar-edit-profile"><a class="ab-item" href="http://simonvermeulen.com/wp-admin/profile.php">Edit My Profile</a> </li>
<li id="wp-admin-bar-logout"><a class="ab-item" href="http://simonvermeulen.com/wp-login.php?action=logout&_wpnonce=2fed4da8ed">Log Out</a> </li>
</ul>
</div>
</li>
</ul>
</div>
<a class="screen-reader-shortcut" href="http://simonvermeulen.com/wp-login.php?action=logout&_wpnonce=2fed4da8ed">Log Out</a>
</div>--->
</body>
</html>