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. 　　横向五级菜单

      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2. <html xmlns="http://www.w3.org/1999/xhtml">
      3. <head>
      4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5. <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script><script type="text/javascript">
      6. <![CDATA[
      7. $(document).ready(
      8.     function() {
      9.        $("li")
      10.        .bind("mouseover",function(){$(this).attr("class","normal");})
      11.        .bind("mouseout",function(){$(this).romoveAttr("class");});
      12.     });
      13. ]]>
      14. </script>
      15. <style type="text/css">
      16. body {
      17.     font-family: Arial, Helvetica, sans-serif;
      18.     font-size: 12px;
      19.     line-height: 1.5;
      20. }
      21. a {
      22.     color: #808080;
      23.     text-decoration: none;
      24. }
      25. a:hover {
      26.     color: #000080;
      27. }
      28. #menu { width: 360px; }
      29. #menu ul { list-style: none; margin: 0px; padding: 0px; z-index:0; }
      30. #menu ul li { margin-top:-2px; background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border: 1px solid #ccc; position:relative;display:inline; }
      31. #menu ul li ul { display:none; position: absolute; left: 0px; top: 20px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; }
      32. #menu ul li ul li { background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border-bottom: 1px solid #ccc; position:relative;display:block; }
      33. #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; }
      34. #menu ul li.normal > ul { display:block;}
      35. #menu ul li:hover > ul { display:block;}
      36. </style>
      37. </head>
      38. <body>
      39. <div id="menu">
      40. <ul>
      41. <li><a href="#">第一级菜单 1</a></li>
      42. <li><a href="#">第一级菜单 2</a>
      43.     <ul>
      44.     <li><a href="#">第二级菜单 2－1</a></li>
      45.     <li><a href="#">第二级菜单 2－2</a>
      46.         <ul>
      47.         <li><a href="#">第三级菜单 2－2－1</a>
      48.             <ul>
      49.             <li><a href="#">第四级菜单 2－2－1－1</a></li>
      50.             <li><a href="#">第四级菜单 2－2－1－2</a>
      51.                 <ul>
      52.                 <li><a href="#">第五级菜单 2－2－1－2－1</a></li>
      53.                 <li><a href="#">第五级菜单 2－2－1－2－2</a></li>
      54.                 </ul>
      55.             </li>
      56.             <li><a href="#">第四级菜单 2－2－1－3</a></li>
      57.             </ul>
      58.         </li>
      59.         <li><a href="#">第三级菜单 2－2－2</a></li>
      60.         </ul>
      61.     </li>
      62.     <li><a href="#">第二级菜单 2－3</a></li>
      63.     </ul>
      64. </li>
      65. </ul>
      66. </div>
      67. </body>
      68. </html>
    2. 　　纵向五级菜单： 
      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2. <html xmlns="http://www.w3.org/1999/xhtml">
      3. <head>
      4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5. <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
      6. <script type="text/javascript">
      7. <![CDATA[
      8. $(document).ready(
      9.     function() {
      10.        $("li")
      11.        .bind("mouseover",function(){$(this).attr("class","normal");})
      12.        .bind("mouseout",function(){$(this).romoveAttr("class");});
      13.     });
      14. ]]>
      15. </script>
      16. <style type="text/css">
      17. body {
      18.     font-family: Arial, Helvetica, sans-serif;
      19.     font-size: 12px;
      20.     line-height: 1.5;
      21. }
      22. a {
      23.     color: #808080;
      24.     text-decoration: none;
      25. }
      26. a:hover {
      27.     color: #000080;
      28. }
      29. #menu { width: 180px; border: 1px solid #ccc; border-bottom:none;}
      30. #menu ul { list-style: none; margin: 0px; padding: 0px; z-index:0; }
      31. #menu ul li { background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border-bottom: 1px solid #ccc; position:relative;}
      32. #menu ul li ul { display:none; position: absolute; left: 180px; top: 0px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; }
      33. #menu ul li.normal > ul { display:block;}
      34. #menu ul li:hover > ul { display:block;}
      35. </style>
      36. </head>
      37. <body>
      38. <div id="menu">
      39. <ul>
      40. <li><a href="#">第一级菜单 1</a></li>
      41. <li><a href="#">第一级菜单 2</a>
      42.     <ul>
      43.     <li><a href="#">第二级菜单 2－1</a></li>
      44.     <li><a href="#">第二级菜单 2－2</a>
      45.         <ul>
      46.         <li><a href="#">第三级菜单 2－2－1</a>
      47.             <ul>
      48.             <li><a href="#">第四级菜单 2－2－1－1</a></li>
      49.             <li><a href="#">第四级菜单 2－2－1－2</a>
      50.                 <ul>
      51.                 <li><a href="#">第五级菜单 2－2－1－2－1</a></li>
      52.                 <li><a href="#">第五级菜单 2－2－1－2－2</a></li>
      53.                 </ul>
      54.             </li>
      55.             <li><a href="#">第四级菜单 2－2－1－3</a></li>
      56.             </ul>
      57.         </li>
      58.         <li><a href="#">第三级菜单 2－2－2</a></li>
      59.         </ul>
      60.     </li>
      61.     <li><a href="#">第二级菜单 2－3</a></li>
      62.     </ul>
      63. </li>
      64. </ul>
      65. </div>
      66. </body>
      67. </html>

    3. float 布局

      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2. <html xmlns="http://www.w3.org/1999/xhtml">
      3. <head>
      4. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
      5. <style type="text/css">
        　　
        　　body{
                     margin:0;
                     padding:0;
        　　　　　　　 text-align:center
        　　}
      6.     #container{
      7.         margin:0 auto;
      8.         width:1024px;
      9.         height:600px;    
                text-align:left;
      10.         background:aqua;
      11.     }
      12.     #left{
      13.         background:#ccc;
      14.         float:left;
      15.         width:10%;
      16.         height:100%;
      17.     }
      18.     #middle{
      19.         background:gray;
      20.         width:80%;
      21.         margin:0 10%;
      22.         height:100%;
      23.     }
      24.     #right{
      25.         background:#ccc;
      26.         float:right;
      27.         width:10%;
      28.         height:100%;
      29.     }
      30. }
      31. </style>
      32. <title>无标题 1</title>
      33. </head>
      34. <body>
      35. <div id="container">
      36.     <div id="left">left</div>
      37.     <div id="right">right</div>
      38.     <div id="middle">middle</div>
      39. </div>
      40. </body>
      41. </html>

DIV+CSS 基础的更多相关文章

  1. div+css基础

    Div+css技术 Div是用于存放文字,图片,元素的容器 Css 是用于指定存放在div中的内容如何显示,包括内容的位置和外观(层叠样式表) Html 文件 <!--必须引入的文件--> ...

  2. div+css基础教程

    本文存下来作为备忘. 第一节  了解div+css 一.什么是div+css div元素是html(超文本语言)中的一个元素,是标签,用来为html文档内大块(block-level)的内容提供结构和 ...

  3. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  4. 【笔记-前端】div+css排版基础，以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

  5. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

  6. DIV+CSS专题：第一天　XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

  7. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  8. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  9. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

随机推荐

  1. 第六十七篇、OC_UITableView head下拉图片放大的效果

    (一) 布置UITableview 我们首先要通过设置UITableview的内容偏移 self.tableView.contentInset 来为图片视图留出位置,这里我们的图片高度暂定为280 ; ...

  2. MPlayerX For Mac白屏问题

    在Mac App store下载了MPlayerX后,如果系统版本是10.10的,用MPlayerX看视屏当选择全屏后会出现白屏现象只有声音退出全屏后仍旧是白屏. 这是因为MPlayerX已经在Mac ...

  3. Weex

    今天在群友发的那个掘金技术网站里头看到这个weex,感觉还不错 阿里负责的一个开源项目 源码地址: http://alibaba.github.io/weex/index.html 是用来做app的 ...

  4. BeanDefinition的Resource定位——2

    1.FileSystemXmlApplicationContext的实现 public class FileSystemXmlApplicationContext extends AbstractXm ...

  5. tomcat的OutOfMemoryError(PermGen space)解决方法

    修改TOMCAT_HOME/bin/catalina.bat,在“echo "Using CATALINA_BASE: $CATALINA_BASE"”上面加入以下行: set J ...

  6. linux系统目录架构

    /bin目录:可执行的二进制文件,shell命令(就是我们说的命令:cp ls ...),所有用户都有权执行. /boot目录:引导目录,整个操作系统启动所需的所有文件都在该目录下,其中最主要的就是v ...

  7. 基于BT协议的文件分发系统

    基于BT协议的文件分发系统构成:    1.一个Web服务器:保存着种子文件    2.一个种子文件:保存共享文件的一些信息(文件名,文件大小    ,Tracker服务器地址,torrent为后缀) ...

  8. Delphi XE5教程7：单元引用和uses 子句

    内容源自Delphi XE5 UPDATE 2官方帮助<Delphi Reference>,本人水平有限,欢迎各位高人修正相关错误! 也欢迎各位加入到Delphi学习资料汉化中来,有兴趣者 ...

  9. 用python实现哈希表

    哈哈,这是我第一篇博客园的博客.尝试了一下用python实现的哈希表,首先处理冲突的方法是开放地址法,冲突表达式为Hi=(H(key)+1)mod m,m为表长. #! /usr/bin/env py ...

  10. Microsoft Press Free eBook

    微软的免费的电子书, 都是Microsoft Press 出版的 有以下价格方面 Windows Server(大体上都是Windows Server 2012 ) Microsoft Azure(好 ...