티스토리 뷰

정보 보관 ver1.0

website layout 잡기

James Wetzel 2013. 3. 6. 17:17

css


body 

{

    width:1000px;

    margin:0 auto;

    font-family:doctum,arial;

    font-size:12px;

    background:#f0f0f0;    

}


/* -------------------------------------------------- header Css */


header 

{

    margin:0;

    padding:0;

    text-align:center;

    background:#fff;

    border:3px solid #DBDBDB;

    border-radius: 7px !important; 

    border-bottom-left-radius:7px !impotant;

    border-bottom-right-radius:7px !impotant;

}


/* -------------------------------------------------- nav Css */


nav

{

    margin:0;

    padding:0;

    text-align:center;

    background:#fff;

    border:3px solid #DBDBDB;

    border-radius: 7px !important; 

    border-bottom-left-radius:7px !impotant;

    border-bottom-right-radius:7px !impotant;

}


/* -------------------------------------------------- section Css */


section 

{

width:700px;

background:#fff;

border:3px solid #DBDBDB;

float:left;

border-radius: 7px;

}


/* -------------------------------------------------- article Css */


article

{

    padding-bottom:10px;

}


/* -------------------------------------------------- aside Css */


aside 

{

width:280px;

background:#fff;

border:3px solid #DBDBDB;

float:right;

border-radius: 7px;

}


/* -------------------------------------------------- footer Css */


footer

{

    clear:both;

    text-align:center;

    background:#fff;

    border:3px solid #DBDBDB;

    border-radius: 7px !important; 

    border-bottom-left-radius:7px !impotant;

    border-bottom-right-radius:7px !impotant;

}



code

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>


<!DOCTYPE html>


<html>

<head runat="server">

    <meta name="viewport" content="width=device-width" />

    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

    <link href="../../Content/layout.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <header>

        header

    </header>

    <nav>

        nav

    </nav>

    <section>

        <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>

    </section>

    <aside>

        aside

    </aside>    

    <footer>

        footer

    </footer>    

</body>

</html>



===========================================================================================
css

body 
{
    width: 1000px;
    margin:0 auto;
    font-family: verdana,helvetica,arial,sans-serif;
    font-size: 13px;    
    color: #333333;
}

/* -------------------------------------------------- header Css */

header 
{
    margin-top: 20px;
    
}

/* -------------------------------------------------- nav Css */

nav
{
    margin-top: 20px;
    padding-bottom:10px;
    border-bottom: solid 1px #ccc;    
}

/* -------------------------------------------------- content_wrapper Css */

.content_wrapper
{
    margin-top: 20px;
    display:inline-block;    
}

/* -------------------------------------------------- section Css */

section 
{   
width:770px;
float:right;
}

/* -------------------------------------------------- article Css */

article
{   
    white-space:pre-line;
}

/* -------------------------------------------------- aside Css */

aside 
{
width:200px;
margin-right: 20px;
background:#fff;
border:2px solid #DBDBDB;
float:left;
border-radius: 7px;
padding-top:10px;
padding-bottom:10px;
}

/* -------------------------------------------------- footer Css */

footer
{
       
    clear:both;    
    margin-top:20px;
    padding: 10px 0px 10px 0px;
    text-align:center;
    border-top: 1px solid #ccc;
}


code

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>


<!DOCTYPE html>


<html>

<head runat="server">

    <meta name="viewport" content="width=device-width" />

    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

    <link href="../../Content/layout.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <header>

        header

    </header>

    <nav>

        nav

    </nav>

    <div class="content_wrapper">

    <section>

        <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>

    </section>

    <aside>

        aside

    </aside>

    </div>    

    <footer>

        footer

    </footer>    

</body>

</html>




728x90
반응형
저작자표시 비영리 동일조건 (새창열림)