各种经典布局--“T”型布局

最新推荐文章于 2022-08-01 16:04:35 发布

weixin_34217711

最新推荐文章于 2022-08-01 16:04:35 发布

阅读量7.4k

点赞数 1

文章标签： python

原文链接：https://my.oschina.net/AnymoreCoder/blog/748123

版权

2019独角兽企业重金招聘Python工程师标准>>>

html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>T型布局</title>
    <link rel="stylesheet" href="layout-2.css">
</head>
<body>
   <div id="wrap">
       <div id="header"></div>
       <div id="main-content">
           <div id="left-sidebar">
               <ul class="nav nav-list">
                   <li class="active">
                       <a href="#"><span class="menu-text">侧边栏1</span></a>
                       <b class="arrow"></b>
                   </li>
                   <li class="active">
                       <a href="#"><span class="menu-text">侧边栏2</span></a>
                       <b class="arrow"></b>
                   </li>
                   <li class="active">
                       <a href="#"><span class="menu-text">侧边栏3</span></a>
                       <b class="arrow"></b>
                   </li>
                   <li class="active">
                       <a href="#"><span class="menu-text">侧边栏4</span></a>
                       <b class="arrow"></b>
                   </li>
               </ul>
           </div>
           <div id="content-area"></div>
       </div>
   </div>
</body>
</html>

css:

body{
    margin: 0;
    padding: 0;
}
#wrap{
    margin: 0 auto;
    width: 80%;
    height: auto;
}
ul{
    list-style-type: none;
}
a{
    text-decoration: none;
}
#header{
    width: 100%;
    height: 10em;
}
#main-content{
    width: auto;
    height: auto;
}
#left-sidebar{
    display: inline;
    float: left;
    width: 30%;
    height: 45em;
}
#content-area{
    display: inline;
    float:left;
    width: 70%;
    height: 45em;
}

转载于:https://my.oschina.net/AnymoreCoder/blog/748123