0

アダプティブデザインで画像の特定の場所にボタンを付けるにはどうすればよいですか? 特定の場所に「サインイン」ボタンを付けるにはどうすればよいですか? ウィンドウのサイズを変更する場合 ボタンの位置を変更する

<head>
    <link href="style/bootstrap.css" rel="stylesheet">
    <link href="style/style.css" rel="stylesheet">
</head>

<body>
    <div class="first-block">
        <div style="width:100%;">
            <div class="navbar  navbar-static-top">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data- toggle="collapse" data-target="#responsive-menu">
                         <span class="sr-only">Меню</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                </button>
                    </div>
                    <div class="collapse navbar-collapse" id="responsive- menu">
                        <div class="nav navbar-nav">
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                        </div>
                    </div>
                </div>
            </div>
            <div class="button-parent">
                <button class="button registration1 col-xs-2    col-sm-2    col-md-2 col-lg-2">
        <a href="" style="font: 18px white;">Зарегистрироваться</a>
    </button>
            </div>

        </div>
    </div>
    <div class="second-block">
        <div style="width:100%">
            <div class="button-parent">
                <button class="button registration2 col-xs-2    col-sm-2    col-md-2 col-lg-2">
        <a href="" >Sign IN</a>
        </button>
            </div>
            <img src="https://s32.postimg.org/nwl1muvv9/2_3.jpg" class="img-responsive">
        </div>
    </div>

    <div class="third-block">
        <img src="https://s32.postimg.org/lnyflujyd/image.jpg" class="img-responsive">
    </div>
</body>

html, body {
    width: 100%;
    height: 100%;
}
.first-block {
    background: url(https://s32.postimg.org/heab1dm7p/image.jpg) center no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;


}

.button{
  height: 5%;
     border-radius: 20px; 
       background-color:#19A4EC;
  position: absolute;  
}
.registration1{

    left:42%;
    top: 70%;

}
 .button-parent{
  margin: 0 auto;
} 

 .registration2{
    height: 7%;
    left:25%;
    top: 303%;

}

JSFiddle

4

1 に答える 1

1

hrefボタンをリンクしたいページへのリンクを含む属性を入力してみることができます:

<button class="button registration2 col-xs-2    col-sm-2    col-md-2 col-lg-2">
    <a href="https://www.youtube.com/">Sign IN</a>
</button>
于 2016-07-01T11:03:27.523 に答える