zoukankan      html  css  js  c++  java
  • 利用CSS简单布局的不同组合类型

    关于CSS布局页面的简单组合方式:

    <!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=utf-8" />
    <title>CSS格式与布局</title>
    
    <style type="text/css">
    
    *{ margin:0px auto; padding:0px; font-family:微软雅黑}/*注意*/
    /*.创造力{ 200px; height:200px; background-color:#F00; margin:10px 0px 0px 10px; float:left}
    */
    #menu{ width:1200px; height:45px; background:#90F; margin-top:20px}
    .text{ width:200px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}
    .text:hover{ background-color:#000; color:#F00; cursor:pointer} 
    /*鼠标放上来*/
    </style>
    
    
    </head>
    
    <body>
    
    <ol style="list-style:none">
        <li>足球</li>
        <li>篮球</li>
        <li>羽毛球</li>
    </ol>
    
    <ol style="list-style-image:url(../IMG/QQ%E5%9B%BE%E7%89%8720170711193040.gif)">
        <li>足球</li>
        <li>篮球</li>
        <li>羽毛球</li>
    </ol>
    
    
    <div style="300px; height:300px; background-color:#0F0; position:fixed; top:20px; left:20px" ></div>
    
    <div style="200px; height:500px; background-color:#099"></div>
    <div style="200px; height:500px; background-color:#060"></div>
    <div style="200px; height:500px; background-color:#055"></div>
    
    
    
    
    <div style="200px; height:500px; background-color:#099"></div>
    <div style="200px; height:500px; background-color:#060"></div>
    <div style="200px; height:500px; background-color:#055"></div>
    
    <div style="400px; height:400px; position:absolute; top:100px; left:100px">
    <div style="300px; height:300px; background-color:#0F0; position:absolute; top:50px; left:50px">
    </div>
    </div>
    
    <div style="200px; height:500px; background-color:#099"></div>
    <div style="200px; height:500px; background-color:#060"></div>
    <div style="200px; height:500px; background-color:#055"></div>
    
    <div style="300px; height:300px; background-color:#0F0; position:absolute; top:200px; left:200px">
    </div>
    
    <div style="300px; height:300px; background-color:#0F0; position:relative">
    </div>
    
    <div class="创造力">1</div>
    <div class="创造力">2</div>
    <div class="创造力">3</div>
    <div class="创造力">4</div>
    <div class="创造力">5</div>
    <div class="创造力">6</div>
    
    <div style="clear:both"></div>
    
    <div style="800px; height:500px; background-color:#0F0"></div>
    
    
    
    <div id="menu">
        <div class="text">首页</div>
        <div class="text">产品介绍</div>
        <div class="text">产品图片</div>
        <div class="text">产品参数</div>
        <div class="text">关于服务</div>
        <div class="text">联系我们</div>
    </div>
    
    </body>
    </html>
  • 相关阅读:
    JS 删除web sql 数据表
    JS 新建web sql 数据表
    JS 更新web sql 数据表的数据
    JS 删除一行web sql 数据表的数据
    JS 向web sql数据表插入数据
    JS 打开or连接web sql数据库
    JS 获取表单数据存入数组
    JS 限制小数点位数
    JS 通过id获取DOM对象--减少代码
    mvc “System.NullReferenceException”类型的异常在 App_Web_zo44wdaq.dll 中发生,但未在用户代码中进行处理 其他信息: 未将对象引用设置到对象的实例。
  • 原文地址:https://www.cnblogs.com/jly144000/p/7172437.html
Copyright © 2011-2022 走看看