zoukankan      html  css  js  c++  java
  • 网站的基本布局

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    /*整体容器设置*/
    .allbody {
    position:relative;
    margin:auto;
    top:0px;
    100%;
    height: 1500px;
    z-index: 1;
    background-color:#6FF;
    }
    /*头部*/
    #bgtop
    {
    position: relative;
    100%;
    height: 150px;
    z-index: 2;
    background-color:#C63;
    }
    #top
    {
    position: relative;
    margin:auto;
    980px;
    height: 150px;
    z-index: 2;
    background-color:#f0f;
    }
    #logo
    {
    position:absolute;
    top:0px;
    left:0px;
    150px;
    height:120px;
    background-color:#939;

    }
    /*导航菜单*/
    #bgnav {
    position: absolute;
    top:120px;
    left:0px;
    100%;
    height: 30px;
    z-index: 2;
    background-color:#00F;
    }
    #nav {
    position: relative;
    margin:auto;
    980px;
    height: 30px;
    z-index: 2;
    background-color:#fff;
    }
    .xiala {
    position: absolute;
    left: 0px;
    top: 30px;
    97px;
    height: 199px;
    z-index: 2;
    background-color:#00F;
    }
    .yincang {
    position: relative;
    float:left;
    120px;
    height: 30px;
    z-index: 2;
    background-color:#FF0;
    overflow:hidden;
    }

    .xianshi {
    position: relative;
    float:left;
    120px;
    height: 30px;
    z-index: 2;
    background-color:#FF0;
    overflow:visible;
    }

    /*开始banner动画制作*/
    #banner
    {
    position: relative;
    100%;
    height: 400px;
    z-index: 1;
    background-color:#F0F;
    }

    /*列表div*/
    #liebiaodiv
    {
    position: relative;
    margin:auto;
    980px;
    height: 350px;
    z-index: 1;
    background-color:#FF6;
    }

    #hong
    {
    position: relative;
    float:left;
    320px;
    height: 350px;
    z-index: 1;
    background-color:#f03;
    }
    #lvse
    {
    position: relative;
    float:left;
    left:5px;
    320px;
    height: 350px;
    z-index: 1;
    background-color:#0f3;
    }
    #lanse
    {
    position: relative;
    float:left;
    left:10px;
    330px;
    height: 350px;
    z-index: 1;
    background-color:#03f;
    }


    /*列表板块二div*/
    .bankuairongqi
    {
    position: relative;
    margin:auto;
    980px;
    height: 350px;
    z-index: 1;
    background-color:#FF6;
    }

    .bankuairongqi .hong
    {
    position: relative;
    float:left;
    320px;
    height: 350px;
    z-index: 1;
    background-color:#f55;
    }
    .bankuairongqi .lvse
    {
    position: relative;
    float:left;
    left:5px;
    320px;
    height: 350px;
    z-index: 1;
    background-color:#5f5;
    }
    .bankuairongqi .lanse
    {
    position: relative;
    float:left;
    left:10px;
    330px;
    height: 350px;
    z-index: 1;
    background-color:#55f;
    }
    </style>
    </head>

    <body>

    <div class="allbody">
    <!--top开始-->
    <div id="bgtop">
    <div id="top">
    <!--logo布局-->
    <div id="logo">
    此处放logo

    </div>
    <!--logo布局结束-->
    </div>
    </div><!--top结束-->

    <!-- 导航菜单开始 -->
    <div id="bgnav"><!--导航菜单背景通屏设置-->
    <div id="nav">
    <div class="yincang" onmouseover="this.className='xianshi'" onmouseout="this.className='yincang'">
    首页
    <div class="xiala">
    首页一<br />
    首页二<br />
    </div>
    </div>
    <div class="yincang" onmouseover="this.className='xianshi'" onmouseout="this.className='yincang'">
    简介
    <div class="xiala">
    简介一<br />
    简介二<br />
    </div>
    </div>

    <div class="yincang" onmouseover="this.className='xianshi'" onmouseout="this.className='yincang'">
    新闻
    <div class="xiala">
    新闻一<br />
    新闻二<br />
    </div>
    </div>
    <div class="yincang" onmouseover="this.className='xianshi'" onmouseout="this.className='yincang'">
    招商
    <div class="xiala">
    招商一<br />
    招商二<br />
    </div>
    </div>
    <div class="yincang" onmouseover="this.className='xianshi'" onmouseout="this.className='yincang'">
    首页
    <div class="xiala">
    首页一<br />
    首页二<br />
    </div>
    </div>
    </div><!--导航菜单结束-->
    </div><!--导航背景结束标记-->

    <!--banner动画开始-->
    <div id="banner">
    此处放动画内容


    </div><!--banner动画结束-->

    <!--公司简介产品等布局-->
    <div id="liebiaodiv">

    <div id="hong"></div>
    <div id="lvse"></div>
    <div id="lanse"></div>

    </div>

    <!--板块容器-->
    <div class="bankuairongqi">

    <div class="hong"></div>
    <div class="lvse"></div>
    <div class="lanse"></div>

    </div>

    <!--底部布局-->



    </div><!--allbody结束-->

    </body>
    </html>

  • 相关阅读:
    Python3 文件
    Python 字典
    Python OS
    Python函数zip-map
    Python 3.5 filter
    python3.5.2库getpass
    JavaScript学习四
    cocos creator学习
    JavaScript学习三
    JavaScript学习3
  • 原文地址:https://www.cnblogs.com/duan594939295/p/4936311.html
Copyright © 2011-2022 走看看