简体   繁体   中英

ASP.Net Adapting layout, Adapt Image and buttons to resolution ( Responsive layout )

i'm kinda new to HTML and CSS, i know about it but i'm not really good at designing at all, and i'm sure what i want is possible but i'm not getting the good results/searches when i'm searching for what i want so i tough you guys could help me out. ( I think it is called Responsive Layout? Correct me if i'm wrong)

I got this page right now : 在此处输入图片说明

which i think looks pretty good, but i'd like to know how to make it stay like this no matter what the resolution becomes, so if i crop the browser window, i want the logo to be on top of the two buttons kind of centered.

My code for this is just :

<img src='../../iScrape.png' style="margin-top:25%;margin-left:35%;" />
            <br />
            <input id="Button1" type="button" value="LEARN MORE"style="
        margin-top:2%;
        margin-left:34%;
        padding-left:2%;
        padding-right:2%;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color:transparent;
        border-color:white;
        font-family:Verdana;
        color:white;
        " onclick="location.href='@Url.Action("About", "Home")'" />
            <input id="Button2" type="button" value="TESTING1 TWO" style="
        margin-left:2%;
        padding-left:2%;
        padding-right:2%;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color:#ED5B53;
        border-color:transparent;
        font-family:Verdana;
        color:white;
        " onclick="location.href='@Url.Action("Testing1two", "Home")'" />

( which is all in the body of the basic template of an ASP.Net project.

I'd like to know if there is an easy way to do what i want, i'm sure there is because cropping and getting :

在此处输入图片说明

isn't very nice

Use Package Manager to install Bootstrap into VS. Then just add a custom CSS class.

You could then add the buttons thus:

<div class="container">
    <div class="row">
        <div class="center-block">
            <!-- add buttons here -->
        </div>
    </div>
</div>

You can add the background image to a body class in your custom CSS.

Documentation: http://getbootstrap.com/css/#helper-classes-center

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM