Html 需要帮助在WordPress中实现响应性六边形网格吗

Html 需要帮助在WordPress中实现响应性六边形网格吗,html,wordpress,css,responsive-design,css-shapes,Html,Wordpress,Css,Responsive Design,Css Shapes,我试图在本地wordpress环境中实现这个响应性的Hexagon网格()。下面是它的样子: 我已经删除了除style.css之外的所有其他样式表的“link”标记;将所有必需的代码放在codepen()上,但它仍然显示相同的内容。我认为没有其他CSS干扰网格。代码如下: HTML代码: <ul id="hexGrid"> <li class="hex"> <article class="hexIn" id="post-1241">

我试图在本地wordpress环境中实现这个响应性的Hexagon网格()。下面是它的样子:

我已经删除了除style.css之外的所有其他样式表的“link”标记;将所有必需的代码放在codepen()上,但它仍然显示相同的内容。我认为没有其他CSS干扰网格。代码如下: HTML代码:

<ul id="hexGrid">

<li class="hex">
    <article class="hexIn" id="post-1241">
        <div class="hexLink">

            <header class="entry-header">
                <h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2012/01/07/template-sticky/" rel="bookmark">Template: Sticky</a></h2>           </header><!-- .entry-header -->

            <div class="entry-content">
                <p>This is a sticky post. There are a few things to verify: The sticky post […]</p>
            </div><!-- .entry-content -->
        </div>
    </article><!-- #post-1241 -->
</li><!--- hex -->
<li class="hex">
    <article class="hexIn" id="post-1178">
        <div class="hexLink">

        <a class="post-thumbnail" href="http://127.0.0.1/wordpress/2013/01/11/markup-html-tags-and-formatting/" aria-hidden="true" tabindex="-1">
            <img width="1600" height="1066" src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Markup: HTML Tags and Formatting" srcset="http://127.0.0.1/wordpress/wp-content/uploads/2011/07/dcp_2082.jpg 1600w, http://127.0.0.1/wordpress/wp-content/uploads/2011/07/dcp_2082-300x200.jpg 300w, http://127.0.0.1/wordpress/wp-content/uploads/2011/07/dcp_2082-768x512.jpg 768w, http://127.0.0.1/wordpress/wp-content/uploads/2011/07/dcp_2082-1024x682.jpg 1024w" sizes="(max-width: 1600px) 100vw, 1600px">        </a>


            <header class="entry-header">
                <h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2013/01/11/markup-html-tags-and-formatting/" rel="bookmark">Markup: HTML Tags and Formatting</a></h2>           </header><!-- .entry-header -->

            <div class="entry-content">
                <p>Headings Header one Header two Header three Header four Header five Header six Blockquotes Single […]</p>
            </div><!-- .entry-content -->
        </div>
    </article><!-- #post-1178 -->
</li><!--- hex -->
<li class="hex">
    <article class="hexIn" id="post-1177">
        <div class="hexLink">

        <a class="post-thumbnail" href="http://127.0.0.1/wordpress/2013/01/10/markup-image-alignment/" aria-hidden="true" tabindex="-1">
            <img width="1920" height="1200" src="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/soworthloving-wallpaper.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Markup: Image Alignment" srcset="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/soworthloving-wallpaper.jpg 1920w, http://127.0.0.1/wordpress/wp-content/uploads/2013/03/soworthloving-wallpaper-300x188.jpg 300w, http://127.0.0.1/wordpress/wp-content/uploads/2013/03/soworthloving-wallpaper-768x480.jpg 768w, http://127.0.0.1/wordpress/wp-content/uploads/2013/03/soworthloving-wallpaper-1024x640.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px">     </a>


            <header class="entry-header">
                <h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2013/01/10/markup-image-alignment/" rel="bookmark">Markup: Image Alignment</a></h2>         </header><!-- .entry-header -->

            <div class="entry-content">
                <p>Welcome to image alignment! The best way to demonstrate the ebb and flow of the […]</p>
            </div><!-- .entry-content -->
        </div>
    </article><!-- #post-1177 -->
</li><!--- hex -->
<li class="hex">
    <article class="hexIn" id="post-1176">
        <div class="hexLink">

        <a class="post-thumbnail" href="http://127.0.0.1/wordpress/2013/01/09/markup-text-alignment/" aria-hidden="true" tabindex="-1">
            <img width="165" height="210" src="http://127.0.0.1/wordpress/wp-content/uploads/2014/01/spectacles.gif" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Markup: Text Alignment">      </a>


            <header class="entry-header">
                <h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2013/01/09/markup-text-alignment/" rel="bookmark">Markup: Text Alignment</a></h2>           </header><!-- .entry-header -->

            <div class="entry-content">
                <p>Default This is a paragraph. It should not have any alignment of any kind. It […]</p>
            </div><!-- .entry-content -->
        </div>
    </article><!-- #post-1176 -->
</li><!--- hex -->
<li class="hex">
    <article class="hexIn" id="post-1174">
        <div class="hexLink">

            <header class="entry-header">
                <h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2013/01/05/title-with-special-characters/" rel="bookmark">Markup: Title With Special Characters ~`!@#$%^&amp;*()-_=+{}[]/\;:'”?,.&gt;</a></h2>          </header><!-- .entry-header -->

            <div class="entry-content">
                <p>Putting special characters in the title should have no adverse effect on the layout or […]</p>
            </div><!-- .entry-content -->
        </div>
    </article><!-- #post-1174 -->
</li><!--- hex -->
<li class="hex">
    <article class="hexIn" id="post-1802">
        <div class="hexLink">

        <a class="post-thumbnail" href="http://127.0.0.1/wordpress/2013/01/05/title-with-special-characters-3/" aria-hidden="true" tabindex="-1">
            <img width="1131" height="707" src="http://127.0.0.1/wordpress/wp-content/uploads/2013/04/triforce-wallpaper.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Markup: Title With Special Characters ~`!@#$%^&amp;*()-_=+{}[]/\;:'”?,.>" srcset="http://127.0.0.1/wordpress/wp-content/uploads/2013/04/triforce-wallpaper.jpg 1131w, http://127.0.0.1/wordpress/wp-content/uploads/2013/04/triforce-wallpaper-300x188.jpg 300w, http://127.0.0.1/wordpress/wp-content/uploads/2013/04/triforce-wallpaper-768x480.jpg 768w, http://127.0.0.1/wordpress/wp-content/uploads/2013/04/triforce-wallpaper-1024x640.jpg 1024w" sizes="(max-width: 1131px) 100vw, 1131px">      </a>


            <header class="entry-header">
                <h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2013/01/05/title-with-special-characters-3/" rel="bookmark">Markup: Title With Special Characters ~`!@#$%^&amp;*()-_=+{}[]/\;:'”?,.&gt;</a></h2>            </header><!-- .entry-header -->

            <div class="entry-content">
                <p>Putting special characters in the title should have no adverse effect on the layout or […]</p>
            </div><!-- .entry-content -->
        </div>
    </article><!-- #post-1802 -->
</li><!--- hex -->
<li class="hex">
    <article class="hexIn" id="post-1741">
        <div class="hexLink">

        <a class="post-thumbnail" href="http://127.0.0.1/wordpress/2013/01/05/title-with-special-characters-2/" aria-hidden="true" tabindex="-1">
            <img width="300" height="580" src="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-vertical.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Markup: Title With Special Characters ~`!@#$%^&amp;*()-_=+{}[]/\;:'”?,.>" srcset="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-vertical.jpg 300w, http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-vertical-155x300.jpg 155w" sizes="(max-width: 300px) 100vw, 300px">       </a>


            <header class="entry-header">
                <h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2013/01/05/title-with-special-characters-2/" rel="bookmark">Markup: Title With Special Characters ~`!@#$%^&amp;*()-_=+{}[]/\;:'”?,.&gt;</a></h2>            </header><!-- .entry-header -->

            <div class="entry-content">
                <p>Putting special characters in the title should have no adverse effect on the layout or […]</p>
            </div><!-- .entry-content -->
        </div>
    </article><!-- #post-1741 -->
</li><!--- hex -->
<li class="hex">
    <article class="hexIn" id="post-1173">
        <div class="hexLink">

        <a class="post-thumbnail" href="http://127.0.0.1/wordpress/2013/01/05/markup-title-with-markup/" aria-hidden="true" tabindex="-1">
            <img width="580" height="300" src="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-horizontal.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Markup: Title With Markup" srcset="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-horizontal.jpg 580w, http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-horizontal-300x155.jpg 300w" sizes="(max-width: 580px) 100vw, 580px">        </a>


            <header class="entry-header">
                <h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2013/01/05/markup-title-with-markup/" rel="bookmark">Markup: Title <em>With</em> <b>Markup</b></a></h2>         </header><!-- .entry-header -->

            <div class="entry-content">
                <p>Verify that: The post title renders the word “with” in italics and the word “markup” […]</p>
            </div><!-- .entry-content -->
        </div>
    </article><!-- #post-1173 -->
</li><!--- hex -->
<li class="hex">
    <article class="hexIn" id="post-1016">
        <div class="hexLink">

        <a class="post-thumbnail" href="http://127.0.0.1/wordpress/2012/03/15/template-featured-image-vertical/" aria-hidden="true" tabindex="-1">
            <img width="300" height="580" src="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-vertical.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Template: Featured Image (Vertical)" srcset="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-vertical.jpg 300w, http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-vertical-155x300.jpg 155w" sizes="(max-width: 300px) 100vw, 300px">        </a>


            <header class="entry-header">
                <h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2012/03/15/template-featured-image-vertical/" rel="bookmark">Template: Featured Image (Vertical)</a></h2>           </header><!-- .entry-header -->

            <div class="entry-content">
                <p>This post should display a featured image, if the theme supports it. Non-square images can […]</p>
            </div><!-- .entry-content -->
        </div>
    </article><!-- #post-1016 -->
</li><!--- hex -->
<li class="hex">
    <article class="hexIn" id="post-1011">
        <div class="hexLink">

        <a class="post-thumbnail" href="http://127.0.0.1/wordpress/2012/03/15/template-featured-image-horizontal/" aria-hidden="true" tabindex="-1">
            <img width="580" height="300" src="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-horizontal.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Template: Featured Image (Horizontal)" srcset="http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-horizontal.jpg 580w, http://127.0.0.1/wordpress/wp-content/uploads/2013/03/featured-image-horizontal-300x155.jpg 300w" sizes="(max-width: 580px) 100vw, 580px">        </a>


            <header class="entry-header">
                <h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2012/03/15/template-featured-image-horizontal/" rel="bookmark">Template: Featured Image (Horizontal)</a></h2>           </header><!-- .entry-header -->

            <div class="entry-content">
                <p>This post should display a featured image, if the theme supports it. Non-square images can […]</p>
            </div><!-- .entry-content -->
        </div>
    </article><!-- #post-1011 -->
</li><!--- hex -->
<li class="hex">
    <article class="hexIn" id="post-996">
        <div class="hexLink">

            <header class="entry-header">
                <h2 class="entry-title"><a href="http://127.0.0.1/wordpress/2012/03/15/template-more-tag/" rel="bookmark">Template: More Tag</a></h2>           </header><!-- .entry-header -->

            <div class="entry-content">
                <p>This content is before the more tag. Right after this sentence should be a “continue […]</p>
            </div><!-- .entry-content -->
        </div>
    </article><!-- #post-996 -->
</li><!--- hex -->          </ul>
  • 这是一个粘帖。有几件事需要验证:粘帖[…]

  • 标题标题一标题二标题三标题四标题五标题六块引号单[…]

  • 欢迎来到图像对齐!演示[…]涨落的最佳方式

  • 默认情况下,这是一个段落。它不应该有任何形式的对齐。它[……]

  • 在标题中添加特殊字符不应对版面或[…]产生不利影响

  • 在标题中添加特殊字符不应对版面或[…]产生不利影响

  • 在标题中添加特殊字符不应对版面或[…]产生不利影响

  • 验证:文章标题以斜体显示单词“with”,并显示单词“markup”[…]

  • 如果主题支持,这篇文章应该显示一个特色图片。非方形图像可以[…]

  • 如果主题支持,这篇文章应该显示一个特色图片。非方形图像可以[…]

  • 此内容位于“更多”标记之前。这句话后面应该是“continue[…]

CSS代码:

* {
  margin: 0;
  padding: 0;
}

#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility:hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hex::after{
  content:'';
  display:block;
  padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */
}
.hexIn{
  position: absolute;
  width:96%;
  padding-bottom: 110.851%; /* =  width / sin(60) */
  margin:0 2%;
  overflow: hidden;
  visibility: hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
      -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
          transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
.hexIn * {
  position: absolute;
  visibility: visible;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
        -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
            transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}

/*** HEX CONTENT **********************************************************************/
.hex img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  -webkit-transform: rotate3d(0,0,0,0deg);
      -ms-transform: rotate3d(0,0,0,0deg);
          transform: rotate3d(0,0,0,0deg);
}

.hex h2, .hex p {
  width: 100%;
  padding: 5%;
  box-sizing:border-box;
  background-color: rgba(0, 128, 128, 0.8);
  font-weight: 300;
  -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
          transition:          transform .2s ease-out, opacity .3s ease-out;
}
.hex h2 {
  bottom: 50%;
  padding-top:50%;
  font-size: 1.5em;
  z-index: 1;
  -webkit-transform:translate3d(0,-100%,0);
      -ms-transform:translate3d(0,-100%,0);
          transform:translate3d(0,-100%,0);
}
.hex h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 10%;
  text-align: center;
  border-bottom: 1px solid #fff;
}
.hex p {
  top: 50%;
  padding-bottom:50%;
  -webkit-transform:translate3d(0,100%,0);
      -ms-transform:translate3d(0,100%,0);
          transform:translate3d(0,100%,0);
}


/*** HOVER EFFECT  **********************************************************************/
.hexLink:hover h2, .hexLink:focus h2,
.hexLink:hover p, .hexLink:focus p{
  -webkit-transform:translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
          transform:translate3d(0,0,0);
}

/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width:1201px) { /* <- 5-4  hexagons per row */
  #hexGrid{
    padding-bottom: 4.4%
  }
  .hex {
    width: 20%; /* = 100 / 5 */
  }
  .hex:nth-child(9n+6){ /* first hexagon of even rows */
    margin-left:10%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 1200px) and (min-width:901px) { /* <- 4-3  hexagons per row */
  #hexGrid{
    padding-bottom: 5.5%
  }
  .hex {
    width: 25%; /* = 100 / 4 */
  }
  .hex:nth-child(7n+5){ /* first hexagon of even rows */
    margin-left:12.5%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 900px) and (min-width:601px) { /* <- 3-2  hexagons per row */
  #hexGrid{
    padding-bottom: 7.4%
  }
  .hex {
    width: 33.333%; /* = 100 / 3 */
  }
  .hex:nth-child(5n+4){ /* first hexagon of even rows */
    margin-left:16.666%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 600px) { /* <- 2-1  hexagons per row */
  #hexGrid{
    padding-bottom: 11.2%
  }
  .hex {
    width: 50%; /* = 100 / 3 */
  }
  .hex:nth-child(3n+3){ /* first hexagon of even rows */
    margin-left:25%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 400px) {
    #hexGrid {
        font-size: 13px;
    }
}
*{
保证金:0;
填充:0;
}
#六边形网格{
显示器:flex;
柔性包装:包装;
宽度:90%;
保证金:0自动;
溢出:隐藏;
字体系列:“Raleway”,无衬线;
字体大小:15px;
列表样式类型:无;
}
海克斯先生{
位置:相对位置;
可见性:隐藏;
轮廓:1px实心透明;/*固定FF悬停过渡中的锯齿边*/
}
.hex::之后{
内容:'';
显示:块;
填充底:86.602%;/*=100/茶色(60)*1.5*/
}
贺信先生{
位置:绝对位置;
宽度:96%;
填充底部:110.851%;/*=宽度/sin(60)*/
利润率:0.2%;
溢出:隐藏;
可见性:隐藏;
轮廓:1px实心透明;/*固定FF悬停过渡中的锯齿边*/
-webkit变换:旋转3D(0,0,1,-60度)倾斜(30度);
-ms变换:旋转3D(0,0,1,-60度)倾斜(30度);
变换:旋转3d(0,0,1,-60度)倾斜(30度);
}
.hexIn*{
位置:绝对位置;
能见度:可见;
轮廓:1px实心透明;/*固定FF悬停过渡中的锯齿边*/
}
.hexLink{
显示:块;
宽度:100%;
身高:100%;
文本对齐:居中;
颜色:#fff;
溢出:隐藏;
-webkit变换:倾斜(-30度)旋转3D(0,0,1,60度);
-ms变换:倾斜(-30度)旋转3D(0,0,1,60度);
变换:倾斜(-30度)旋转3d(0,0,1,60度);
}
/***十六进制内容**********************************************************************/
.十六进制img{
左-100%;
右图:-100%;
宽度:自动;
身高:100%;
保证金:0自动;
-webkit变换:旋转3D(0,0,0,0度);
-ms变换:旋转3D(0,0,0,0度);
变换:旋转3d(0,0,0,0度);
}
.hex h2,.hex p{
宽度:100%;
填充:5%;
框大小:边框框;
背景色:rgba(0,128,128,0.8);
字体大小:300;
-webkit转换:-webkit转换。2缓减,不透明度。3缓减;
过渡:变换。2缓减,不透明度。3缓减;
}
.十六进制h2{
底部:50%;
垫面:50%;
字号:1.5em;
z指数:1;
-webkit转换:translate3d(0,-100%,0);
-ms变换:translate3d(0,-100%,0);
变换:translate3d(0,-100%,0);
}
.hex h2::之后{
内容:'';
位置:绝对位置;
底部:0;
左:45%;
宽度:10%;
文本对齐:居中;
边框底部:1px实心#fff;
}
.六角p{
最高:50%;
垫底:50%;
-webkit转换:translate3d(0100%,0);
-ms变换:translate3d(0100%,0);
转换:translate3d(0100%,0);
}
/***悬停效应**********************************************************************/
.hexLink:悬停h2,.hexLink:焦点h2,
.hexLink:悬停p,.hexLink:焦点p{
-webkit转换:translate3d(0,0,0);
-ms变换:translate3d(0,0,0);
变换:translate3d(0,0,0);
}
/***六边形尺寸和均匀行压痕*****************************************************************/

@媒体(最小宽度:1201px){/*您的问题到底是什么?什么没有按预期工作?由于图像不存在,它似乎按预期工作。好的,我现在已经添加了图像。实际上,我想让它像此演示一样工作:。