zoukankan      html  css  js  c++  java
  • 左右页面布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>

    <style type="text/css">
     
      #main{
          min-850px;
          overflow: hidden;
          padding: 20px 0 0 10px;
          text-align: left;
      }
       
      #mainContent
      {
        min-height: 200px;
        padding: 0px 0px 10px 0;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        float: right;
        margin-left: -20em;
        margin-right: 20px;
        display: inline;
         100%;
        
      }
      #mainContent .forFlow
      {
        margin-left: 20em;
        float: none;
         auto;
      }
      #topics
      {
        min-height: 200px;
        margin-bottom: 15px;
        padding: 15px;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        background: #fff;
        border-radius: 7px;
        box-shadow: 1px 1px 2px #A7A8AD;
        border:1px solid #CCCCCC;
      }
     
     
      #sideBar
      {
         230px;
        min-height: 200px;
        padding: 0px 0 0px 5px;
        float: left;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        border:1px solid #CCCCCC;
      }
     .newsItem, #blog-calendar {
        margin-bottom: 15px;
        text-indent: 0;
        padding: 10px;
        background: #FAFCFD;
        border-radius: 7px;
        box-shadow: 1px 1px 2px #A7A8AD;
        line-height: 1.5;
     }
     #blog-news {
       overflow: hidden;
     }
       
    </style>

    </head>

    <body>

    <div id="main">
      <!--begin: mainContent -->
      <div id="mainContent">
          <div class="forFlow">
               <div id="topics">
                     <div class="post">
                          <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p>
                   </div>
               </div>
           </div>
      </div>
     <!--end: mainContent-->
     
      <!--begin: sideBar 侧边栏容器 -->
      <div id="sideBar">
          <div id="sideBarMain">
             <div class="newsItem">
                1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>
             </div>
          </div>
       </div>
      <!--end: sideBar 侧边栏容器 -->
      <div class="clear"></div>
       
    </div>

    </body>
    </html>

  • 相关阅读:
    学习ASP.NET MVC(四)——我的第一个ASP.NET MVC 实体对象
    学习ASP.NET MVC(三)——我的第一个ASP.NET MVC 视图
    学习ASP.NET MVC(二)——我的第一个ASP.NET MVC 控制器
    学习ASP.NET MVC(一)——我的第一个ASP.NET MVC应用程序
    水晶报表实现套打
    DataGridView的Cell事件的先后触发顺序
    对于System.Net.Http的学习(三)——使用 HttpClient 检索与获取过程数据
    对于System.Net.Http的学习(二)——使用 HttpClient 进行连接
    对于System.Net.Http的学习(一)——System.Net.Http 简介
    SQL SERVER 2005/2008 中关于架构的理解(二)
  • 原文地址:https://www.cnblogs.com/Bryran/p/3957655.html
Copyright © 2011-2022 走看看