zoukankan      html  css  js  c++  java

  • DIV+CSS 基础

    1. 盒子模型：margin(边界)，可被占位；border(边框)；padding(填充)；content(内容)
    2. 块元素：
      1. 　　默认占据一行，前后换行。
      2. 　　作为容器，装载块元素和行内元素，被装载元素的位置，会都受到容器的限制。
      3. 　　在CSS（display/float/position）作用下，块元素和行内元素无异。
      4. 　　position可以改变位置受容器的限制：
        1. 　　top/left/bottom/right 只有在设置了定位属性的元素中有效
        2. 　　相对定位（relative）：是相对于自己的原始位置进行位置偏移，偏移后，原始空间仍然会被占据，不以父级作为参考。
        3. 　　绝对定位（absolute）：相对于自己父级（必须具有定位属性的）进行位置偏移，偏移后，原始空间不被占用，脱离原有容器。若所有父级都没有定位属性，则选择浏览器作为父级。
        4. 　　层级次序：如由于定位（相对或绝对）而引起元素之间的遮掩，则可以通过设置 z-index：###调整层级位置，值越大就越在上层。
    3. 行内元素：
      1. 　　默认不占据一行，行内元素，前后不换行。
      2. 　　通常不作为容器，只装载内容。
    4. float：设置浮动属性时，如本身没有宽高属性时，元素将会自动占据最小的空间；如相邻元素没有使用margin（left/right）属性，相邻元素则会象磁贴一样紧紧地粘上自己。
    5. 横向与纵向布局：
      1. 　　横向五级菜单 
        <!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" />
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script><script type="text/javascript">
<![CDATA[
$(document).ready(
    function() {
       $("li")
       .bind("mouseover",function(){$(this).attr("class","normal");})
       .bind("mouseout",function(){$(this).romoveAttr("class");});
    });
]]>
</script>
<style type="text/css">
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}
a {
    color: #808080;
    text-decoration: none;
}
a:hover {
    color: #000080;
}
#menu { width: 360px; }
#menu ul { list-style: none; margin: 0px; padding: 0px; z-index:0; }
#menu ul li { margin-top:-2px; background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border: 1px solid #ccc; position:relative;display:inline; }
#menu ul li ul { display:none; position: absolute; left: 0px; top: 20px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; }
#menu ul li ul li { background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border-bottom: 1px solid #ccc; position:relative;display:block; }
#menu ul li ul li ul{ display:none; margin-left:-2px; position: absolute; left: 180px; top: 0px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; }
#menu ul li.normal > ul { display:block;}
#menu ul li:hover > ul { display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">第一级菜单 1</a></li>
<li><a href="#">第一级菜单 2</a>
    <ul>
    <li><a href="#">第二级菜单 2－1</a></li>
    <li><a href="#">第二级菜单 2－2</a>
        <ul>
        <li><a href="#">第三级菜单 2－2－1</a>
            <ul>
            <li><a href="#">第四级菜单 2－2－1－1</a></li>
            <li><a href="#">第四级菜单 2－2－1－2</a>
                <ul>
                <li><a href="#">第五级菜单 2－2－1－2－1</a></li>
                <li><a href="#">第五级菜单 2－2－1－2－2</a></li>
                </ul>
            </li>
            <li><a href="#">第四级菜单 2－2－1－3</a></li>
            </ul>
        </li>
        <li><a href="#">第三级菜单 2－2－2</a></li>
        </ul>
    </li>
    <li><a href="#">第二级菜单 2－3</a></li>
    </ul>
</li>
</ul>
</div>
</body>
</html>
      2. 　　纵向五级菜单： 
        <!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" />
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<![CDATA[
$(document).ready(
    function() {
       $("li")
       .bind("mouseover",function(){$(this).attr("class","normal");})
       .bind("mouseout",function(){$(this).romoveAttr("class");});
    });
]]>
</script>
<style type="text/css">
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}
a {
    color: #808080;
    text-decoration: none;
}
a:hover {
    color: #000080;
}
#menu { width: 180px; border: 1px solid #ccc; border-bottom:none;}
#menu ul { list-style: none; margin: 0px; padding: 0px; z-index:0; }
#menu ul li { background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border-bottom: 1px solid #ccc; position:relative;}
#menu ul li ul { display:none; position: absolute; left: 180px; top: 0px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; }
#menu ul li.normal > ul { display:block;}
#menu ul li:hover > ul { display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">第一级菜单 1</a></li>
<li><a href="#">第一级菜单 2</a>
    <ul>
    <li><a href="#">第二级菜单 2－1</a></li>
    <li><a href="#">第二级菜单 2－2</a>
        <ul>
        <li><a href="#">第三级菜单 2－2－1</a>
            <ul>
            <li><a href="#">第四级菜单 2－2－1－1</a></li>
            <li><a href="#">第四级菜单 2－2－1－2</a>
                <ul>
                <li><a href="#">第五级菜单 2－2－1－2－1</a></li>
                <li><a href="#">第五级菜单 2－2－1－2－2</a></li>
                </ul>
            </li>
            <li><a href="#">第四级菜单 2－2－1－3</a></li>
            </ul>
        </li>
        <li><a href="#">第三级菜单 2－2－2</a></li>
        </ul>
    </li>
    <li><a href="#">第二级菜单 2－3</a></li>
    </ul>
</li>
</ul>
</div>
</body>
</html>

      3. float 布局

        <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
        　　
        　　body{
                     margin:0;
                     padding:0;
        　　　　　　　 text-align:center
        　　}
    #container        {
        margin:0 auto;
        width:1024px;
        height:600px;    
                text-align:left;
        background        :aqua;
    }
    #left{
        background:#ccc;
        float:left;
        width:10%;
        height:100%;    
    }
    #middle{
        background:gray;
        width:80%;
        margin:0 10%;
        height:100%;    
    }
    #right{
        background:#ccc;
        float:right;
        width:10%;
        height:100%;    
    }
}
</style>
<title>无标题 1</title>
</head>
<body>
<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="middle">middle</div>
</div>
</body>
</html>
  • 相关阅读:
    如何理解显示卡的驱动模块（DDX,DRM,DRI,XVMC）
    基于Linux的嵌入式文件系统构建与设计
    Windows系统——后缀为.zip.00X的zip分卷解压
    windows系统——U 盘损坏修复
    windows系统——常用命令
    U盘用FAT32还是用NTFS格式好
    linux系统程序设计教程
    Posix线程编程指南
    编程风格——UNIX 高手的 10 个习惯
    linux压缩文件——解压方法
  • 原文地址：https://www.cnblogs.com/yipeng-yu/p/3210623.html
Copyright © 2011-2022 走看看