小编Mon*_*ffy的帖子

我有一个固定定位的flexslider网页.我使用以下代码来制作flexslider固定位置并添加滑块作为背景.

.flexslider {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    z-index: -1;
    border: none;
 }

并且网页具有粘性导航,当用户滚动到视口高度的一半的顶部高度时,该导航变得固定.我通过使用以下jQuery和CSS来做到这一点:

jQuery的:

   $(window).scroll(function() {
    var scrollTop = $(window).height()/2;
    if ($(window).scrollTop() >= scrollTop) {
        $('.main-header').removeClass('main-header ').addClass('fixed-header');

    }
    if ($(window).scrollTop() < scrollTop) {
        $('.fixed-header').removeClass('fixed-header').addClass('main-header ');
    }
}) 

CSS:

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
}

我的HTML标记是:

   <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/image1.jpg" />
            </li>
            <li>
                <img src="images/image2.jpg" />
            </li>
            <li>
                <img src="images/image3.jpg" />
            </li>
        </ul>
    </div>


   <header …

你好我试图将一个元素置于一个css圈内.我尝试了几种不同的方法,但没有让它发挥作用.

这是一个JsFiddle的例子

HTML

<div class="large-columns">
        <div class="circle-holder">
                <span class="circle"><h1>h tag</h1></span>
        </div>                  
</div>

CSS

.circle {
    display: block;
    width: 10em;
    height: 10em;
    background: red;
    position: relative;
    border-radius: 50%;
}    
    h1 {
      text-align: center;
      position: absolute;
      top: 50%;

}

我正在 AWS 中使用无服务器框架创建一个应用程序。我正在使用 NodeJS 编写 Lambda。在应用程序中我想创建两个不同的角色

1. 行政
2. 用户

在我的serverless.yaml文件中，我为这些用户类型创建了两个不同的 Cognito 用户池组

AdminUserPoolGroup:
      Type: AWS::Cognito::UserPoolGroup
      Properties:
        GroupName: "admins"
        Precedence: 0
        UserPoolId: 
          Ref: CognitoUserPool

NormalUserPoolGroup:
      Type: AWS::Cognito::UserPoolGroup
      Properties: 
        GroupName: users
        Precedence: 1
        UserPoolId:
          Ref: CognitoUserPool

我想向这两个组授予不同的访问级别，例如管理员可以创建帖子，用户只能查看它们。经过一些研究后，我发现这可以通过将策略附加到组来完成。但我找不到使用无服务器框架来做到这一点的方法。

我在我的固定版面中使用nicolas gallagher的micro-clearfix.在我的布局中,绿色的页脚不会出现.这意味着clearfix无法正常工作

<div class="container">
    <aside class="al">
    </aside>
    <section class="content">

    </section>
    <aside class="ar">
    </aside>
    <footer class="cf">
    </footer>
</div>

CSS

.container {
    width: 500px;
    height: 400px;
    margin: 0 auto;
}
.al {
    background: red;
    width: 100px;
    height: 100px;
    float: left;
}
.content {
    float: left;
    width: 300px;
    height: 100px;
    background: black;
}
.ar {
    background: red;
    width: 100px;
    height: 100px;
    float: left;
}
footer {
    background: blue;
    width: 100%;
    height: 100px;
    background: green;
}

和微清除

.cf:after, .cf:before {
    content: " ";
    display: …

我有以下代码

<div>
    <img src="http://placehold.it/350x150"/>
    <div class="link-cont"><a href="#">click here to see more info</a></div>

</div>


div {
    width: 350px;
    font-size:12px;
    position: relative;    
}
div img{
    padding:0 10px;    
}
.link-cont {
    background: red;
    position: absolute;
    bottom: 0;
    width: 370px;
    height: 210px; 
    opacity: 0;
    transition: all 0.4s;
    z-index: -1
}
div:hover  .link-cont {
    opacity: 1; 
    bottom:-40px;
}
.link-cont a{    
    opacity: 0;  
}
div:hover  .link-cont a{
    position: relative; 
    opacity: 1; 
    bottom:-175px;
    left:10px;
    background:#fff;
    color:red;
    text-decoration:none;
    padding:0 10px;
}

链接被包裹在div上，该div出现在悬停时。我如何使此触摸设备友好。

jsfidd-> http://jsfiddle.net/yeyene/Nnd7w/17/